如何在沒有代碼的情況下在古騰堡中創建（固定）粘性塊

您是否正在尋找在古騰堡中創建黏性塊的方法？ 🤔

無論您是想創建聯盟行銷免責聲明、提供折扣還是吸引訪客注意您產品的重要功能，黏性塊都可以幫助您實現這些目標。

即使用戶向下捲動頁面，黏性塊（也稱為固定塊）在螢幕上仍然可見，從而確保您要突出顯示的內容始終在他們的視圖中。

👉 這是我們正在討論的範例 - 即使用戶滾動，您也可以看到社交圖示如何「卡在」其位置：

在古騰堡中添加黏性塊可提供無縫且引人入勝的用戶體驗，使您能夠有效地傳達訊息並吸引受眾的興趣。

古騰堡不提供開箱即用的黏性塊。 但是，您可以使用第三方工具為您的貼文和頁面添加黏性區塊。

在本教程中，我們將向您展示如何使用名為 Otter Blocks 的流行古騰堡外掛程式為您的 WordPress 網站添加黏性區塊。

讓我們深入探討一下。 🤿

如何在古騰堡編輯器中添加黏性塊

要在古騰堡編輯器中添加黏性區塊，您需要執行以下步驟：

• 第 1 步：安裝並啟動 Otter Blocks 插件
• 步驟 2：為您的區塊啟用「轉換為黏性」工具
• 步驟 3：更改黏性塊位置
• 步驟 4：配置偏移量
• 步驟 5：在行動裝置上啟用黏滯塊
• 可選步驟：嘗試浮動模式
• 可選步驟：指定區塊行為

第 1 步：安裝並啟用 Otter Blocks 外掛程式🔌

Otter Blocks 是一個 WordPress 插件，可擴展古騰堡編輯器的功能。

它提供了一系列頁面構建塊、編輯器功能和模板，以幫助改進網站的設計和功能。

Otter 提供的一些最受歡迎的區塊包括定價表、推薦、社交圖示、地圖、進度條、動畫、倒數計時和產品評論等。 這是水獺塊的完整列表。

Otter Blocks 有免費版和高級版（稱為 Otter Pro）。

您可以使用免費版本在古騰堡中建立基本的黏性區塊，因此您可以免費遵循本教學。

但是，要執行我們介紹的一些步驟，例如增加區塊和螢幕之間的距離、刪除前端的黏性區塊、在行動裝置上顯示黏性區塊等，您需要該外掛程式的進階版本。

Otter Pro 的單一網站年費為 49 美元。 您可以從這裡購買。 如果您想在使用插件之前嘗試一下，請嘗試這個演示。

➡️ 若要繼續，請安裝 Otter 的免費版或進階版。 在下面的教學中，我們將嘗試記錄某個功能何時需要進階選項。

步驟 2：為您的區塊啟用「轉換為黏性」工具 🚧

在古騰堡編輯器上開啟要新增黏性塊的頁面或貼文。

選擇要貼上的區塊，然後轉到編輯器右側的面板。

在面板上導航到“阻止”並轉到“阻止工具”選項。 透過選擇加號展開「區塊工具」。

然後從下拉式選單中選擇“轉換為黏性” 。

一個名為「黏滯」的新選項將出現在「區塊工具」的正下方。 展開它並轉到Sticky To 。

在「黏著」中，您可以設定想要塊黏到的元素。 有四種選擇：

1. 頂層塊
2. 部分
3. 父區塊
4. 螢幕

要了解這些選項以及哪一個適合您的置頂帖子，請打開古騰堡編輯器上的文檔概述，然後查看置頂帖子塊周圍的塊。

最頂層的塊是頂級塊。 透過選擇頂級塊，您將使黏性塊與最頂層的塊固定在一起。 在我們的例子中，它是下圖中的組塊。

接下來，選擇「Section」將確保黏滯塊固定到「Section」塊，選擇「Parent」塊將使黏性塊固定到黏性塊正上方的塊。

在我們的例子中，父塊是部分列塊。 請參考下圖。

最後，選​​擇「螢幕」選項將告訴編輯器忽略所有區塊，並將貼文貼到使用者螢幕的頂部。

黏性塊的位置預設為頂部。 若要了解如何變更其位置，請繼續下一步。

第三步：更改黏性塊位置🚩

若要變更黏性方塊位置，請返回右側面板並在「黏貼」選項正下方尋找「位置」 。

您可以將黏性塊放置在螢幕的頂部或底部。 底部位置僅對 Otter Pro 使用者可用。

以下是該區塊在我們的演示網站之一上的外觀：

第四步：配置偏移量⚙️

設定黏性塊的位置後，嘗試預覽它。 如果該區塊看起來距離螢幕太遠或太近，請使用「偏移」選項來增加或減少黏性方塊與螢幕之間的距離。

第 5 步：在行動裝置上啟用黏滯塊📱

預設情況下，黏滯塊僅出現在桌面上。 如果您想在行動裝置上啟用它，只需切換「在行動裝置上啟用」選項即可。

順便說一句，只有 Otter Pro 用戶可以存取行動選項。

可選步驟：嘗試浮動模式🏄

當使用者捲動頁面時，黏性塊可以設定為沿著螢幕浮動。 這是吸引用戶注意力並將其指向黏性塊的好方法。

只有 Otter Pro 使用者可以使用浮動模式，並且它只能應用於頂級區塊，在我們的例子中是群組塊。

一旦您切換浮動模式，系統就會要求您定義區塊的width 、 side和side offset 。

當然，寬度是指塊的寬度，而側面可以幫助您定義塊在螢幕上的位置（左側或右側）。 偏移量是指黏性塊與所選邊之間的距離。

我們建議您在配置浮動模式後預覽頁面並進行必要的調整。

可選步驟：指定阻止行為👨🏽‍💼

使用 Otter Block 插件，您可以在同一頁面上建立多個黏性區塊。 有時這些區塊可能會相互碰撞。 您可以使用「行為」選項來指定黏性區塊在碰撞期間將如何回應。

您可以將行為設定為折疊、淡入淡出或堆疊。

選擇折疊將使黏性塊設定為具有相同的運動，以便在碰撞時將一個塊折疊成另一個，如下所示：

選擇淡入淡出會將區塊設為淡出或消失到另一個區塊中。

最後，選​​擇「堆疊」會將區塊堆疊在它碰撞到的其他黏性區塊的頂部，如下面的 gif 所示。

淡入淡出和堆疊僅適用於 Otter Pro 使用者。

就是這樣。 您現在已經在古騰堡中添加了一個黏性塊。 🤩

在古騰堡創建您的第一個黏性塊🧱

在古騰堡中添加固定或黏性塊是吸引訪客注意 WordPress 網站重要部分的好方法。

由於古騰堡不提供預設的黏性區塊，因此您需要使用第三方外掛程式將此功能新增至您的網站。

雖然有一些黏性塊插件，但 Otter Blocks 是最簡單、最用戶友好的塊插件。

它有免費版和高級版。 免費版本可用於建立黏性區塊，但一些進階設定（例如將區塊固定在螢幕底部或在行動裝置上啟用區塊）可以使用該插件的高級版本來實現。

👉 要使用 Otter Blocks 外掛程式在您的頁面上建立並運行黏性區塊，您需要按照以下步驟操作：

如果您對如何在古騰堡中創建黏性塊有任何疑問，請在下面的評論部分告訴我們。