如何在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插件的更多信息，请在此处查看。