如何在 Elementor 中添加目录
Elementor和Master插件你需要,Elementor Pro不是必需的,页面还需要真正的标题标签(H2,H3等等),因为列表是由它们构建的。
- 安装并激活 WordPress.org 的主插件式(Master Addons)仪表板中,并检查目录是否已启用。
- 使用 Elementor 打开您的帖子或页面并搜索小部件面板 目录.
- 将其拖到列表应位于的位置,通常位于第一部分上方或侧栏列中。
- 在 内容、设置标题、选择列表样式并选择要包含的标题标签。
- 打开 可折叠 並 滚动 添加切换和返回顶部箭头。
- Style 选项卡中的标题、分隔符和链接进行样式化,然后预览页面并单击几个项目来测试跳转。
每个设置都包含在 目录小部件设置 指南。
目录一览
小部件的作用,请从主插件 3.2。3 读取。
| 物品 | 目录小部件 |
|---|---|
| 它在哪里找到标题 | 首先是。entry-content 内部,然后是。page-content,然后是 Elementor 内容区域 |
| 标题级别 | H1到H6中的任何一个,默认选择H2,H3和H4 |
| 留下一个标题 | 将 CSS 类 jltma-toc-hide-heading 添加到该标题中 |
| 列表样式 | 默认(无标记)、子弹或数字 |
| 筑巢 | 始终按标题级别嵌套 |
| 可折叠盒 | 切换标题旁边,Keep 最初崩溃 |
| 滚动 | 平滑滚动,在标题上方约 30 px 处停止 |
| 回到顶部 | 250 px 滚动后右下角的箭头 |
| 活动项目 | 读者上次点击的项目(无滚动间谍) |
| 粘的 | 没有开关;位置:通过自定义 CSS 或 Elementor Pro Motion Effects 粘性 |
| 需求 | Elementor 和主插件,无 Elementor Pro |
从您的标题构建列表
选择级别 标题标签。H2、H3和H4默认选择,H1到H6中的任何一个都可以添加,当页面加载时,小部件找到那些标题,如果没有,则给每个标题一个ID,并按标题级别嵌套列表,重命名或添加标题,列表在下一个加载时将其拾取,因此没有锚链接可以用手跟上。
- 列表样式: 默认(无标记)、子弹或数字。
- 跳过一个标题: 添加 CSS 类
jltma-toc-hide-heading在该标题的"高级"选项卡中。 - 显示分离器: 标题下的一条可选行,有自己的样式、颜色、厚度和间距。
- 标题 ID 是根据标题文本制作的,因此您还可以直接链接到其他地方的部分。
侧边栏和移动设备的可折叠盒
打开 使内容可折叠 标题旁边出现一个切换图标,读者点击它打开或关闭列表,它会滑动而不是跳转。打开 保持最初崩溃 如果您希望加载仅显示其标题的框,这有助于在长合法页面和狭窄的侧边栏列中。
- 用于切换的图标大小和图标颜色控件。
- 分隔符与列表一起折叠。
- Widget没有自己的粘性开关,要在人们阅读时保持框在视野中,请参阅下面的使目录粘性。
平滑跳跃和返回顶部箭头
单击某个项目可将页面平滑地向下滚动到其标题,并在其上方约 30 px 处停止,因此该标题不会与屏幕顶部齐平。如果您的网站有一个高大的固定标头,下面的常见问题解答有一个两行 CSS 修复,可以使标头远离它。
- 滚动到顶部 在右下角添加一个小箭头,显示访客向下滚动后。
- 该箭头将读者带回目录,或您在滚动到顶部偏移中设置的位置。
- 箭头的尺寸、图标颜色和背景颜色控件。
- 读者单击的项目保留了内容样式部分中的活动颜色,以便他们可以看到自己跳到哪里。
使目录粘稠
Widget没有自己的粘性开关,你通过将widget粘性放在侧边栏列内来固定它,而没有Pro的Elementor可以通过主插件来做到这一点 自定义 CSS 扩展.
- 将文章和目录放在一行中:内容为宽列,目录小部件为窄列,将窄列保留在其默认高度,使其拉伸到行的高度。
- 选择目录小部件,打开 高级然后是主插件 自定义CSS 切片,并粘贴
selector { position: sticky; top: 32px; } - 如果您的网站有固定标头,例如 80px 标头下的 110px,则提高顶部值。
- 预览页面并滚动。该框一直保持在视野中直到行结束。
使用 Elementor Pro,您可以使用 高级、运动效果、粘性:顶部 相反,保持在列中打开。
2件事停止粘性工作:一个溢出设置为隐藏的父容器,以及一个不比盒子高的侧边栏列,在手机上侧边栏会掉到文章下方,所以打开使内容可折叠在那里,或者将此副本隐藏在移动设备上,并在文章上方放置一个折叠的内容表。
的 粘性侧边栏演示 page 的中间位置。当文章滚动时,框会停留在列的顶部。
小部件的主插件自定义 CSS 部分中的粘性规则。
Elementor Pro 目录与主插件目录
Elementor的目录小部件需要一个Elementor Pro许可证,它可以让你在滚动时更好地控制哪些标题出现以及列表的行为。Master Addons可以处理没有Pro的日常工作,并添加一个返回到顶部箭头。
| 特点 | 元素专业版 | 主插件 |
|---|---|---|
| 价格 | 需要 Elementor Pro | 包含在主插件中,没有 Elementor Pro |
| 哪些标题 | 按标签锚(H1 至 H6)加上容器选择器以限制搜索区域 | 主帖子或页面内容的标题标签(H1 至 H6) |
| 将标题留出 | 按选择器锚定,任何 CSS 选择器 | 每个标题上的 CSS 类 jltma-toc-hide-heading |
| 标记 | 数字或带有您选择的图标的子弹 | 默认值、子弹或数字 |
| 筑巢 | 分层视图切换和折叠子项 | 始终按标题级别嵌套 |
| 崩溃 | 使用展开和折叠图标最小化 Box,以及开始最小化的断点 | 使内容可折叠并保持初始折叠 |
| 活动项目 | 当读者滚动时,请按照视图中的部分进行操作 | 标记读者点击的项目 |
| 滚动设置 | 小部件中没有速度或偏移控制 | 平滑滚动,在标题上方约 30 px 处停止 |
| 粘的 | 小部件中没有设置;在小部件或其列上使用"运动效果粘性" | 小部件中没有设置;添加位置:使用自定义 CSS 粘性,或使用 Motion Effects Sticky 与 Pro |
| 返回顶部箭头 | 没有 | 使用尺寸和颜色控件滚动到顶部 |
Elementor Pro 已经付费,并且希望列表在阅读器滚动时跟踪,请使用其小部件,如果您想要一个没有 Elementor Pro 的目录,带有可折叠框和返回顶部箭头,请使用此目录。
与以下配对: 阅读进度吧 为人们阅读时填充的酒吧, 高级手风琴 並 选项卡 要折叠长段, 画布外内容 (Pro) 用于滑出菜单,以及 博客 对于帖子,列出了那些长文章。
目录插件还是元素小部件?
WordPress 有两种目录:适用于帖子内容的插件和您放置在 Elementor 编辑器中的小部件,正确的取决于页面的构建方式。
| 选项 | 在哪里工作 | 最好的 |
|---|---|---|
| 主插件目录 | Elementor 中的任何位置,包括模板 | 元素站点希望盒子采用设计风格,并使用从后到上的箭头 |
| Elementor Pro 目录 | Elementor 中的任何位置,具有 Elementor Pro 许可证 | Pro 上已经有网站希望活动项目跟随滚动 |
| 简单的目录,LuckyWP | 发布内容,自动插入或使用短代码 | 在块编辑器或经典编辑器中编写的博客 |
| 排名数学目录块 | 使用 Rank Math 的网站上发布块编辑器帖子 | 古腾堡帖子只需要一个简单的列表 |
我们的 wordpress 最佳目录插件的综述 比较其中八个,包括安装计数、短代码和粘性选项。
目录常见问题
这张目录需要 Elementor Pro 吗?
号目录小部件是主插件的一部分,运行在没有Pro的Elementor上,这个页面上的每个设置都包含在内,Elementor自己的目录小部件就是需要Elementor Pro的。
如何从目录中排除标题?
要删除整个级别,请从标题标签(例如 H4)中删除该标签。要隐藏一个标题,请在 Elementor 中选择它,打开"高级"选项卡并添加 jltma-toc-hide-heading 到CSS类字段。它留在页面上,但被排除在列表之外。
活动项目是否会随着读者的滚动而变化?
号"样式中的活动颜色,内容为读者点击的项目进行样式设计,当他们点击另一个项目时,它会移动"列表在滚动时不会跟踪屏幕上的部分Elementor Pro的目录小部件这样做。
我可以让目录粘起来吗?
是的,虽然不是从小部件中的开关中。将其放入侧边栏列中,然后添加 selector { position: sticky; top: 32px; } 在高级,自定义 CSS。Elementor Pro 中,您可以使用运动效果,而使用粘性。如果固定标头位于顶部值之上,则提高顶部值。
当页面加载时,如何保持目录扩展或崩溃?
开使内容可折叠,在保持折叠初始关闭的情况下,盒子加载打开,读者可以折叠,打开后,盒子加载仅显示其标题,没有每台设备的设置,因此对于手机上的封闭盒子和桌面上的开放盒子,使用两份副本,并将每份副本隐藏在高级、响应式中。
"滚动到顶部"箭头会出现在每个页面上吗?
仅在包含打开滚动到顶部的小部件的页面上。箭头位于右下角,显示访问者向下滚动约 250px 页面后。
我可以使用列表标记的自定义图标吗?
Not from widget面板。List样式提供默认,子弹和数字,内容样式部分设置字体和颜色。自定义标记图标将需要您自己的CSS。Elementor Pro的小部件有一个用于子弹的图标选择器。
为什么我的目录是空的或列出了错误的标题?
Widget 先查找。entry-content 内部的标题,然后查找。page-content,然后查找 Elementor 内容区域,并且仅查找标题标签中选择的标签。一个空框显示 “添加一个标题以开始生成目录”,通常意味着标题使用的是您未选择或位于该区域之外的标签。如果缓存插件将 JavaScript 延迟到第一个滚动或单击,则列表在此之前保持为空,因此请将 Master Addons 脚本从延迟中排除。
固定标头覆盖跳转后的标头,如何修复?
30 px左右跳停在标题上方, 这在一个高大的固定头下是不够的, 添加这个在外观, 自定义, 附加CSS: .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } 然后每个标题降落 90 px,页面上看起来相同。使用您的标题高度加上一点空间。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
