{"id":35414,"date":"2020-01-14T08:55:35","date_gmt":"2020-01-14T08:55:35","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=35414"},"modified":"2025-12-04T13:02:28","modified_gmt":"2025-12-04T11:02:28","slug":"table-of-contents","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/table-of-contents\/","title":{"rendered":"How to Add Table of Contents to WordPress Using Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"35414\" class=\"elementor elementor-35414\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-827b8cb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"827b8cb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0474365\" data-id=\"0474365\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-91a67a2 elementor-widget elementor-widget-text-editor\" data-id=\"91a67a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you publish long-form content, adding a table of contents helps both search engines and human visitors navigate and understand your content.<\/p>\n<p>With the Elementor <a href=\"https:\/\/elementor.com\/widgets\/table-of-contents-widget\/\">Table of Contents widget for WordPress<\/a>, you can easily add a table of contents to your site that automatically generates its contents based on the hierarchy of heading tags in your content.<\/p>\n<p>For example:<\/p>\n<ul>\n<li>&lt;h2&gt;\n<ul>\n<li>&lt;h3&gt;<\/li>\n<li>&lt;h3&gt;<\/li>\n<\/ul>\n<\/li>\n<li>&lt;h2&gt;\n<ul>\n<li>&lt;h3&gt;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a608e3 elementor-widget elementor-widget-image\" data-id=\"8a608e3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-table-of-contents-tutorial-1-r4q71v0u25k6mfuic7hpsaeu04yhsapnh9q831yvwg.jpg\" title=\"elementor-table-of-contents-tutorial-1\" alt=\"elementor-table-of-contents-tutorial-1\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f69cf81 elementor-widget elementor-widget-text-editor\" data-id=\"f69cf81\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you use the <a href=\"https:\/\/elementor.com\/blog\/introducing-table-of-contents\/\">Table of Contents<\/a> widget with the Theme Builder in Elementor Pro, you can automatically add a table of contents to all your content without lifting a finger. When a visitor clicks on a link in the table of contents, it acts as an anchor and takes them to that section on the page.<\/p><p>In this post, we&#8217;ll show you exactly how to set up the Table of Contents widget with Elementor Theme Builder.<\/p><p>You can either watch the video above or follow along for the full-text tutorial:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-327c447 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"327c447\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-07a7368\" data-id=\"07a7368\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c6a26fe elementor-widget elementor-widget-heading\" data-id=\"c6a26fe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Add a Table of Contents With Elementor Theme Builder<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53debd4 elementor-widget elementor-widget-text-editor\" data-id=\"53debd4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First off, we should note that you can also use the Table of Contents widget on a piece-by-piece basis. However, in this tutorial, we&#8217;re focused on automatically adding the table of contents to all (<em>or some<\/em>) of your content using Elementor <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/theme-builder\/\"   title=\"Theme Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"1410\">Theme Builder<\/a> and single post templates.<\/p><p>Here&#8217;s how to do it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b25fe44 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b25fe44\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-815b6ec\" data-id=\"815b6ec\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-470bcee elementor-widget elementor-widget-heading\" data-id=\"470bcee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Create or Edit a Single Post Template\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d647242 elementor-widget elementor-widget-text-editor\" data-id=\"d647242\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To get started, use Elementor Theme Builder to either create a new single post <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26160\">template<\/a> or edit one of your existing single post templates where you want to add the table of contents.<\/p><p>You can apply your template to any post type (blog post, page, custom post type), but we&#8217;re going to focus on blog posts here.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-be1d852 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"be1d852\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d364912\" data-id=\"d364912\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e65b511 elementor-widget elementor-widget-heading\" data-id=\"e65b511\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Add Table of Contents Widget\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-067fb86 elementor-widget elementor-widget-text-editor\" data-id=\"067fb86\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once you&#8217;ve opened your single post template, add the <strong>Table of Contents<\/strong> widget where you want your table of contents to appear. It&#8217;s located in the <strong>Single<\/strong> category, along with the widgets for Post Title and Post Content:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51b131b elementor-widget elementor-widget-image\" data-id=\"51b131b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-table-of-contents-tutorial-2-r4q6xrg695y5znsv9xpaetngqn5v7tfskzazqm1p9e.jpg\" title=\"elementor-table-of-contents-tutorial-2\" alt=\"elementor-table-of-contents-tutorial-2\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9887aae elementor-widget elementor-widget-text-editor\" data-id=\"9887aae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once you add the widget, you should automatically see a list of all the headings that are present in the post that you&#8217;re currently previewing.<\/p><p>Now, it&#8217;s time to configure the settings for the Table of Contents widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f64608d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f64608d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5c9f9b9\" data-id=\"5c9f9b9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7dee6da elementor-widget elementor-widget-heading\" data-id=\"7dee6da\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Configure Table of Widgets Content\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4af72ad elementor-widget elementor-widget-text-editor\" data-id=\"4af72ad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Make sure to open the settings for the Table of Contents widget. Then, use the <strong>Content<\/strong> tab to configure the content that displays in your table of contents.<\/p><p>First, add the title &#8211; for example, &#8220;Table of Contents&#8221;. This is a static text that displays above the list of anchor links that the widget automatically generates.<\/p><p>Then, choose what content to include. In the <strong>Include<\/strong> tab, you can enter:<\/p><ul><li><strong>Specific heading tags<\/strong>. For example, you might want to include &lt;h2&gt; and &lt;h3&gt; tags, but not anything below that. <em>You set your heading tags in the WordPress editor<\/em>.<\/li><li><strong>Other containers. <\/strong>You can also add anchor links to other containers outside your post content. For example, your footer. <em>This is an advanced feature<\/em>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c2de45 elementor-widget elementor-widget-image\" data-id=\"3c2de45\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"440\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=440\/blog\/wp-content\/uploads\/2020\/01\/elementor-table-of-contents-tutorial-3-768x440.jpg\" class=\"attachment-medium_large size-medium_large wp-image-35427\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/01\/elementor-table-of-contents-tutorial-3-768x440.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/01\/elementor-table-of-contents-tutorial-3-300x172.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/01\/elementor-table-of-contents-tutorial-3-1024x587.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1666\/blog\/wp-content\/uploads\/2020\/01\/elementor-table-of-contents-tutorial-3.jpg 1666w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-574b08f elementor-widget elementor-widget-text-editor\" data-id=\"574b08f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you go to the <strong>Exclude<\/strong> tab, you can exclude specific headings from your post using a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4351\">CSS<\/a> selector. For example, if you want to exclude a single &lt;h2&gt; heading, you can add a special &#8220;ignore&#8221; CSS class to that heading using the WordPress editor and then exclude it using the <strong>Anchors by Selector<\/strong> rule:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9dd90c elementor-widget elementor-widget-image\" data-id=\"a9dd90c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-table-of-contents-tutorial-4-r4q77zwwo7ykesxnicz1k8o5lopr162knn1bv2vdia.jpg\" title=\"elementor-table-of-contents-tutorial-4\" alt=\"elementor-table-of-contents-tutorial-4\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1535bce elementor-widget elementor-widget-text-editor\" data-id=\"1535bce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, you can use the <strong>Marker View<\/strong> setting to choose between numbers and bullets for your table of contents list. If you choose &#8220;bullets&#8221;, you can choose from any Font Awesome icon.<\/p><p>Finally, you can use the <strong>Additional Options<\/strong> section to control some other settings:<\/p><ul><li><strong>Word Wrap <\/strong>\u2014 whether or not items can take up multiple lines.<\/li><\/ul><ul><li><b>Minimize Box<\/b> \u2014 whether or not visitors can minimize the table of contents. If enabled, you can also choose custom icons and set <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7257\">responsive<\/a> behavior. For example, you can automatically minimize the box to start for mobile visitors.<\/li><\/ul><ul><li><b>Hierarchical View<\/b> \u2014 when enabled, subheadings will be indented underneath parent headings. You can also choose to collapse the sub-items underneath each parent. If disabled, everything will just appear in a single list with no indentation.\u00a0<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e93d23 elementor-widget elementor-widget-image\" data-id=\"1e93d23\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-table-of-contents-tutorial-5-r4q70lwky3uf55o1nnzmglsphn4vitqjb2ex1rts5g.jpg\" title=\"elementor-table-of-contents-tutorial-5\" alt=\"elementor-table-of-contents-tutorial-5\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ae3f91c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ae3f91c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c30965\" data-id=\"7c30965\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2b1bc9f elementor-widget elementor-widget-heading\" data-id=\"2b1bc9f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Configure Style Settings\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-969e058 elementor-widget elementor-widget-text-editor\" data-id=\"969e058\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, go to the <strong>Style<\/strong> tab to configure the design of your table of contents box. You can change all the colors and <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5311\">typography<\/a> to create a user-friendly experience and match the rest of your site and template&#8217;s design:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04e9a70 elementor-widget elementor-widget-image\" data-id=\"04e9a70\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-table-of-contents-tutorial-6-r4q75sygq4yhbk4cbeudqslfpbix2ld4cs8jju4g0y.jpg\" title=\"elementor-table-of-contents-tutorial-6\" alt=\"elementor-table-of-contents-tutorial-6\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3067cd3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3067cd3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0e7758\" data-id=\"d0e7758\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-623d930 elementor-widget elementor-widget-heading\" data-id=\"623d930\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Configure Advanced Settings\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10a5dd4 elementor-widget elementor-widget-text-editor\" data-id=\"10a5dd4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To finish things out, go to the <strong>Advanced<\/strong> tab to configure a few additional settings for how your table of contents functions.<\/p><p>For example, if you set the <strong>Width<\/strong> equal to <strong>Custom<\/strong> and the <strong>Position <\/strong>equal to <strong>Fixed<\/strong> in the <strong>Positioning<\/strong> section, you can make sure the table of contents remains in the same position even as users start scrolling down the page.<\/p><p>If you use positioning to display your table of contents &#8220;on top of&#8221; another element (<em>like your header<\/em>), you can also increase the <strong>Z-Index<\/strong> to make it appear on top:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9b177b elementor-widget elementor-widget-image\" data-id=\"a9b177b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/elementor-table-of-contents-tutorial-7-r4q6xf89sbhfsqam9af50eqh0mu3fr3a7atoi0jtfi.jpg\" title=\"elementor-table-of-contents-tutorial-7\" alt=\"elementor-table-of-contents-tutorial-7\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1dadc1b elementor-widget elementor-widget-text-editor\" data-id=\"1dadc1b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And that&#8217;s it! You just learned how to automatically add a table of contents to your content using Elementor Theme Builder and the Table of Contents widget.<\/p><p>To get started, <a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">purchase Elementor Pro today<\/a> to start using the Table of Contents widget in <a href=\"https:\/\/elementor.com\/theme-builder\/\" target=\"_blank\" rel=\"noopener\">Elementor Theme Builder<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we&#8217;ll show you exactly how to set it up.<\/p>\n","protected":false},"author":50988,"featured_media":35415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44],"tags":[79,173],"marketing_persona":[74],"marketing_intent":[49],"class_list":["post-35414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Table of Contents to WordPress Using Elementor<\/title>\n<meta name=\"description\" content=\"Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we&#039;ll show you exactly how to set it up.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/table-of-contents\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Table of Contents to WordPress Using Elementor\" \/>\n<meta property=\"og:description\" content=\"Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we&#039;ll show you exactly how to set it up.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/table-of-contents\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-14T08:55:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T11:02:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Colin Newcomer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Colin Newcomer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/\"},\"author\":{\"name\":\"Colin Newcomer\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21\"},\"headline\":\"How to Add Table of Contents to WordPress Using Elementor\",\"datePublished\":\"2020-01-14T08:55:35+00:00\",\"dateModified\":\"2025-12-04T11:02:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/\"},\"wordCount\":892,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/table-of-contents\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/\",\"url\":\"https:\/\/elementor.com\/blog\/table-of-contents\/\",\"name\":\"How to Add Table of Contents to WordPress Using Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png\",\"datePublished\":\"2020-01-14T08:55:35+00:00\",\"dateModified\":\"2025-12-04T11:02:28+00:00\",\"description\":\"Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we'll show you exactly how to set it up.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/table-of-contents\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/table-of-contents\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Table of Contents to WordPress Using Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21\",\"name\":\"Colin Newcomer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g\",\"caption\":\"Colin Newcomer\"},\"description\":\"Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/colinn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Table of Contents to WordPress Using Elementor","description":"Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we'll show you exactly how to set it up.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/table-of-contents\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Table of Contents to WordPress Using Elementor","og_description":"Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we'll show you exactly how to set it up.","og_url":"https:\/\/elementor.com\/blog\/table-of-contents\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-01-14T08:55:35+00:00","article_modified_time":"2025-12-04T11:02:28+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png","type":"image\/png"}],"author":"Colin Newcomer","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Colin Newcomer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/table-of-contents\/"},"author":{"name":"Colin Newcomer","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21"},"headline":"How to Add Table of Contents to WordPress Using Elementor","datePublished":"2020-01-14T08:55:35+00:00","dateModified":"2025-12-04T11:02:28+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/table-of-contents\/"},"wordCount":892,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png","keywords":["Build","Video"],"articleSection":["Elementor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/table-of-contents\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/table-of-contents\/","url":"https:\/\/elementor.com\/blog\/table-of-contents\/","name":"How to Add Table of Contents to WordPress Using Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png","datePublished":"2020-01-14T08:55:35+00:00","dateModified":"2025-12-04T11:02:28+00:00","description":"Our new Table of Contents widget automatically generates its contents based on the hierarchy of heading tags in your content. In this post, we'll show you exactly how to set it up.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/table-of-contents\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/01\/Table-of-Contents.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/table-of-contents\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"How to Add Table of Contents to WordPress Using Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/8df3c6697ea8e60fd1416e98a7ff0e21","name":"Colin Newcomer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g","caption":"Colin Newcomer"},"description":"Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.","url":"https:\/\/elementor.com\/blog\/author\/colinn\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/35414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/50988"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=35414"}],"version-history":[{"count":9,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/35414\/revisions"}],"predecessor-version":[{"id":146608,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/35414\/revisions\/146608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/35415"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=35414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=35414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=35414"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=35414"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=35414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}