Equal-Height Card Grid Style (SCSS)
Turns any Columns or Group block with the class "card-grid" into a responsive grid of equal-height cards with shadows and hover lift.
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.
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.
Fix Full-Height Sections on Mobile Browsers
Makes Cover blocks and sections set to 100vh fit the visible screen on phones, where the browser's address bar otherwise hides the bottom of the section and its buttons.
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 on Mobile / Hide on Desktop Classes
Adds utility classes you can put on any block (hide-on-mobile, hide-on-tablet, hide-on-desktop) to show different content on different screen sizes.
Limit Post Titles and Excerpts to a Few Lines in Grids
Cuts long post titles to two lines and excerpts to three lines in blog grids and Query Loop blocks, so cards line up neatly whatever the text length.
Masonry Layout for Gallery Blocks
Shows images in any Gallery block with the class "wpide-masonry" in a Pinterest-style masonry layout, keeping each photo's natural shape instead of cropping it.
Nicer Styling for Details (Accordion) Blocks
Gives the Details block and other summary/details elements a clean accordion look with a border, padding and a rotating arrow.
Open Only One Details Block at a Time
Makes neighboring Details blocks behave like an accordion: opening one question closes the others in the same group, which keeps long FAQs tidy.
Play Videos on Hover
Plays muted Video blocks with the class "wpide-hover-play" while the mouse is over them and pauses when it leaves, like product previews in online stores.
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.
Rotating Testimonials
Shows the items inside any block with the class "wpide-rotator" (for example Quote blocks in a Group) one at a time, rotating every few seconds with dot buttons to pick one.
Smooth Open and Close Animation for Details Blocks
Animates Details (accordion) blocks so the answer slides open and closed smoothly instead of jumping, in browsers that support animating to auto height.
Spacing Utility Classes (SCSS)
Generates margin and padding helper classes such as mt-2, mb-4 and px-3 from a spacing scale, to fine-tune block spacing with an extra CSS class.
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.
Vertical Timeline Style for Groups (SCSS)
Turns the blocks inside a Group with the class "wpide-timeline" into a vertical timeline with a line and a dot for each step, for histories, roadmaps and processes.