如何在Elementor中的博客文章中添加目錄

創建長形式的博客內容非常適合SEO，但它也可以使您的帖子感覺……好，很長。滾動瀏覽大量文章而不知道您的位置或剩下多少讀者會讓讀者感到沮喪。那就是目錄（TOC）派上用場的地方。

目錄（TOC）的表現就像地圖一樣，幫助讀者快速找到所需的東西，跳到部分，並更好地了解您的內容結構。另外，它可以通過在搜索結果中啟用豐富的摘要來提高您的SEO。

如果您使用Elementor來設計您的網站和博客文章，則添加一張目錄非常簡單，尤其是當您使用PowerPack插件插件時。

在本指南中，我們將向您展示如何在Elementor中的博客文章中添加目錄，而無需添加任何HTML代碼或CSS。

為什麼要添加目錄

在跳入操作方法之前，讓我們快速談論為什麼A TOC是您博客文章的明智之處。

• 改善用戶體驗：讀者可以立即跳到感興趣的部分。
• Boosts SEO：搜索引擎通常將TOC鏈接顯示為Sitelinks，這可以提高點擊率。
• 鼓勵更長的參與度：通過使用戶控制導航，您可以將它們放在頁面上更長的時間。
• 降低跳出率：當訪問者可以輕鬆地瀏覽它時，訪問者不會感到不知所措。

現在，讓我們了解如何在Elementor中添加完整功能和時尚的TOC。

如何在Elementor中的博客文章中添加目錄

步驟1：安裝Elementor的PowerPack插件

在我們繼續之前，請確保您已在網站上為Elementor安裝並激活了PowerPack插件。要了解更多信息，請查看我們如何安裝和激活PowerPack addons Pro的指南。

步驟2：啟用目錄窗口表

插件處於活動狀態後，最好確保實際啟用TOC小部件。

為此，請訪問elementor >> powerpack >> WordPress儀表板中的元素。從那裡查找“目錄”小部件，並確保其旁邊的切換被打開（藍色）。

現在，您可以在Elementor中使用它。

步驟3：在Elementor中創建一個郵政模板

要在所有博客文章中始終如一地應用目錄，最好將其添加到單個帖子模板中。

以下是：

• 轉到模板>>添加新的。
• 從下拉菜單中，選擇單個帖子。
• 給模板一個名稱，例如“博客佈局”或“郵政模板”，然後單擊“創建模板”。

Elementor現在將詢問您是否想從空白畫布開始或使用預構建的佈局。

步驟4：使用預設計的後模板（可選）

如果您不想從頭開始構建佈局，則Elementor可以輕鬆插入現成的模板。選擇預設的選項之一；它通常包含基本元素，例如帖子標題，特色圖像，作者框和帖子內容。

您始終可以在以後修改這些修改，以更好地適合您的博客設計。

步驟5：將目錄的窗口小部件添加到模板中

接下來，我們需要添加目錄小部件。

在Elementor面板中，搜索“目錄”。當小部件出現時（查找角落中的PP圖標），將其拖放到您的佈局中。

放置目錄（TOC）的一個共同點位於帖子標題下方或特色圖像下方，但是您可以將其放置在任何對您的內容有意義的地方。

添加小部件後，它將自動從帖子中檢測並顯示所有標題（例如H2S和H3S）。

步驟6：自定義內容設置

在頁面上的小部件中，您將看到帖子內容中所有標題的列表。現在，讓我們個性化目錄。

在“內容”選項卡中，您會找到幾個設置：

您可以將目錄（TOC）的標題更改為“快速導航”或“在此頁面上”之類的東西。如果您正在考慮SEO和可訪問性，還可以根據標題的H2或H3進行調整，並將其設置為H2或H3 ，具體取決於其在層次結構中的擬合方式。

然後，有一些設置需要包括或排除某些標題級別。例如，您只能顯示H2S和H3S以及跳過H4S及以下。您可以選擇列表樣式，使用數字以獲得結構化的，分步的感覺或子彈，以使外觀更少。

步驟7：探索額外功能（可選但有用）

PowerPack目錄Widget包含有助於增強可用性和設計的功能。

您可以使目錄（TOC）折疊術，這非常適合移動用戶，或者當您想保持佈局清潔時。添加一個圖標以進行擴展/折疊，並指定小部件何時應在移動，平板電腦，台式機或所有設備上崩潰。

還有一個分層視圖選項。這顯示了H2S，H3S和H4S之間的關係，通過在其父母標題下縮進子標題。如果您有詳細的帖子，則創建一個目錄（TOC）使其更有條理，更容易掃描。

對於較長的帖子，在滾動上啟用粘性TOC非常有幫助。當用戶滾動時，它可以使TOC可見，以便他們可以隨時在各節之間跳躍。您甚至可以在小部件內的頂部按鈕添加滾動，以幫助用戶快速返回帖子的開頭。

如果您的網站上有粘稠的標頭，請考慮調整滾動式OFFSE t，以便當用戶單擊TOC鏈接時，標題不會隱藏在其後面。

