Do you want readers to be able to copy a link straight to one section of a long page? Sending someone the page and telling them to scroll to the fifth heading is a poor substitute for a link that lands them there.
The Hash Tag option in the Table Of Content widget puts a small marker beside every heading it indexes. One click copies the full URL of the page with that heading’s anchor on the end, ready to paste.
To check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Table Of Content is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Table Of Content, switched on under The Plus Addons > Widgets.
- The page needs real headings: the widget does not create headings, it indexes the ones already on the page. Build the article with heading widgets (H2, H3, H4) before you judge the result.
Steps
- Add the Table Of Content widget and set up Layout and Select Tags as usual. The markers follow Select Tags, so only the heading levels you index get one.
- Open Extra Options and switch Hash Tag on.
- Three settings appear. Tag is the marker itself and starts as
#; you can put any text there, such as Link or Copy link. Copy Text shows a short Copied label after the click, and Hash Tag On Hover keeps the marker hidden until the reader hovers the heading. Both are on already.
- Update the page, hover a heading on the published page and click the marker.
What You End Up With
Clicking the marker copies the link and shows the Copied label beside it for a moment. The page does not move.
Settings
| Setting | What it does | Default |
|---|---|---|
| Hash Tag | Adds the marker beside every indexed heading | Hide |
| Tag | The text of the marker | # |
| Copy Text | Show a Copied label for about a second and a half after the click | Show |
| Hash Tag On Hover | Hide the marker until the heading is hovered | Show |
How It Behaves
- The link that is copied is the address of the page the reader is on, plus the heading’s anchor — the same anchor the table of contents uses.
- Clicking the marker copies and nothing else: the page does not scroll and the address bar does not change.
- Markers are added to the headings on the page, not to the entries in the list. The list itself is unchanged.
- With Hash Tag On Hover on, the marker is invisible until the reader moves the pointer over the heading. Turn it off to show it all the time.
- You can restyle the marker and the Copied label under Style > Hash Tag.
Limitations
- Headings excluded with tp-toc-ignore still get a marker, and because those headings have no anchor the marker copies a broken link ending in
#undefined. If you use both features on one page, give the excluded heading a CSS ID of its own, or keep Hash Tag off on that page. - The Copied label is not proof that the copy worked. It is shown the moment the marker is clicked, before the copy is attempted, and the widget uses the browser’s older clipboard command. If a browser refuses that command, the label appears anyway.
- There is no icon picker for the marker: Tag is a plain text field.
- Hovering is a pointer action, so on touch screens the marker is effectively always hidden unless you turn Hash Tag On Hover off.
Troubleshooting
I cannot see the marker
It only appears on hover by default. Hover the heading, or switch Hash Tag On Hover off so it is always visible.
Some headings have no marker
Markers follow Select Tags. A heading level you removed from that field is not indexed, so it gets no marker.
The copied link points at #undefined
That heading is excluded with tp-toc-ignore, so it has no anchor. Give it a CSS ID under Advanced > Layout, or remove the ignore class.
Nothing is pasted after I click
The Copied label appears whether or not the copy succeeded, so it is not a reliable signal. Test the marker in the browsers your readers actually use before you point them at it.
