如何使用 Divi 佈局塊為博客文章構建可點擊的目錄

在博客文章中添加可點擊的目錄是改善用戶體驗的好方法。 在許多情況下，博客文章目錄使用錨鏈接來幫助用戶瀏覽內容。 而且，使用基本 HTML 構建目錄（帶有錨鏈接）非常簡單。 但是，添加自定義設計/CSS 來自定義它可能是一個挑戰。 這是 Divi Layout Block 派上用場的地方。

在本教程中，我們將為單個博客文章（在 Gutenburg 中）設計一個可點擊的目錄，該目錄使用錨鏈接將用戶帶到整個文章的指定標題。 為此，我們將使用 Divi Layout 塊來創建目錄，並使用我們可以使用的 Divi builder 的所有強大設計工具。

讓我們開始吧！

搶先看

免費下載可重複使用的目錄佈局塊

要了解本教程中的目錄佈局塊，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

如何使用下載在您的站點上導入此佈局塊

要將這些可重用的 Divi Image Layout Block 導入您的站點，首先，您需要解壓縮下載文件。 在那裡，您將找到需要導入站點的三個 JSON 文件。

使用默認編輯器 (Gutenberg) 編輯帖子。 打開頁面右上角的“更多工具和選項”菜單，選擇“管理所有可重用塊”。

然後單擊從 JSON 按鈕導入。 從下載文件夾中選擇 JSON 文件之一，然後單擊導入按鈕。

完成後，在 Gutenberg 中添加一個新塊。 我們將能夠在 Reusable 選項切換下找到導入的 Reusable 佈局塊。 只需單擊名為“目錄”的內容即可將其添加到您的帖子中。

就是這樣！

讓我們進入教程，好嗎？

我們需要開始做什麼

首先，我們需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在 WordPress 中創建一個新帖子並使用默認編輯器（Gutenberg）添加一些模擬內容（標題、標題、段落、特色圖片等）。 確保創建至少三個標題塊，每個標題塊下都有內容。 由於我們將向目錄添加錨鏈接，因此我們需要三個標題來鏈接到帖子的下方。

之後，我們就可以開始了。

使用 Divi 佈局塊為博客文章創建可點擊的目錄

添加 Divi 佈局塊

首先，在博客文章內容的頂部添加一個新的 Divi 佈局塊。

然後單擊“構建新佈局”按鈕。 這將部署佈局編輯器，它是佈局塊的 Divi 構建器。

添加行

在佈局編輯器中，通過添加一列行開始設計。

添加頂部分隔線

在列內，添加一個分隔模塊。 這將是我們用來構建目錄的兩個分隔符之一。

分隔線設置

接下來更新分隔線設置，如下所示：

• 線條顏色：#eeeeee
• 線位置：垂直居中
• 分隔線重量：3px
• 寬度：25%
• 填充：頂部 30 像素，底部 30 像素

添加底部分隔線

要創建第二個分隔線，請複制前一個分隔線。

使用 Blurb 模塊創建目錄標題

一旦分隔線就位，讓我們為目錄創建標題。

在兩個分隔線之間添加一個新的模糊模塊。

模糊內容

打開blurb設置並更新內容如下：

• 書名：《目錄》
• 使用圖標：是
• 圖標：見截圖

模糊設計設置

在設計選項卡下，更新以下內容：

• 圖標顏色：#eeeeee
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：100px
• 標題標題級別：H2
• 內容寬度：100%
• 高度：38px

請注意，模糊的高度小於圖標的高度。 這允許圖標向下延伸到我們接下來要添加的模糊項目旁邊。

一旦標題模糊就位，我們就可以開始添加構成我們目錄的可點擊項目/模糊。 為此，我們還將使用模糊模塊。

添加項目 #1 Blurb

在標題 blurb 下添加一個新的 blurb 模塊。

模糊內容

打開模糊設置並取出默認正文內容，以便只有標題可見。 標題是您將添加與我們要鏈接到帖子更下方的部分/標題相對應的文本塊的位置。

然後使用桌面上的右箭頭圖標更新內容。

為圖標部署懸停選項，並在懸停時將圖標更改為向下箭頭。 這將是一個很好的微交互，強調鏈接將滾動到帖子下方的某個位置。

模糊設計

現在我們可以隨心所欲地設計 blurb 模塊。 對於此示例，讓我們按如下方式更新模糊設置：