步驟8：樣式的TOC匹配您的網站

現在設置了功能，讓我們確保小部件看起來很棒。在“樣式”選項卡中，您會找到一套全套自定義選項：

• 盒子樣式：您可以調整TOC的背景顏色，邊框類型和邊框半徑，甚至添加盒子陰影以使其脫穎而出。如果您要進行乾淨的佈局，那麼微妙的邊框和輕型背景就可以很好地工作。
• 標題樣式：是否要自定義TOC標題？您可以設置文本對齊，更改填充物以及調整顏色，版式和圖標。您甚至可以添加一個分隔線並自定義其寬度和顏色。
• 列表樣式：這是您自定義實際TOC項目“部分”鏈接的地方。調整填充，更改文本和標題版式，為子頭標記選擇凹痕，並個性化標記樣式（例如子彈顏色和尺寸）。

有了這些樣式選項，您可以使TOC感覺像是您網站的自然擴展，而不是剛剛進入的東西。

步驟9：發布和設置條件

一旦一切看起來都像您想要的方式，請繼續播放。然後，Elementor將詢問您在哪裡顯示此模板。

選擇條件“包括>>所有帖子” ，以便將模板（以及其中的TOC）應用於您網站上的每個博客文章。

單擊保存並關閉E，您就完成了！

PowerPack目錄的關鍵亮點小部件

PowerPack目錄Widget包含有用的功能，這些功能不僅可以增強閱讀體驗，還可以使您完全控制目錄的出現以及網站上的功能。

輕鬆自定義表標題

您可以個性化目錄的標題，以更好地適應您的帖子的語氣或目的。無論您是想將其命名為“快速導航”，“內容”或“跳到部分”，PowerPack TOC窗口小部件只需單擊幾下即可更新它。

包括或排除標題

該小部件的傑出功能之一是在管理標題級別時為您帶來的靈活性。您可以選擇哪些標籤（H1，H2，H3等）出現在TOC中。更好的是，使用內置CSS選擇器功能，您可以專門包括或排除表中的特定部分或標題，從而使您完全控制出現的內容。

選擇您的首選列表樣式

是否想在乾淨，極簡主義的列表中呈現您的內容，或者選擇更結構化的編號格式？您有選擇。該小部件使您可以根據您的設計偏好將列表樣式設置為“無”，“子彈”或“數字”。

長標題？沒問題

如果您的標題往往很長，請不要擔心。您可以啟用“包裝”一詞選項，以確保文本整齊地斷開，並且目錄（TOC）保持清潔和對齊。

基於設備類型折疊TOC

您可以選擇默認情況下折疊目錄，具體取決於設備類型：移動，平板電腦或台式機。這有助於使情況保持在較小的屏幕上。此外，您可以啟用層次視圖，允許清楚並結構嵌套標題（例如H2S下的H3S）。

長篇文章的粘性表

對於長形式的內容，擁有與用戶滾動的目錄（TOC）是一個改變遊戲規則的人。粘性TOC功能允許目錄列表在網站向下滾動頁面時保持可見。這使他們可以輕鬆地在各個部分之間跳躍，而不必滾動回到頂部。

博客文章中使用目錄的最佳實踐

為了充分利用您的TOC，請記住這些技巧：

• 使用適當的標題結構：從H2S開始，用於主要部分，然後根據需要進行H3S和H4S。避免跳過級別，例如從H2到H4，因為這會使讀者和目錄本身（TOC）本身混淆。
• 保持您的標題清晰簡潔：請記住，您的讀者將使用這些標題來瀏覽您的帖子。保持目錄（TOC）的短且可折疊。特別是對於移動用戶，使崩潰可以使您的佈局保持清潔。
• 在所有設備上預覽：確保您的目錄（TOC）出現正確，並在台式機，平板電腦和手機上正常運行。

常見問題

ques。我可以在移動設備上隱藏目錄（TOC）嗎？

Ans。是的，您可以使用“崩潰”設置來使TOC默認情況下在移動或平板電腦上最小化。

ques。當我在帖子中添加新部分時，它會自動更新嗎？

Ans。是的！小部件動態地從您的內容中提取標籤標籤，因此它會自動更新。

ques。我可以在博客文章外使用此小部件嗎？

Ans。絕對地。您可以將其添加到任何Elementor佈局頁面，自定義發布類型甚至產品描述中，只要有標籤要拾取。

總結！

目錄不僅僅是設計功能；這是一種可用性升級，可以改善讀者的體驗，提高SEO並使您的內容更具吸引力。

使用Elementor和PowerPack插件，添加和自定義目錄（TOC）非常容易。您可以完全控制其外觀和行為，而無需編寫一行代碼。

您可以使用Elementor的PowerPack插件來做更多的事情。您可以使用70多個創意小部件來自定義您的Elementor頁面。如果您想了解有關Elementor的PowerPack插件的更多信息，請在此處查看。