Per Søderlind

<p>WP Anchor Header generates anchored headings (H1-H6), creating a heading like this:</p>
<pre><code><h2 id="the-heading">
   The Heading<a class="anchorlink dashicons-before" href="#the-heading"></a>
</h2>
</code></pre>
<p>The links are styled using the following CSS:</p>
<pre><code>/* show IDs for anchors */
h1[id]:hover a.anchorlink:before,
h2[id]:hover a.anchorlink:before,
h3[id]:hover a.anchorlink:before,
h4[id]:hover a.anchorlink:before,
h5[id]:hover a.anchorlink:before,
h6[id]:hover a.anchorlink:before {
    content: "\f103"; /*dashicons-admin-links*/
    color: #888;
    font-size: smaller;
    text-decoration: none;
    vertical-align: baseline;
}
a.anchorlink {
    text-decoration: none;
    margin-left: 0.5em;
    font-size: smaller;
}
</code></pre>
<h3>Credits</h3>
<p>The plugin is inspired by Christian Weiske and his article <a href="http://cweiske.de/tagebuch/html-heading-links.htm" rel="nofollow ugc">Usability: Clickable heading links</a>.</p>


WP Anchor Header

To tell the truth I had no hope searching for a plugin that would add links to headers.
And I was so surprised when this plugin did exactly what I wanted.
Thank you, Per Soderlind, for this plugin!
P.S.: Sorry for my English, I am Russian.



Extremely useful and simple

This plugin saved me a significant amount of time adding anchor links throughout an existing website. It worked exactly as expected.

My only suggestion would be a settings panel in the admin where users can specify exactly which header elements get anchor links automatically associated with them. So for example, I can go in and select "apply anchor links to <H4> only."

The ability to have a setting to turn on/off the hover link icon would be very helpful too. I had to manually edit the CSS to hide these icons on everything but H4's in my entry content.

Awesome plugin! Great time saver! A few suggestions.

WP Anchor Header generates anchored headings.

POSIMYTH

Sagar Patel

Devang Vachheta

Robert Wattner

dgovea

<p>Create advanced Sticky Headers in Elementor Free or Pro with scroll effects, blur, shrink, hide on scroll & full responsive controls.</p>
<h3>Sticky Header Effects for Elementor – Build Smart, Responsive Sticky Headers</h3>
<p>Sticky headers are essential for improving navigation, branding visibility, and user experience on any modern website. With the <strong>Sticky Header Effects for Elementor</strong> plugin, you can now build sleek, customizable sticky headers that respond to user scroll behavior — all with <strong>Elementor Free or Pro</strong>.</p>
<p>From transparent overlays to animated shrinking effects, dynamic background changes, and blur visuals — this plugin gives you 10+ scroll-based effects that help your header adapt beautifully to your page design.</p>
<p>This plugin is perfect for developers, designers, bloggers, and agencies who want more control over header behavior without writing a single line of code.</p>
<p><strong>This Plugin has been Acquired by POSIMYTH Innovations – <a href="https://stickyheadereffects.com/massive-updates-2-0/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=nexterextension" rel="nofollow ugc">Read Announcement Blog</a></strong></p>
<p><a href="https://stickyheadereffects.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🌐 Visit Website</a>| <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🖼️ Sticky Header Templates Demos</a> | <a href="https://www.youtube.com/c/POSIMYTHInnovations/?sub_confirmation=1" rel="nofollow ugc">📹 Video Tutorials</a> | <a href="https://stickyheadereffects.com/docs?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">📑 Documentations</a> | <a href="https://www.facebook.com/groups/theplus4elementor/" rel="nofollow ugc">👥 Join Community</a> | <a href="https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/" rel="ugc">🤝 Free Support</a></p>
<h3>🔥 Comes with <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">50+ Ready to Import Templates for Elementor Headers with Sticky Header</a></h3>
<h3>👑 10+ Powerful Elementor Sticky Header Effects</h3>
<h3>1. Header Scroll Distance Effect</h3>
<p><strong>Set Scroll Trigger Threshold</strong><br />
Define how far the user scrolls before sticky effects activate. Perfect for precise control over header behavior.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Header+Scroll+Distance&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>2. Transparent Header Background Effect</h3>
<p><strong>Overlay with Elegance</strong><br />
Allow your header to overlay your hero or banner sections with full transparency. Ideal for modern homepage designs.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Transparent+Header+Background&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>3. Dynamic Background Color Change</h3>
<p><strong>Auto Background Switching</strong><br />
Change your header’s background color on scroll to match different sections or maintain contrast.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Background+Color+Change&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>4. Bottom Border Styling Effect</h3>
<p><strong>Subtle Section Separation</strong><br />
Add customizable borders below your sticky header for better definition and clean design.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Bottom+Border+Styling&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>5. Header Shrinking Effect</h3>
<p><strong>Reduce Header Height Dynamically</strong><br />
Shrink the entire header after scrolling to save space and focus attention on the page content.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Header+Shrinking&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>6. Logo Shrinking Effect</h3>
<p><strong>Responsive Logo Transition</strong><br />
Shrink the logo proportionally during scroll, maintaining visual balance and brand presence.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Logo+Shrinking&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>7. Logo Color Change Effect</h3>
<p><strong>Switch Logo Color for Better Contrast</strong><br />
Automatically switch to a contrasting logo color on scroll based on background or user behavior.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Logo+Color+Change&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>8. Blur Background Effect</h3>
<p><strong>Add Modern Blur Transition</strong><br />
Enhance the visual flow by applying a subtle blur effect to the background of your sticky header.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Blur+Background&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>9. Hide Header on Scroll Down Effect</h3>
<p><strong>Hide & Reappear on Scroll</strong><br />
Auto-hide the header when scrolling down and show it again on scroll up — great for content-heavy pages.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Hide+Header+on+Scroll+Down&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>10. Above Header Section Effect</h3>
<p><strong>Sync Above Sections Seamlessly</strong><br />
Align your sticky effects with sections above the main header for unified motion and cleaner transitions.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Above+Header+Section&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>🔍 Check our other Products</h3>
<p><strong><a href="https://theplusaddons.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 The Plus Addons for Elementor</a></strong> – Nexter Extension works seamlessly with The Plus Addons for Elementor. Get 120+ unique Elementor widgets, Elementor templates, and more. Includes Free Elementor Theme Builder.</p>
<p><strong><a href="https://nexterwp.com/nexter-blocks/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 Nexter Blocks</a></strong> – Nexter Theme works in sync with core Gutenberg. Add 90+ powerful, highly customizable blocks.</p>
<p><strong><a href="https://nexterwp.com/nexter-theme/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 NexterWP Theme</a></strong> – Best & Lightest Starter Theme for WordPress & Elementor.</p>
<p><strong><a href="https://nexterwp.com/nexter-extension?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 Nexter Extension</a></strong> – Power up your WordPress website with 20+ extensions for layout, performance, security & more.</p>
<p><strong><a href="https://uichemy.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 UiChemy – Figma to Elementor Converter</a></strong> – Convert your Figma Templates into live Elementor websites using our <a href="https://www.figma.com/community/plugin/1265873702834050352/" rel="nofollow ugc">Free Figma Plugin</a>.</p>
<p><strong><a href="https://wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 WDesignKit</a></strong> – 1000+ Templates, Elementor & Gutenberg Widget Builder, Cloud Storage, Widget to Block Converter & More.</p>


Sticky Header Effects for Elementor

Create advanced Sticky Headers in Elementor Free or Pro with scroll effects, blur, shrink, hide on scroll & full responsive controls.

WP Anchor Header vs Sticky Header Effects for Elementor