Stackable：解鎖方塊的插件

你還記得80年代嗎？ 新浪潮的到來，鯔魚髮型的出現，Cyndi Lauper、Michael Jackson、Madonna、Prince、Whitney Houston、Duran Duran 等的成功。 在 80 年代，這也是電子遊戲的爆炸式增長，以及一款我們無數人都近在咫尺的遊戲的發布：俄羅斯方塊。

該遊戲原理簡單，在優化可用空間的同時堆疊不同形狀的積木。

這個概念可以用一句話來概括： “俄羅斯方塊完全符合最佳遊戲的定義：一分鐘學習，一生掌握” ，正如記者比爾昆克爾（又名遊戲醫生）所說。

可以應用於許多程序的語句，例如 WordPress。

說到 WordPress，如果我提到俄羅斯方塊，那是因為我今天要剖析的插件叫做 Stackable。 並且有充分的理由，該插件添加了新的 Gutenberg 塊以嵌套在您的 WordPress 站點中。

準備好迎接這個新的測試了嗎？ 在你的標記上，準備好，去吧！

本文最初寫於 2021 年 7 月，於 2021 年 11 月更新為 Stackable 的免費和高級 3.0.5 版本。

您最好的 WordPress 項目需要最好的主機！

WPMarmite 推薦 Bluehost：出色的性能，出色的支持。 所有你需要一個好的開始。

試試 Bluehost

什麼是可堆疊？

“為下一代網頁設計提供動力”。 這是 Stackable 在其官方網站上的使命，該插件將自己定義為“古騰堡的新頁面構建體驗”。 不少於！

必須說，在 WordPress 目錄上，block 插件有超過 40,000 的活躍安裝和 4.9 顆星的好評，滿分 5 星，伴隨著一連串的好評如潮。

如果您已經在尋找新的 Gutenberg 塊，您可能已經遇到過諸如 Ultimate Addons for Gutenberg、Qubely、Getwid 或 Coblocks 之類的插件。

我們在關於增加古騰堡權力的插件的文章中談到了它們。 他們的任務很簡單：使內容編輯器中可用的 Gutenberg 塊的範圍多樣化。

Stackable 也是為 Gutenberg 設計的插件，它帶來了無數的塊，從偉大的經典（標題、畫廊、號召性用語）到更奇特的（報價、價格表、計時器、推薦等）。
這些塊可以立即使用和定制。

那麼，你可能會想，安裝 Stackable 有什麼意義呢？ 它們只是其他塊中的塊。 好吧，Gutenberg 提供了許多有用的塊，但是使用 Stackable，可能性會成倍增加。

此外，您可以使用比 Gutenberg 原生提供的更高級的自定義功能，例如：調整塊內元素的佈局、間距、更改背景、添加懸停效果等。

Stackable 有兩個版本：

• WordPress 目錄中提供免費版本。

• 該插件的官方網站提供付費版本，在一個站點上使用起價為 49 美元。

可以想像，第二個可以訪問更多塊並允許更精細地自定義它們。

對於此測試，我們專注於高級版。

可堆疊設置

要開始配置 Stackable，請安裝並激活插件。 然後轉到設置>可堆疊。

在其界面上，您將可以訪問以下設置：

• Font Awesome icons Pro （高級版）：將 Font Awesome Pro 套件集成到 Stackable。
• 編輯器設置：允許您控制 Stackable 編輯器的某些功能。 例如，您可以禁用設計庫、設置某些塊的寬度、關閉您不使用的編輯器窗格以及鏈接列，以便它們進行相同的更改。
• 角色管理器（高級）：授予或阻止某些用戶角色訪問塊編輯器，並讓他們只編輯內容。 注意：此管理適用於所有塊，而不僅僅是 Stackable 中包含的那些。
• 自定義字段（高級）：此功能允許您創建自定義字段，您可以從編輯器動態添加到您的內容中。 為此，請轉到 WordPress 管理的字段部分，單擊“添加新”，定義字段類型（文本、數字、日期、時間或 URL）和名稱。

