Blocksy – 使用超輕量佈景主題編輯器快速建立網站

Google 修改了演算法，將網頁索引、排序的重點放在訪客的體驗上，其中也包含網頁的載入速度，特別是行動版裝置的網站體驗與速度上。

也因此最近幾年 WordPress 佈景主題、外掛社群間逐漸將重點轉向了輕量、不帶冗餘 CSS、JS 代碼的風潮，網站的訪客也終於可以輕鬆的閱讀不需要等待數十秒才開啟的網頁了。(當然，人性的心理實際上也是耐不住等候十多秒才開的網頁的)

Cloudways 整理了「最佳 WordPress 佈景主題」中「最輕量」的清單中就有提到了 Blocksy。

Blocksy is a blazing fast theme that’s also lightweight thanks to its use of the latest web technologies.

The Best Lightweight Themes for WordPress

Blocksy 是最近快速崛起、頗受網頁設計社群青睞的超輕量佈景主題編輯器，除了彈性、美觀的 UI、UX 設計之外，Blocksy 還提供了 32 種不同主題的 Starter Sites 範本 (陸續增加中) 讓大家可以快速建立網站。

Blocksy 佈景主題編輯器

Blocksy 目前提供的網站主題範本有：

可以到官網看看這些 Starter Sites 範本的實際樣貌，做為網站設計的參考唷。

在這篇文章中我們將會跟大家介紹 Blocksy 免費版與 Pro 付費版的相關功能，讓我們從安裝佈景主題與外掛開始！

安裝 Blocksy 佈景主題

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的購物車功能是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能，所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

如果想先使用免費版的人，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

從 WordPress 的後台找到 Blocksy 的功能選單，可以發現有 3 個選項：

• Blocksy
• Content Blocks
• Account

功能選單 – Blocksy

首頁

對佈景主題編輯器來說，一般都是透過 WordPress 後台 > 「外觀」>「自訂」進入編輯模式。

Blocksy 則是在功能選單中提供了捷徑方便使用者能夠直接前往編輯以下功能：

• 佈景主題預設色彩
• 頁首選項
• 部落格選項
• 頁面選項
• 側邊欄選項
• 頁尾選項

此外，對於 Blocksy 未來的發展感興趣的人也可以選擇接受 Beta 版本的更新，可以在測試網站中一探 Blocksy 的新功能。

並且透過服務連結能快速提交 Support Ticket 或前往 Blocksy 的官方臉書社團詢問問題。

Starter Sites

Starter Sites 頁籤下就是前面提到的 14 種不同類型網站的範本了，方便使用者預覽網站的設計與編排，並且提供安裝精靈可以按照步驟快速安裝範本。

可以到官網看看這些 Starter Sites 範本的實際樣貌，做為網站設計的參考唷。

Extensions

免費版

免費版的 Blocksy 就已經提供了相當實用的功能，從歐盟國家重視的隱私權政策、訂閱電子報、商品評價、熱門話題文章到增強的小工具功能等。

• Cookies Consent
  如果網站的客層來自於歐盟國家，需要清楚告知隱私權政策並取得訪客關於 Cookies 存取的同意。

• Newsletter Subscribe
  可在小工具區塊或文章中插入「訂閱電子報」的表單，方便網站累積訂閱戶。
• Product Reviews
  提供商品評價的文章類型，方便聯盟行銷經營者可以建立商品評價、加入推薦連結。

• Trending Posts
  可以基於特定條件顯示熱門話題文章或商品，例如：指定時間內的留言或商品評價的次數。

• Widgets
  可以新增自訂的小工具到側邊欄中，例如：社群網站圖標、訂閱電子報表單、聯絡資訊、自訂廣告或熱門文章、最新文章等。

Pro 付費版

而 Pro 付費版的功能則是更為豐富，讓使用者可以自訂字型、使用 Adobe 字型、自訂程式碼片段、本地託管 Google 字型、進階選單功能、自訂文章類型、懸浮捷徑選單、自訂側邊欄、White Label 以及 WooCommerce 的增強功能等。

• Adobe Fonts
  在網站與頁面編輯器中使用你最喜歡的 Adobe 字型。
