Animated Number Counter Shortcode
Adds a [wpide_counter to="2500" suffix="+"] shortcode that counts up from zero when the number scrolls into view, for statistics and milestones.
Snippet Library
Frontend & Design snippets for WordPress
Snippets that change how your site looks and behaves for visitors: a back-to-top button, announcement bars, custom fonts and styles, smooth scrolling and small layout fixes. For designers and site owners polishing the front of the site.
Back to Top Button
Adds a small round button in the bottom corner that appears after scrolling down and takes visitors back to the top of the page.
Bouncing "Scroll Down" Arrow on Hero Sections
Adds a gently bouncing arrow to the bottom of any Cover block with the class "wpide-scroll-hint", inviting visitors to scroll past a full-screen hero.
Collapsible Sidebar Widgets on Phones
Folds sidebar and footer widgets into tap-to-open sections on small screens, so visitors reach the content and footer without scrolling past long widget lists.
Fix "Fixed Background" Cover Blocks on iPhone and iPad
Switches Cover blocks set to a fixed (parallax) background to a normal scrolling background on touch devices, where fixed backgrounds look blurry, zoomed or don't show at all.
Floating Call-to-Action Button After Scrolling
Shows a floating button in the bottom corner once visitors have scrolled past the first screen, for "Book a call", "Get a quote" or "Shop now" links.
Full-Screen Snap Scrolling Between Sections
Makes the page snap from one full-screen section to the next while scrolling, for presentation-style landing pages built from Cover or Group blocks with the class "wpide-snap".
Hide the Header on Scroll Down, Show It on Scroll Up
Slides the sticky site header out of view while visitors scroll down to read and brings it back as soon as they scroll up, giving content more room on small screens.
Highlight the Menu Link of the Section in View
Marks the menu link that points to the section currently on screen (for one-page sites with #about, #services links), updating as visitors scroll.
Lazy-Load Background Images
Loads background images only when their section is about to scroll into view, for any element marked with data-wpide-bg="image-url", saving bandwidth on long landing pages.
Marker-Pen Animation for Highlighted Text
Animates highlighted text (the <mark> tag from the toolbar's Highlight option) with a marker stroke that sweeps across as the words scroll into view.
Pause Autoplaying Videos When Off Screen
Pauses background and autoplaying videos when they scroll out of view or the browser tab is hidden, and resumes them when they come back, saving battery and data.
Reading Progress Bar
Shows a thin bar at the top of the window that fills up as the visitor scrolls through the page.
Reveal Blocks on Scroll
Fades and slides content blocks into view as the visitor scrolls. Add the class "reveal" to any block in the editor (Advanced > Additional CSS class) to animate it.
Scrollable Tables on Mobile
Lets wide tables in your content scroll sideways on small screens instead of breaking the layout or overflowing the page.
Scrolling Logo Strip (Marquee)
Turns any block with the class "wpide-marquee" (a Gallery, Row or Group of logos) into a smooth, endlessly scrolling strip that pauses on hover.
Slim Custom Scrollbar
Replaces the default browser scrollbar with a thinner one in your brand colors on desktop browsers.
Smooth Scrolling for Anchor Links
Makes in-page anchor links scroll smoothly instead of jumping, while respecting visitors who prefer reduced motion.
Sticky Header Row in Long Tables
Keeps the header row of long tables in posts visible while visitors scroll down through the rows, so they always know which column is which.
Sticky Header That Shrinks on Scroll
Keeps your theme's header pinned to the top of the screen and adds a shadow and smaller padding once the visitor scrolls down.
Sticky Sidebar
Keeps the sidebar visible while visitors scroll through long posts on desktop screens, so your widgets and calls to action stay in view.
Stop Sideways Scrolling on Phones
Prevents the whole page from scrolling sideways on phones when a wide image, embed or full-width block sticks out a few pixels past the screen edge.
Stop Sticky Headers Covering Jump-Link Targets
Leaves space above headings and sections when visitors follow a #link, so the target is not hidden under a sticky header or the admin bar.
Subtle Parallax Effect for Images
Gives images inside blocks with the class "wpide-parallax" a gentle parallax movement while scrolling, adding depth to hero and feature sections.