• 圖標顏色：#b856c7
• 圓圈圖標：是
• 圓圈顏色：#ffffff
• 顯示圓形邊框：是
• 圓形邊框顏色：#b856c7
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：16px
• 文字文字大小：16px
• 標題行高度：2em
• 內容寬度：100%
• 邊距：118px 左
• 填充：10px 頂部
• 填充（懸停）：左 10 像素

為更多項目複製模糊

現在我們的第一個簡介項目已經完成，我們可以根據需要將其複制多次，具體取決於我們想要包含在帖子中的可點擊鏈接的數量。 現在，讓我們將它複製兩次，為我們的目錄創建總共三個項目。

添加錨鏈接 URL

現在我們的簡介項目不可點擊，因此我們需要為每個項目添加必要的錨鏈接 URL。 錨鏈接 URL 始終以主題標籤 (#) 開頭，後跟您想要包含的任何 ID。

錨鏈接#one

為簡單起見，我們將錨鏈接“#one”添加到列表中的第一個簡介。 為此，請打開列表中第一個模糊模塊的設置（不是標題模糊）並更新以下內容：

• 模塊鏈接網址：#one

錨鏈接#two

然後打開第二個blurb項的設置並添加以下鏈接：

• 模塊鏈接網址：#two

錨鏈接#3

最後，將以下鏈接添加到第三個簡介項：

• 模塊鏈接網址：#three

收緊間距

行設置

現在，我們行的元素之間的空間有點太大了。 要解決此問題，請打開行設置並更新裝訂線寬度和填充，如下所示：

• 天溝寬度：1
• 寬度：100%
• 填充：0px 頂部，0px 底部

部分設置

讓我們也去掉部分的填充。 打開部分設置並更新以下內容：

• 填充：0px 頂部，0px 底部

保存佈局

我們已經完成了我們的目錄設計。 確保保存並退出佈局編輯器。

現在您應該在默認塊編輯器中看到您的新目錄。

將 HTML 錨點添加到帖子標題

我們已將錨鏈接 URL 添加到構成目錄項的每個簡介中。 現在我們需要將相應的 CSS ID（或 HTML 錨點）添加到帖子下方的標題塊中。

HTML 錨點一

單擊包含要鏈接/跳轉到的第一個標題的塊。 然後打開該塊的設置。 在高級選項切換下，將“一個”添加到 HTML 錨點輸入框：

HTML 錨點：一

請記住，我們的第一個簡介項目具有 URL“#one”，它將鏈接到這個項目。 但不要將主題標籤添加到此 HTML 錨點。 不需要。）

HTML 錨點二

接下來，選擇第二個標題塊並更新以下內容：

• HTML 錨點：兩個

HTML 錨點三

最後，選​​擇第三個標題塊並添加 HTML 錨點，如下所示：

• HTML 錨點：三個

最後結果

讓我們在實時帖子中查看最終結果。

這是錨鏈接的運作方式。 注意圖標上的懸停效果以及鏈接如何平滑滾動到頁面下方的相應錨點。

添加目錄作為可重用的佈局塊

如果您想繼續使用此佈局塊作為未來帖子的模板，最好將佈局塊保存為可重用的佈局塊。 這將允許您從內置的塊列表中輕鬆添加“目錄”塊。

為此，請單擊包含目錄的 Divi 佈局塊並打開更多設置菜單。 然後選擇“添加到可重用佈局塊”。

輸入可重用塊的名稱（“目錄”），然後單擊保存。

現在，在向帖子添加新塊時，可在“可重用塊”列表下使用該塊。

現在，佈局塊可用作為您的帖子構建目錄的便捷模板。 在為特定帖子自定義之前，不要忘記將塊轉換為常規佈局塊。 您不想更改可重用佈局塊。

為此，請打開可重用佈局塊的更多設置菜單，然後選擇“轉換為常規塊”。

最後的想法

我希望這個目錄 Divi 佈局塊被證明對那些足夠長的帖子有幫助。 如果您有興趣動態地為您完成這項工作（例如根據帖子的標題自動為您構建目錄），那麼有一些插件（例如目錄 Plus）可以為您執行此類操作。 這篇文章適合那些喜歡使用 Divi 進行設計並且不介意逐篇構建目錄的人。

我期待在評論中收到您的來信。

乾杯!