然後單擊“保存字段”，為您的字段輸入一個值，然後單擊“保存更改”以保存它。

要將其集成到您的內容中，請將光標放在您希望字段值出現的位置，然後單擊數據庫圖標（它對應於動態字段）。

選擇“站點”作為“動態源”，然後選擇新創建的字段（它出現在“可堆疊自定義字段”下），最後單擊“應用”。 而已！

這一切都很好，但我們為什麼要這麼做？ 由於動態內容的魔力，一旦我更新它，我的電子郵件地址將在我的網站上集成自定義字段的每個地方自動更新。

• 響應式斷點：可以更改在平板電腦或移動模式下查看站點的屏幕寬度，從而顯示您為這些設備定義的設置。
• 全局設置：有兩個功能可用於克服可能與您網站上的主題不兼容的問題。 您可以輸入主題內容區域的選擇器，並強制使用Stackable 的字體，以便它們接管您的主題的字體。

與 Elementor 一樣，Stackable 具有全局設置：適用於使用 Elementor 創建的頁面的顏色和排版。 但是使用 Stackable，您可以為構成您網站的所有塊定義這些設置。

• 啟用和禁用塊：如果您不需要某些塊，您可以禁用它們，這樣它們就不會出現在可用塊列表中。
• 優化設置（高級）：允許您僅在包含 Stackable 塊的帖子中加載 JavaScript 和 CSS 文件，而不是在整個站點上加載。 此功能的目的是提高您網站的性能。 此功能僅適用於版本 2 塊，因為它已經適用於插件的最新塊（從版本 3 開始）。

如何使用可堆疊？

套件和塊

Stackable 直接在 WordPress 編輯器中使用。 為此，請創建或打開頁面或帖子，然後選擇帖子頂部的設計庫。

設計庫包含UI 工具包和類別。 它是什麼？

事實上，這兩個部分包含相同的元素，但分類不同。 UI 工具包收集樣式指南可用的塊，類別按塊的類型對它們進行分組：標題、推薦、號召性用語等，可以在所有可用的樣式指南中找到。

類別和 UI 工具包是為您找到合適的塊的兩種不同方式。

每個塊都帶有即用型和可定制的設計。 我們將在下一部分看到如何自定義它們。

要找到您需要的塊，您還可以使用搜索欄。 窗口右上角的四個圖標可讓您刷新搜索結果並更改縮略圖的大小，以獲得更準確或更大的不同塊視圖。

如何在帖子中集成可堆疊塊

您也可以像添加任何塊一樣簡單地單擊“+”圖標，並且您將輕鬆識別 Stackable 插件塊，因為它們裝飾有紫橙色漸變。

通過單擊“全部瀏覽”按鈕，您可以訪問您可以使用的所有古騰堡區塊。 Stackable 塊出現在“Text”和“Appearance”部分中，並且都被分組在同名的“Stackable”部分中，這也可以訪問設計庫。

所有這些路徑都通向可堆疊塊的羅馬，是的，但主要是設計庫路徑可以訪問預構建的設計。

以這個 Testimonial 塊為例，它具有最少的格式、填充文本，並且沒有示例圖像：

並查看從設計庫添加的另一個推薦塊（ Prime Testimonial 2塊）：

找到完美契合後，單擊所需項目以將其直接嵌入到您的帖子中。 然後，您可以重新排列頁面上的元素，就像任何 Gutenberg 塊一樣，並對其進行自定義。

自定義可堆疊

要自定義可堆疊塊，請轉到帖子右側的“塊”部分，您會在其中找到一堆選項，分為三類：塊、樣式和高級。

找到您感興趣的可能會很乏味，因為有很多選擇，但您也可以通過簡單地雙擊要更改的塊元素來找到它。 然後，您將一鍵進入該塊的設置。

