Building a color palette in Divi 5 no longer has to start with a blank canvas or a separate color tool. With the Variable Generator, you can start with one primary color, choose how the rest of the palette should relate to it, and save the result directly…
Elegant Themes
How To Build A Full-Screen Menu With Divi 5 Interactions
Divi 5 gives you more ways to build custom navigation without relying only on the classic Menu module or third-party plugins. With newer menu components, Interactions, and Canvases, you can design navigation as part of the page instead of forcing every menu into one preset structure. That flexibility…
Exploring Divi 5’s New Ratio & Framing Settings
Inconsistent image sizes can make an otherwise polished layout feel unfinished. Blog grids lose alignment, galleries crop awkwardly, and responsive layouts can shift in ways that make images feel disconnected from the rest of the design. Divi 5 gives you a better way to handle that with new…
Introducing Workspaces for Divi 5
I am excited to announce customizable workspaces for Divi 5! The Divi 5 interface is incredibly customizable. You can choose which panels are opened and closed, where they are docked, whether they are floating or in a sidebar, their size, and their position. You can combine panels into…
Combining Composable Settings + Nested Option Presets In Divi 5
Composable Settings and Nested Option Presets work together to make Divi 5 design systems more flexible and reusable. Composable Settings unlock extra design controls for module sub-elements, such as a Blurb image, Call To Action button, or form field. Nested Option Presets keep those styles connected so they…
Divi 5.7 Release Notes
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.7 update notification today. What’ s New In…
6 Photo Background Hero Sections For Divi 5 (Free Download!)
Divi 5 makes it easy to create bold hero sections with immersive visuals and strong first impressions. In this free pack, you’ll get 6 Photo Background Heroes that are perfect for landing pages, portfolio intros, service pages, product launches, restaurant websites, sports websites, architecture studios, agencies, and more….
Part 16: Auditing, Polishing, And Launching Your Divi 5 Website
Welcome to the last part of the Divi 5 Mastery Course. Over the last 15 parts, you went from a blank WordPress install to a complete coworking website with a global design system, Theme Builder templates, responsive layouts, dynamic content, and interactive elements. You created Design Variables, built…
Part 15: Divi 5 Power User Workflow
By now, you know what Divi 5 can do. Across this Mastery Course, you’ve built a homepage, a custom header and footer, global templates, inner pages, off-canvas elements, and dynamic layouts. You’ve also worked with Design Variables, Presets, Flexbox, CSS Grid, Canvases, Interactions, and the Loop Builder. This…
How To Turn One Brand Color Into An Entire Divi 5 Color Palette
Designers rarely pull a full brand palette out of thin air. Most color systems start with one strong brand color, then build supporting colors around it. From there, the work becomes more systematic: lighter tints for backgrounds, darker shades for text and hover states, muted tones for UI…
New Gradient Editor, Gradient Variables, Text Effects and More
We just released a bunch of new gradient-related features for Divi 5! Gradient options have been consolidated into a new gradient picker panel, and with the introduction of a new gradient field type, gradients are now easier to manage than ever. You can copy, paste, extend, find, replace, …
How To Create Better Focus States For Accessible Forms In Divi 5
Styling a form well takes effort. You choose the colors, adjust the borders, refine the spacing, and eventually the form looks right. But that is only the resting state: the version visitors see before they interact with it. The moment someone clicks or tabs into a field, the…
How To Build Custom Woo Cart Pages In Divi 5
The default WooCommerce cart works, but it is not always easy to shape around your brand, your products, or the way your customers make decisions. That is where a custom cart page can make a real difference. With Divi 5, you can build a cart page visually using…
11 Gutterless Layouts For Divi 5 (Free Download!)
Divi 5 makes it easy to create polished full-width layouts with strong visual impact. In this free pack, you’ll get 11 Gutterless Sections that are perfect for landing pages, hero areas, portfolios, service pages, product highlights, restaurant websites, agency layouts, architecture studios, and more. Each section removes the…
Everything You Need To Know About Divi 5’s Sizing System
Divi 5 gives designers a more systematic way to build responsive websites. Instead of manually adjusting the same padding, font size, gap, or border radius across desktop, tablet, and phone views, you can define reusable sizing variables once and apply them throughout your site. The new Variable Generator…
How To Build A Golden Ratio Hero Section With Divi 5’s Flexbox
A hero section sets the page’ s tone, and proportion helps guide visitors to the right place first. In a two-column layout, giving the content more room creates a stronger focal point while keeping the image present and supportive. In Divi 5, you can create that balance with a…
Everything You Need To Know About Divi 5’s Color Palette Variable Generator
Creating a reliable color system has always been one of the harder parts of web design. You start with a primary brand color, then manually build lighter values, darker values, muted variations, and transparent colors for backgrounds, borders, shadows, buttons, and hover states. The result often works at…
How To Style The Contact Form 7 Module In Divi 5
Styling a Contact Form 7 form to match your website used to mean writing custom CSS, chasing the right selectors, and checking every field again on mobile. Even when the CSS worked, the form often still felt separate from the rest of the page. That matters because forms…
Part 14: Mastering The Divi 5 Loop Builder
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…
Part 13: Creating Interactive Off-Canvas Elements (Popups & More)
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….
