With the EB Table Of Contents block, you can easily enhance your user experience by providing an easy navigation process for website visitors. Using this block from Essential Blocks can help you showcase your content headings in a table format. So that whenever your visitors can click on any heading, they will be instantly redirected to that specific content.
Follow this step-by-step guide to include a table of contents on your website using EB Table Of Contents block in Gutenberg.
How To Activate EB Table Of Contents? #
Make sure you have installed and activated Essential Blocks for Gutenberg on your WordPress site. Essential Blocks comes with a modular control that can give you the freedom to enable or disable any block.
To activate Table Of Contents block, navigate to Essential Blocks → ‘Blocks’. Then, toggle to enable the block as shown below. After that, click on the ‘Save’ button.
How To Configure EB Table Of Contents In Gutenberg? #
Now, open the page where you want to insert a table of content. Then click on the ‘+’ button and find the ‘Table Of Contents’ block. Click on the block to insert it into your web page.
[Note: Make sure your contents have different headings for this block to work.]
Now, navigate to General→Visible Headers then set up which headings you want to showcase on your table of contents . You can also choose to make your table collapsible or sticky from there as well.
Besides, from the ‘Title Settings’ option, you can adjust the title alignment, background color, etc. at ease. You can also add a title separator, and customize it according to your preference.
From the ‘Content Settings’, you can personalize your content by adjusting the colors, typography, content gap, etc. Besides, you can add underlines and showcase separators to make your table of contents more attractive to the visitors.
In addition, you can enable scrolling options on your web page by simply toggling the ‘Smooth Scroll’ and ‘Scroll to Top’ from the ‘Scroll’ options. Besides, you can adjust the arrow height and width and add colors from there.
From the ‘Advanced’ tab you can easily adjust the margin and padding for your table of content. Also, you will be able to add background colors for your table of contents from there.
Besides, from the ‘Border & Shadow’ option, you can choose a border style from multiple presets and add hover effects on the background. You can also adjust the border radius and add box shadow on your table of contents from there.
Final Outcome #
After making all the changes, click on the ‘Publish’ button to make your page live. Check out how the ‘EB Table Of Contents’ will appear on your WordPress website.
This is how to create and design the EB Table Of Contents block in Gutenberg easily.
Getting stuck? Feel free to Contact Our Support for further assistance.