不同的自定義選項分為三個選項卡：

• 塊：在這裡您可以自定義組成塊的不同元素的佈局，添加邊框和陰影以及對文本的背景、間距和對齊方式進行操作。

您還可以通過將鼠標懸停在塊上，然後使用元素底部的手柄來調整塊中元素之間的間距。 您甚至可以看到將其與其鄰居分開的像素數。 很有用！

• 樣式：允許您管理列並對排版、顏色、按鈕和分隔符進行操作。 這更出乎意料，但您也可以為您的區塊添加標題和描述。
• 高級：在這裡您可以訪問高級功能，例如與塊關聯的 HTML 標記和響應式管理（可以在計算機、平板電腦或移動設備上隱藏塊）。 您可以調整塊的邊距和內容的對齊方式，但也可以為元素添加動畫或過渡效果（不過要簡單）。
  CSS 愛好者的錦上添花是能夠直接在此界面中修改塊的 CSS，在塊旁邊，並實時預覽更改。
  最後，條件顯示允許您僅在滿足您先前定義的條件時才顯示元素。

加入 WPMarmite 訂閱者

獲取最新的 WPMarmite 帖子（以及獨家資源）。

現在訂閱

如果您對模塊的設計不完全滿意，您可以修改許多參數以根據自己的喜好進行調整。

例如，我喜歡能夠輕鬆地為元素或父元素的懸停添加效果（為父塊應用背景以利用最後一個功能），或者輕鬆修改塊的每個元素的邊距.

更好的是：您可以在手機和平板電腦上選擇不同的邊距！ 因此，您可以輕鬆更改網站的響應方面。 為此，首先單擊桌面圖標（計算機）以顯示其他設備的圖標。

另一個不錯的選擇是在元素的頂部或底部添加分隔符，例如 Elementor。 您當然可以調整這些分隔符的外觀，甚至可以在高級版中添加一兩個較輕的層。

這是這個開胃漢堡底部的樣子：

當您將鼠標懸停在他們的名字上時，某些設置會變成紫色，並且您的光標會變成一個問號。 如果您不知道它們是什麼，請單擊以查看有助於您了解它們用途的動畫。 找到解決所有這些選項的方法非常有用。

對主題和插件有什麼適應？

適應主題

根據官方文檔，“Stackable 應該適用於任何主題”，只要您網站上的主題針對 Gutenberg 進行了優化。

說到主題，我在這篇文章的開頭提到了它：有一個內部主題，旨在與 Gutenberg 編輯器和 Stackable 插件一起使用。 它是免費的，可在官方 WordPress 目錄中找到。 簡而言之，有了它，兼容性就得到了保證。

它是同名插件的顏色，所以我希望你不介意糖果粉色。

下載可堆疊主題：

插件適配

Stackable 文檔確保它與elementor 頁面構建器（aff 鏈接）兼容。 但請注意，您將無法在頁面構建器編輯器中使用 Stackable 塊。

它實際上與 Gutenberg 塊的方式相同，您不能在 Elementor 編輯器中使用它們，您必須做出選擇：使用 Elementor 或 WordPress 編輯器構建您的頁面。

Stackable 官方網站還聲稱其塊與任何插件兼容，因此您可以毫無問題地將它們與其他塊庫一起使用。

使用 Elementor 構建您的網站

使用著名的頁面構建器輕鬆設計 WordPress 網站的外觀和感覺。 嘗試元素

嘗試元素

文檔和支持

如果您在使用 Stackable 時遇到任何困難，可以隨時參考官方文檔。

你會在那裡找到：

• 專門介紹插件入門的部分。
• 故障排除部分。
• 定價和許可證詳細信息。
• 有針對性的指南。
• 常見問題解答。
• 和其他資源。

您還可以在“設置”>“可堆疊”的“文檔”選項卡中找到此文檔。

