Posts

Creating Interactive Product Cards With Divi 5’s Loop Builder

Image
A product image needs to do two things at once: draw the reader in visually and give them enough context to take action. But loading every detail onto the card upfront quickly clutters the layout and competes with the image itself. An image hover reveal solves that neatly. The image gets the full spotlight by default, and the supporting details appear only when the user hovers over it. In this tutorial, we’ll build exactly that in Divi 5 , where hovering anywhere on a product card fades in an overlay with the product name, price, and a link to the product page. What We’re Building Here’s a look at the finished result before we start building it. The overlay covers the full image area, so the reveal triggers smoothly no matter where the cursor lands. A soft fade brings in the product name, price, and button against a darkened background, giving the card a clean, layered feel without overcomplicating the layout. The Key Steps Needed For This Effect This build breaks down into thre...
Post a Comment
Read more

How To Create Looping Semantic Lists In Divi 5

Image
Card-based layouts dominate modern web design, from blog archives and team directories to product catalogs and portfolio grids. Search engines and assistive technologies interpret these layouts through HTML structure, not visual appearance. A grid of blog post cards that looks organized to sighted users may appear as disconnected fragments to screen readers if the underlying markup lacks semantic meaning. Divi 5’s Loop Builder generates dynamic card layouts from WordPress content and lets you apply semantic markup through Divi 5’s Custom Attributes system and Element Type controls, creating accessible, SEO-friendly card grids. Proper semantic structure can improve screen reader navigation, make content relationships clearer to search engines, and make your markup easier to maintain. The technique applies the <ul> and <li> pattern to dynamic content while layering additional semantic elements, such as <article>, <header>, and <figure>, within each card....
Post a Comment
Read more

How To Create A Tilt Image Effect With Divi 5’s Interactions

Image
A tilt effect on hover is one of those small details that makes a layout feel considered. The image shifts with the cursor, pulls back slightly, and suddenly the whole page feels alive. Portfolio sites and product pages lean heavily on this effect, and for good reason: it keeps visitors engaged without demanding too much attention. Divi 5 ‘s Interactions system lets you build it directly in the Visual Builder. We’ll walk you through the entire process. A Brief Introduction To Divi 5’s Interactions Divi 5 Interactions runs on three parts: a trigger, an effect, and a target. The trigger starts things off, like a hover or a click. The effect is what happens as a result, like a position change or a visibility toggle. The target is the element that receives it. All of this lives under the Advanced tab of any module, column, row, or section inside the Visual Builder. The controls are fully visual, so coding knowledge isn’t needed. The system covers a wide range of behaviors. A Hover t...
Post a Comment
Read more

Divi 5.1 Release Notes

Image
It’s official; the beta phases have ended, and Divi 5 has arrived ! This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5 , you’ll see a version 5.1 update notification today. What’s New In Divi 5.1? We  implemented  66 bug fixes and improvements,   and a new feature: Complete Site Editing ! With Divi 5 hot off the presses, we are still focused on bug fixing and overall stability. However, after 8 months of doing nothing but fixing bugs, we are slowly transitioning back to feature development. That means the rate of innovation will accelerate significantly over the next few months. If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us! Editable Theme Builder Areas (Complete Site Editing) We released Complete Site Editing in Public Beta 5.0.2. 🎉 Now you can edit your header, footer, body layouts, and page content at ...
Post a Comment
Read more

Everything You Need To Know About The Command Center In Divi 5

Image
Divi 5 is out of beta and ready to use. With that in mind, we’d like to highlight one of its newest workflow features: the Divi 5 Command Center . The Command Center is a keyboard-driven command system built directly into the builder. It lets you execute actions quickly by typing instead of manually adding modules, clicking through menus, or hunting for options. We rebuilt Divi 5 from the ground up on a completely new, modular foundation that prioritizes speed, efficiency, and modern builder tools. The Command Center is possible because of that new foundation, allowing you to interact with Divi in a very different way. Using the Command Center can speed up the design process and make navigation through settings easier, so you can build and edit sites faster. It is especially useful when working with complex layouts, presets, and modified styles. In this post, we’ll take a hands-on look at the Command Center, show you how to use it, and share tips and best practices. Let’s get start...
Post a Comment
Read more