目录

当访客可以看到前面的整个形状并直接跳到他们想要的部分时,长帖子更容易阅读。 目录 小部件在 Elementor 的主插件 读取页面上的标题并将其转换为链接索引。无需构建手动列表,也无需稍后保持同步。

Widget掉进去,挑选要包含哪些标题级别,然后它就会填满自己,从那里你可以让它可折叠,添加一个从滚动到顶部的按钮,并风格化整个东西,这个指南涵盖了widget中的每个设置。

目录小部件的作用 #

Widget扫描页面标题,并从中构建一个链接的嵌套列表,每个项目都指向它的标题,所以点击一下跳到那个部分,稍后添加一个标题,列表自行拾取,这是最节省时间的部分。

两个选项卡运行它。 内容 持有标题、标题级别、可折叠选项和滚动行为。 风格 控制容器、标题、列表项和索引标记。通常的 Elementor Advanced 选项位于它们旁边。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 具有真实标题(H2、H3 等)的页面或帖子供小部件阅读。

如何添加目录小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 目录的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖动到内容的顶部,或拖入侧边栏,它会立即从页面的标题中填满自己。

设置标题以及要包含哪些标题 #

打开 内容 选项卡和 目录 section。this是你命名框, 选择列表样式, 并选择显示哪些标题级别。

• 输入标题文本: 列表上方的标题,例如目录或 TOC。
• 列表样式: 没有、子弹或物品的编号。
• 包括/排除: 在要显示的列表标题标签或要跳过的列表标题标签之间切换。
• 标题标签: pick 级别来拉入,比如 H2 和 H3。添加或删除标签来控制列表的深度。

想跳过一个标题吗?添加 ignore-this-tag class 到那个标题的高级选项卡,在 CSS Classes 字段中,小部件将其排除在外。当一个部分标题只会使列表混乱时,请方便。

使列表可折叠 #

的 可折叠 options 让访客将列表向下折叠到只剩下标题,这在移动设备上很有帮助,或者在空间狭小的侧边栏中。

• 使内容可折叠: 添加一个切换,以便列表打开和关闭。
• 保持最初崩溃: 加载它已关闭,因此它只显示标题,直到单击为止。
• 图标尺寸和颜色: 崩溃切换的外观。

设置滚动行为 #

打开 滚动 section 供当有人使用索引时页面如何移动, 您可以添加一个从后到上的按钮, 然后打开平滑滚动。

• 滚动到顶部: 在页面底部添加一个跳转回来的箭头。
• 滚动到顶部偏移量: 箭头出现在页面下方多远处。
• 平滑滚动和延迟: 滑到目标而不是跳跃,并设置速度。

样式容器和标题 #

打开 风格 选项卡。 集装箱 部分设置整个盒子周围的填充物、背景和边框 标题 部分将标题设置在列表上方。

• 集装箱: 盒子的填充物、背景、边框和半径。
• 标题: 标题的颜色、排版和间距。
• 索引和按钮: 每个项目前面的标记和从滚动到顶部按钮。

样式列表项 #

的 内容 style 选项卡中的部分自行处理链接, 您可以获得排版、项目之间的间距以及正常状态、悬停状态和活动状态的单独颜色。

• 版式和间距: 字体和行之间的间隙。
• 正常/悬停/活动: 每个状态的颜色,因此当前部分可以突出显示。
• 文本颜色: 您选择的状态的链接颜色。

常见用例 #

• 长篇教程和指南 为读者提供地图和快速跳跃。
• 文档页面 每个标题都是人们搜索的部分。
• 侧边栏 文章后面有一个可折叠索引。
• 综述和列表 因此,访客可以跳到他们想要的条目。
• 法律和政策页面 这需要每个条款都有明确的锚点。

使用目录小部件的技巧 #

• 使用干净的标题结构。 H2s和H3s一样好,所以写出自己读得很好的标题。
• 仅包括两个级别。 H2和H3通常会做出整齐的指数,拉入H4及以后,它开始变得嘈杂。
• 在移动设备上将其折叠。 Keep Collapsed 最初可以节省大量在小屏幕上的滚动。
• 打开平滑滚动。 滑到该部分的读数比硬跳更好,并且偏移量使标题远离粘性标题。
• 跳过杂散标题。 在列表中不想要的标题上使用"忽略此标签"类,例如 CTA 或侧边栏标题。

常见问题 #

包裹起来 #

的《目录》小部件将您的标题变成一个链接索引,无需任何手动维护:将其放入,选择标题级别,使其可折叠,设置滚动行为,然后将其样式设置为匹配相关小部件,请参阅 时间轴小部件 和 导航菜单小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。