Long posts,当访客可以看到前面的整个形状,直直跳到他们想要的部分时,就更容易阅读了,免费 目录小部件 在 Elementor 的主插件 读取页面上的标题并将其转换为链接索引。无需构建手动列表,也无需稍后保持同步。
Widget掉进去,挑选要包含哪些标题级别,然后它就会填满自己,从那里你可以让它可折叠,添加一个从滚动到顶部的按钮,并风格化整个东西,这个指南涵盖了widget中的每个设置。
目录小部件的作用 #
Widget扫描页面标题,并从中构建一个链接的嵌套列表,每个项目都指向它的标题,所以点击一下跳到那个部分,稍后添加一个标题,列表自行拾取,这是最节省时间的部分。
两个选项卡运行它。 内容 持有标题、标题级别、可折叠选项和滚动行为。 风格 控容器填充、标题、分隔符和列表项,通常的 Elementor 高级选项与它们并排。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 具有真实标题(H2、H3 等)的页面或帖子供小部件阅读。
如何添加目录小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 目录的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖动到内容的顶部,或拖入侧边栏,它会立即从页面的标题中填满自己。
设置标题以及要包含哪些标题 #
打开 内容 选项卡和 目录 section。this是你命名框, 选择列表样式, 并选择显示哪些标题级别。
- 输入标题文本: 列表上方的标题,例如目录或 TOC。
- 列表样式: 默认(无标记)、子弹或数字。
- 包括/排除: "包含"选项卡保存标题标签, 排除选项卡解释如何将单个标题留出。
- 标题标签: pick 级别来拉入,比如 H2 和 H3。添加或删除标签来控制列表的深度。
想跳过一个标题吗?添加 jltma-toc-hide-heading class 到那个标题的高级选项卡,在 CSS Classes 字段中,小部件将其排除在外。当一个部分标题只会使列表混乱时,请方便。
使列表可折叠 #
的 可折叠 options 让访客将列表向下折叠到只剩下标题,这在移动设备上很有帮助,或者在空间狭小的侧边栏中。
- 使内容可折叠: 添加一个切换,以便列表打开和关闭。
- 保持最初崩溃: 加载它已关闭,因此它只显示标题,直到单击为止。
- 图标尺寸和颜色: 崩溃切换的外观。
设置滚动行为 #
打开 滚动 section 供当有人使用索引时页面如何移动, 您可以添加一个从后到上的按钮, 然后打开平滑滚动。
- 滚动到顶部: zai右下角加上一个固定的箭头,一旦有访客向下滚动,dai回目录就会出现。
- 滚动到顶部偏移量: 用于将读者发送到而不是目录的滚动位置。
- 滚动动画延迟和平滑滚动: 延迟设置滚动需要多长时间(默认情况下为 500 毫秒)。打开平滑滚动会添加平滑滚动偏移 (px),该偏移会在标题附近停止,因此固定标头不会覆盖它。
样式容器和标题 #
打开 风格 选项卡。 集装箱 部分将填充物设置在整个盒子周围,并且 标题 部分将标题设置在列表上方。
- 集装箱: 框的填充。从"高级"选项卡添加背景、边框或半径。
- 标题: 标题的对齐方式、颜色、排版和底部间距。
- 分离器: style,颜色,厚度,标题下线的底部间距,滚动到顶部的箭头在滚动部分进行styled。
样式列表项 #
的 内容 style 选项卡中的部分自行处理链接, 您可以获得排版、项目之间的间距以及正常状态、悬停状态和活动状态的单独颜色。
- 版式和间距: 字体和行之间的间隙。
- 正常/悬停/活动: 每个状态的颜色。 Active 适用于读者上次点击的项目。
- 文本颜色: 您选择的状态的链接颜色。
常见用例 #
- 长篇教程和指南 为读者提供地图和快速跳跃。
- 文档页面 每个标题都是人们搜索的部分。
- 侧边栏 文章旁边有一个可折叠索引。
- 综述和列表 因此,访客可以跳到他们想要的条目。
- 法律和政策页面 这需要每个条款都有明确的锚点。
使用目录小部件的技巧 #
- 使用干净的标题结构。 H2s和H3s一样好,所以写出自己读得很好的标题。
- 仅包括两个级别。 H2和H3通常会做出整齐的指数,拉入H4及以后,它开始变得嘈杂。
- 在移动设备上将其折叠。 Keep Collapsed 最初可以节省大量在小屏幕上的滚动。
- 打开平滑滚动。 滑到该部分的读数比硬跳更好,并且偏移量使标题远离粘性标题。
- 跳过杂散标题。 在列表中不想要的标题(例如 CTA 或侧边栏标题)上使用 jltma-toc-hide-heading 类。
常见问题 #
Master Addons 中的目录小部件是什么?
Elementor小部件免费读取页面上的标题,并自动从中构建链接索引,每个项目在点击时跳转到其部分,您控制出现哪些标题级别,列表是否崩溃,以及它的外观,所有这些都来自Elementor面板。
小部件如何知道要列出哪些标题?
Content 选项卡中挑选标题标签,如 H2 和 H3,小部件列出了页面上的每个匹配标题,要跳过整个级别,请将该标签留出。要丢弃一个特定标题,请在高级选项卡中向其添加 jltma-toc-hide-heading 类。
我可以使目录可折叠吗?
是的。可折叠选项添加了一个切换,以便访问者可以将列表折叠到标题即可。打开"保持折叠"初始以将其加载为关闭状态,这在侧边栏或移动设备上运行良好,您需要节省垂直空间。
当我添加新标题时它会更新吗?
Yes。list 是从页面的标题生成的,所以当你添加、删除或重命名一个标题时,目录反映了更改。没有手动列表可以保持同步,这是使用小部件而不是手工构建的小部件的主要原因。
我可以添加平滑的滚动和从后到上的按钮吗?
是的。单击项目滚动到其部分,滚动动画延迟设置需要多长时间。平滑滚动为固定标头添加偏移量。滚动到顶部在右下角添加一个箭头,其中包含自己的偏移量、大小和颜色。
包裹起来 #
的《目录》小部件将您的标题变成一个链接索引,无需任何手动维护:将其放入,选择标题级别,使其可折叠,设置滚动行为,然后将其样式设置为匹配。有关概述以及与 Elementor Pro 的比较,请参阅 Elementor 目录小部件 page。的相关小部件,请参见 时间线 並 导航菜单,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
