Elementor’s Table of Contents widget helps you organize your page content based on the levels of hierarchy of your heading tags and makes it easier for your site visitors to navigate your WordPress website.
In this tutorial you’ll learn how to:
✔︎ Create a table of contents index
✔︎ Add heading tags to your posts
✔︎ Set a custom position
✔︎ Use FA5’s duotone icons
✔︎ And more!
hi oh it’s live from Elementor today
I’ll show you how elementals table of
contents widget is the best tool to
customize your long-form content and
make it more successful and readable by
search engines as well as site visitors
by using it with elementals theme
builder like we did here you can add it
to all your sites posts in one go which
will instantly improve your site SEO and
help you get those precious featured
snippets on google so let’s dive in and
see how it works I’ve gone ahead and
pre-built for single post templates
using the theme builder each
representing a season let’s check out
winter all our posts assigned to the
winter category receive this templates
design now let’s add a table of contents
widget to this template which is one of
the dynamic widgets for the single post
template I’ll go ahead and drag it into
the right column as you can see we have
an organized list of all of our headings
that are present in the post
and when a visitor clicks on one in X as
an anchor and automatically Scrolls to
that section okay great now let’s go
over its settings and see how it works
in content under the table of contents
we can change the title and here we can
choose which headings are included or
excluded in the table of contents
widgets in include under anchors by tags
we can choose which heading tags are
included as anchors in our case we will
only include the h3 and h4 tags because
we added these as heading tags in our
posts I’ll go ahead and open a post so
you can see where I set them
as you can see the h3 and h4 headings
are set up hierarchically
okay now that we know where to set these
headings let’s go back to our table of
contents widgets and have a look at The
Container option it is an advanced
option that allows you to control which
containers on your sites the mapping in
the table of contents widget will be
apply to this way you can add headings
from other areas of your site to the
table of contents regions such as the
footer for example
by default elemento excludes the header
and footer containers in the table of
contents widget and only shows the
heading tags that are present in the
main content of a document so if I want
to include h3 and edge for heading tags
that appear in my sites footer for
example I need to include the main tag
as well as the footer tag over here
these containers need to be set to their
corresponding HTML tags as well for it
to work
now let’s check out the exclude anchors
by selector option here we can exclude
specific headings in our post from a
table of contents widgets by selector in
order to do so we need to add a CSS
class to that heading so back in our
post I’ll go to the heading I want to
exclude
and in advanced and the additional CSS
classes are given a class
back in the table of content widget type
the CSS selector for the class we just
added cool now it’s excluded from the
list let’s move on to mark of you we can
choose between numbers or bullets
bullets gives us the option to either
hide or choose an icon from our library
which is based on font awesome 5 font or
some pro subscribers have access to over
duotone icons which are icons comprised
of two different shades and adds an
original look and feel to them I’ll go
ahead and choose this cool icon which
blends in nicely with my table of
contents great let’s move on to the
additional options drop-down we can
choose to switch on word wrap which
might be useful when designing your
table of contents widget next we have
the minimize box option which shows the
minimizer icon button that lets our
visitors minimize the table of content
box we’re not using it you can also hide
it if you like when set to yes we can
change the icon over here either from
the icon library or upload our own SVG
this allows us to set two different
icons one for when the box is open and
one for when it’s minimized here we can
set the table of contents to be
minimized per device meaning that on a
mobile for example the table of contents
will be minimized from the start next we
can set the headings to appear in
hierarchical view giving it the indent
you see here when switching this option
to yes you can also choose to collapse
the sub items
now let’s move on to the style tab and
bring this widget to life in the box
drop down we can set a background color
I’ll go ahead and use this color are
saved in the picker before here we can
give the box a border color and width
but for this design and set the width to
zero I’ll do the same for the radius so
the corners are straight now let’s add
some padding and form in height I’ll go
ahead and set it to 65 the edge so that
the table of contents widgets will
always take up at least 65% of the
windows height no matter the amount of
items in it in the header drop-down we
can give this area in the Box a
different color but for this design I
leave it as is
I’ll go ahead and give the header title
a light color and set its typography
here we can change the minimize icon
color
and here we can set the separators width
in the list drop-down let’s first change
the text color so the items are more
visible
next star them in typography
and set an indent if you like
let’s move on to the normal hover and
active settings in the normal state the
light text color we set before is
already applied we can give it an
underline too in hava the underline
setting is set to yes by default and you
can change the hover color as well
inactive I’ll go ahead
the color this way when they are reading
the post they’ll visually know where
they are let’s move on to the marker
options here we can give the numbers or
icons we set before a color so I’ll go
ahead and give our duotone icon this
last color we can also set their size
over here
okay gret now let’s move on to the
Advanced tab here under positioning I’ll
go ahead and set the table of contents
width to custom and in position are set
it to be fixed so that it will remain in
the same position when the visitors
interact with it then I’ll give it a
custom width of 25%
set the horizontal orientation to right
in order to place it exactly where we
like I’ll go ahead and use the offset
sliders like you see her
great looking good now all we need to do
is give the table of contents widget a
higher set index than the sticky header
so it will appear on top of it let’s
check it out one last time
cool
well that’s it now you know how to use
the table of contents widgets to
customize your long-form content and
make it more successful and readable by
search engines as well as site visitors
have fun playing around and don’t forget
to subscribe to our YouTube channel for
more tips and tutorials ciao for now
