Posts

Part 14: Mastering The Divi 5 Loop Builder

Image
Welcome back to the Divi 5 Mastery Course. In Part 13: Creating Interactive Off-Canvas Elements (Popups & More) , we used Canvases and Interactions to add interactive UI to our coworking website. Now, it’s time to build with one of Divi 5’s most powerful dynamic content tools: the Loop Builder. In this post, we’ll skip the traditional Blog module and build a custom Blog page using the Loop Builder , dynamic content, Flexbox , and the Pagination module. By the end, you’ll have a responsive Blog page with featured images, post titles, excerpts, metadata, Read More buttons, and pagination. The final layout will also use the same Design Variables and Presets we created in Part 3 and Part 4 , so it stays connected to the global design system. Let’s get started. What The Divi 5 Loop Builder Does If you’ve worked with WordPress for any length of time, you’ve probably heard of the Loop. It is the WordPress mechanism that retrieves and displays content such as posts, pages, product...
Post a Comment
Read more

Part 13: Creating Interactive Off-Canvas Elements (Popups & More)

Image
Every site eventually needs UI that lives outside the page’s normal content flow: a pop-up, a sticky reminder, a slide-in panel, or a confirmation prompt. In Divi 5 , you can build these with Canvases. A Canvas is a detached design workspace that exists alongside the main page canvas. It is not a module dropped into the page layout. Instead, it gives you a separate workspace for off-canvas UI, pop-ups, menus, staging layouts, and other designs that should stay separate from the main page while you build. This part of the Mastery Course covers two Canvas builds for the coworking homepage. The first is a small Event Reminder notice anchored to the bottom-left of the viewport and dismissible with a close icon. The second is a centered email opt-in pop-up that is hidden by default, gated by a cookie condition, and triggered when the visitor scrolls to a specific section. Together, these two examples show the full Canvas , Interactions , and Display Conditions workflow. What Canvases Ar...
Post a Comment
Read more

5 Icon List Sections For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to create clean, scannable layouts that help visitors understand important information quickly. In this free pack, you’ll get 5 Icon List Sections that are perfect for landing pages, service pages, pricing sections, feature comparisons, product highlights, agency websites, portfolios, and more. Each section uses icons, spacing, typography, imagery, cards, and structured list items to create polished layouts with strong visual hierarchy. Import a section, replace the content, update the icons, and you’re ready to go. Preview Here’s a quick look at the 5 Icon List Sections included in the pack. The download is further down the post. Download 5 Icon List Sections For Divi 5 Get all 5 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder. Download the Files Download For Free Join the Divi Newsletter and we will email you...
Post a Comment
Read more