魏艾斯笔记Elementor目录（table of contents）是一个常用于文章中的元素，目的是帮助访客理清文章架构，快速定位到自己想看的内容。同时搜索引擎SEO优化也有好处，让蜘蛛抓取的数据更有条理。
学习、小网站选择 1核2g配置的服务器起步，国外主题建站选择 2核4g配置，适当搭配运行流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱） 不知道如何选择地域、配置请在页面右侧+老魏的联系研究。
外贸、B2C/C2C等网站在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
在很多主题中没有这个目录元素，只能依靠第三方目录插件来实现同样的功能。比如Table of Contents Plus、LuckyWP Table of Contents、Easy Table of Contents。
1、Elementor目录（table of contents）添加
目录（table of contents）元素是 Elementor 高级插件功能，需要额外购买 Elementor Pro插件。
安装好 Elementor 和 Elementor Pro插件后，随便打开一篇文章/页面，使用 Elementor编辑，在左侧元素栏找到 专业版 > table of contents 并拖拽到右侧编辑区域即可。
然后用 Elementor 标题元素和文本编辑器元素在内容区域添加几个标题和内容。
2、Elementor目录（table of contents）设置使用
table of contents会自动识别内容中的标题并自动添加序号，生成目录。
点击添加好的目录，左侧栏中出现内容、样式、高级设置这几个常用选项卡。
内容：
- title：目录名
- html tag： 可选 H2 H3 H4 H5 H6 DIV等几个选项
- include：锚点包括 H2 H3 H4 H5 H6
- Exclude：锚点不要包含
- Container：控件将目录限制为特定容器下的标题元素
- Marker view：可选 numbers 或 Bullets
- 其他选项：自动换行、最小化框、图标、最小化图标、最小化手机或平板、分层视图、折叠子项
样式：
- Box：目录边框的背景色、边框色、边框宽度、圆角、内距、高度、阴影
- header：目录小边框的背景色、文字颜色、字体、图标颜色、分隔线宽度
- list：标题小边框，正常、悬停、点击时的文字颜色、下划线、序号颜色、尺寸
高级设置：
外距、内距、动作效果、边框等，这里基本上不用改动什么，有兴趣折腾的同学可以试试。
3、table of contents 放在侧边栏
如上图所示下滑后看不到目录，如果设置固定目录会出现要么与菜单混淆，要么与内容混淆。所以我们还可以把目录放到侧边栏上， 这样就可以跟随内容一直显示了，方便用户快速定位内容。
这种时候一般都是设置全局目录放侧边栏，需要使用 Elementor theme builder（主题生成器），添加一个新的文章模板或页面模板，模板选择 Elementor预制的左侧边栏或右侧边栏，再拖拽一个 table of contents 元素到侧边栏即可。
如果只限于某一个文章/页面有效，拖拽 常规>侧边栏到编辑区域即可。
为了让目录框能跟随内容上下滚动，需要点击目录边框，在左侧栏的高级设置>动作效果，sticky选择 top，offset 设置合适的数字能避免目录与菜单栏重叠。
如下图所示，目录跟随内容上下滚动，而且目录与菜单有一定距离，不会重叠。
4、总结
Elementor目录（table of contents） 元素用于文章/页面内容的条理化、规范化，且有利于SEO优化。如果你的内容需要这么一个目录，可以全局也可限于某个页面，自由设置，简单又十分好用。