Posts

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

Divi 5.6 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.6  update notification today. What’s New In Divi 5.6? We  implemented  109 bug fixes and improvements , along with several new modules and new color harmony and color scale generators. The majority of our team is focused on bug fixing and overall stability. However, after 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! Five New Modules for Divi 5 We just released five new modules for Divi 5. Create beautiful, animated timelines using the timeline module. This one wor...
Post a Comment
Read more

How To Style Every Form On Your Website From One Place In Divi 5

Image
Divi 5 lets you style forms as part of a larger design system instead of repeating the same decisions in every module. With new form field options , dedicated Input, Checkbox, and Radio option groups, focus and checked states, Design Variables , and the Preset Manager , you can style form fields once and reuse those decisions across your site. In this tutorial, we’ll build a reusable form styling system in Divi 5. You’ll style inputs, checkboxes, radio buttons, focus states, checked states, and form buttons, then save everything as presets you can manage from one place. Build A Reusable Form Styling System In Divi 5 Divi 5 changes how form styling is structured. Previously, Divi form modules used a single Field option group, and the available controls could vary depending on the module or field type. Divi 5 replaces that older structure with dedicated Input, Checkbox, and Radio option groups. That gives each field type its own styling controls. Inputs can have their own backgrou...
Post a Comment
Read more