如果出現技術故障，負責插件的團隊會為用戶提供經常遇到的問題的列表，以及解決這些問題的解決方案。

如果您仍然遇到問題，您可以致電 Stackable 的支持人員，或加入他們的 Facebook 群組以獲取問題的答案。

關於支持，如果您通過設置 > Stackable中的“聯繫我們”選項卡中的聯繫表格向 Stackable 團隊發送您的請求，或者發送至電子郵件地址support @wpstackable.com，Stackable 團隊可以為您提供幫助。

什麼是物有所值？

高級版在提供的各種塊方面自然更加慷慨。 自定義選項也更多。

例如，對於功能塊，免費版有 2 個佈局選項（基本版和普通版），而高級版有 13 個。

在高級版中，也有或多或少有趣的參數，取決於您對 Stackable 的使用，例如與Font Awesome Pro和角色管理器的集成以及修改 CSS 中任何塊的可能性。

要使用最後一個功能，請轉到Advanced部分，然後轉到Custom CSS 。 方便：實時顯示您的更改。

高級版還提供一年的支持和更新。

使用 Stackable 或頁面構建器：這就是問題所在

就是這樣，我們一起討論了 Stackable 的功能和設置。 現在您對塊插件存儲的內容有了更清晰的了解。

如果您是頁面構建器的粉絲，或者已經仔細研究過它們，您可能想知道：為什麼要使用 Stackable 而不是頁面構建器？

因為例如 Stackable 提供的選項和 Elementor 的免費版本具有可比性。 並且有充分的理由， Stackable 使用頁面構建器來實現設計體驗，正如其官方網站所聲稱的那樣： “有信心使用 Gutenberg 的新頁面構建體驗輕鬆構建最快的網站” 。

隨著完整站點編輯的到來，它將允許對站點界面的所有元素（而不僅僅是帖子的內容）採取行動，Stackable 可能會更接近。 也就是說， Stackable 具有直接在 WordPress 內容編輯器中使用的優勢，與當前的頁面構建器相比，它簡化了設計體驗。

另一方面，Elementor 的專業版提供了更高級的小部件和功能。 由於單個站點使用這兩個插件的成本相同（49 美元），我們建議您轉而使用頁面構建器的龐然大物。

我們對 Stackable 的最終意見

總而言之，我們可以說 Stackable 是一個相當直觀的插件，它提供了現代和美觀的設計。

Stackable 適用於任何想要擁有更高級塊來自定義其網站設計的網站創建者，而無需觸及任何代碼行（但如果他們掌握了 CSS，則有可能根據自己的喜好放置塊）。

但是，您應該使用它還是直接使用 Elementor 等更高級的頁面構建器？

事實上，通過 Stackable，我們正在直接在 WordPress 編輯器中實現頁面構建器的設計體驗。 可以說，這是古騰堡計劃最終目標的開始，即成為真正的“網站建設者”。

但是，我們還沒有。 目前， Stackable 將幫助您以與 Elementor 免費版相同的方式創建帖子，無需任何模板管理（Stackable 允許您加載預製設計，但不能保存您自己的設計）。

如果您喜歡使用 WordPress 編輯器，並且 Stackable 提供的塊足以滿足您的項目，那就去吧！ 不需要使用 Elementor。

但是，如果您需要更高級的功能或需要從頭開始設計網站（我的意思是自定義所有頁面模板），Elementor（aff 鏈接）或其競爭對手之一將是必不可少的。

如果您是已經被 Elementor 誘惑的用戶之一，那麼 Stackable 可能不會大受歡迎。 畢竟，你有自己的習慣，所以沒有真正的理由去改變它們。

如果您對 Stackable 的 Pro 版本感興趣，請不要猶豫，查看可用的演示並瀏覽免費版本，以確保塊和選項符合您的喜好。

下載可堆疊插件：

而你，你已經用過了嗎？ 這篇文章是否讓您想使用它？ 在評論區分享你的觀點。