• Custom Code Snippets
  參考佈景主題編輯器提供的範本或其他人的網站是架設網站的第一步，為了讓網站上的功能更豐富、設計、樣式更靈活，我們就會需要額外加入 CSS、JS、PHP 等程式碼片段了。Blocksy 提供無需安裝額外外掛的選擇，方便使用者添加程式碼片段。
  當然，對於架設網站的老手們會推薦更為強大的 Code Snippet 外掛，例如：WPCodeBox，可以直接從雲端同步、下載需要的程式碼，並且自訂執行程式碼的條件。
• Custom Fonts / Local Google Fonts
  Blocksy Pro 提供可以上傳使用自訂字型並且本地託管 Google 字型的功能。一般來說，如果想要本地託管字型是需要安裝額外外掛的，可以參考以下文章。

文章回顧 – 「無痛架站 – Self-Host Google Fonts 提升網頁速度，改善 Google Core Web Vitals 分數」。

• Advanced Menu
  想要建立強大的 Mega Menu 嗎？Pro 版本可以讓使用者在選單選項中加入圖示，或是插入 Blocksy 的內容區塊 (Content Blocks)。
• Post Type Extra
  可透過 ACF、MetaBox、Toolset 等外掛新增自訂欄位製作新的文章類型，以及顯示閱讀進度條等功能。
• Shortcuts Bar
  透過 Shortcuts Bar 可以做出懸浮購物車的效果，方便顧客瀏覽、購買商品。

文章回顧 – 「WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳」。

• Multiple Sidebars
  可以自訂小工具並添加到側邊欄，並且提供條件編輯器決定顯示的條件。
• White Label
  對於 Agency 來說這是相當吸引人的功能。可以改變 Blocksy 佈景主題編輯器、外掛的名稱，顯示 Agency 的品牌資訊。

並且按服務的條件與需求隱藏 Blocksy 功能選單中的選項。

• WooCommerce Extra

Blocksy 目前已經能提供與 WooCommerce 相當好的整合，在 Pro 版本中更有「快速檢視商品」、「願望清單」、「懸浮購物車 Floating Cart」、「側邊滑出商品篩選器」等實用功能。

可以到官網查看更多關於 Blocksy Pro 的功能說明！

Useful Plugins

在實用外掛頁籤下則是列出 Blocksy 推薦使用的相關外掛，大部分都是在範本網站中會使用到的功能。包含：

• Stackable – Gutenberg Blocks
• JetEngine
• Toolset
• Getwid – Gutenberg Blocks
• HubSpot
• WPForms – Contact Form
• Elementor Page Builder
• Brizy Page Builder

Changelog

在 WordPress 外掛與 SaaS 工具的世界中，我最欣賞的就是能夠清楚記錄產品開發歷程與變更的公司。Blocksy 在這方面做得相當的完整且透明。

功能選單 – Content Blocks

內容區塊是 Blocksy 另一個令人激賞的功能，它提供了許多可以按「條件」、「頁面位置」顯示的區塊功能。

• Custom Content/Hooks
• Popup Template
• 404 Page Template
• Header Template
• Footer Template

一般來說，這些通常都是需要透過其他電子行銷類的外掛才能做到類似功能，而 Blocksy 的使用者可以利用 Content Block 設定「內容區塊」在頁面的顯示位置、顯示條件、顯示裝置以及留存的時間等，足可為使用者省下一筆不小的成本。

相關應用包含行銷活動的 CTA、FOMO 限時活動、彈出視窗 CTA、彈出視窗註冊電子報等。

功能選單 – Account

在 Account 頁面中清楚的顯示 Blocksy 帳號的相關資訊以及外掛版本。

結語

看完這篇文章之後，大家是不是對 Blocksy 有更多的了解了呢？

實際上，以超輕量佈景主題編輯器來說 Blocksy 提供了相當高的彈性與設計感可以讓使用者建立出高質感的網站，建議大家可以在測試網站中直接下載免費版的 Blocksy 玩一下，相信很快就能上手了。

以 Blocksy 佈景主題編輯器的 Modern Shop 網站範本為基礎，我們也陸續分享了不少應用技巧，可以參考以下文章。

延伸閱讀：
「WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳」。
「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」。
「WooCommerce 小技巧 – 2 個外掛自訂「結帳頁面」、最佳化多步驟結帳流程」。

對進階功能有興趣的朋友可以參考 Blocksy Pro 目前的定價 (以下價格為美金)：

並透過以下推薦連結直接到 Blocksy 官網購買，記得使用優惠碼取得額外折扣唷！