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 works especially well for a full-screen menu. The header can stay clean with a logo, call-to-action button, and hamburger icon. When visitors need navigation, the hamburger icon can reveal a large overlay menu.

In this tutorial, we’ll build a responsive full-screen menu using Divi 5’s Link module, Loop Builder, Interactions, and Canvases.

How Divi 5’s Menu Features Work Together

Divi 5’s newer menu tools are built around smaller, more flexible pieces.

Instead of designing every navigation layout through one Menu module, you can combine individual modules, dynamic menu loops, detached Canvases, and Interactions. This gives you more control over how the menu looks and how it opens or closes.

For this full-screen menu, we’ll use three main pieces.

The Link Module

The Link module lets you add a single customizable link anywhere in your layout. You can style the text, spacing, icon, hover state, sizing, background, border, and other design settings just like you would with other Divi modules.

For this tutorial, we’ll use one Link module inside a menu loop. The loop will repeat that link for each item in a WordPress menu. That gives you the design freedom of a custom link layout while still keeping the menu items managed in WordPress.

Loop Builder

Loop Builder handles the repeated menu items. Instead of adding every menu link manually, you can enable looping on a container, set the query type to Menu, choose a WordPress menu, and use dynamic content to pull in the current menu item text and URL.

This is useful because the full-screen menu stays connected to your WordPress menu. If you change the menu in WordPress later, the loop can reflect those changes without rebuilding each link by hand.

Interactions

Divi 5’s Interactions feature controls the menu behavior. For this build, one Interaction will show the full-screen menu when someone clicks the hamburger icon. Another Interaction will hide the menu when someone clicks the close icon.

Interactions live in the Advanced tab. They can use triggers such as clicks, viewport events, and breakpoint changes. They also support targeting options that make it possible to show, hide, or toggle related elements. The behavior we need is simple: click the hamburger icon to open the overlay, then click the close icon to hide it.

Canvases

Canvases are detached workspaces in Divi 5. They let you build content away from the Main Canvas. That keeps complex overlay elements from cluttering your header while you work.

A Canvas is a good place to build a full-screen menu, popup, slide-in panel, or mega menu. The menu can stay hidden by default, then appear when an Interaction triggers it. The Canvas Portal Module is useful when you need to place a detached Canvas at a specific spot in a page or Theme Builder template.

For this tutorial, we do not need a Canvas Portal. The full-screen menu works as a fixed overlay controlled by Interactions.

How To Build A Full-Screen Menu With Divi 5

Now let’s build the menu. By the end, you’ll have a sticky header with a hamburger trigger and a full-screen overlay menu that opens and closes with Divi 5 Interactions.

Step 1: Build The Desktop Header

Start by creating a new Global Header in the Theme Builder. When the Builder loads, add a Single Column Row to the Main Canvas. Then open the column settings.

Open Design > Layout. Set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center. This turns the column into a horizontal header container. The logo can sit on the left while the button and hamburger icon sit on the right.

Next, open the Section settings. Go to Design > Spacing and add 15px of top and bottom padding.

In the Advanced tab, open Scroll Effects and set Sticky Position to Stick To Top. Leave the other sticky settings at their defaults unless your header needs different behavior.

Return to the Content tab and add a background color to the Section. This keeps the sticky header readable as visitors scroll.

Step 2: Add The Header Modules

Click inside the Row and add an Image module for your logo. In the Design tab, open Sizing and adjust the Width value until the logo fits your header.

Use Divi’s Responsive Editor to adjust the logo size for smaller screens.

After the logo is in place, add a Group module.

Place a Button module and an Icon module inside the Group. The Button can be used for a primary call to action, such as contacting you or viewing your work. The Icon module will become the hamburger trigger that opens the full-screen menu.

Open the Group settings and go to Design > Layout. Set Layout Direction to Row and Align Items to Center. This places the Button and Icon side by side.

Style the Button and Icon modules to match your header. Use Divi 5’s Customizable Responsive Breakpoints to adjust spacing, button size, or icon size for tablet and mobile.

Save the template by clicking the Save button in the upper right corner of the Builder.

Step 3: Build The Full-Screen Menu Canvas

With the header in place, build the full-screen menu on a separate Canvas. This keeps the overlay layout separate from the Main Canvas while you design it.

Click the Canvas Grid View button to open the Canvas Preview window.

When the Canvas Preview opens, click + Add Canvas.

Give the Canvas a clear name, such as Full-Screen Menu. Then click Add Canvas.

Add two Single Column Rows to the Canvas. The first row will hold the close icon. The second row will hold the menu links and social media icons.

Open the Section settings and go to Design > Layout. Set Justify Content to Space Around. This gives the close icon and menu content room to breathe vertically.

Next, open Design > Sizing. In the Height field, enter 100vh. This makes the menu section fill the full height of the viewport.

Now go to Advanced > Position. Set Position to Fixed, set Offset Origin to Center, and set the Z Index to 999999. This keeps the full-screen menu fixed over the page content when it appears.

Return to the Content tab, open Background, and add a background color.

If your design needs a background image, select the Background Image tab and add one. Keep the image subtle enough that the menu links remain easy to read.

Step 4: Add The Close Icon

Add an Icon module to the first row in the full-screen menu section. In the Content tab, open Icon and choose a close icon.

In the Design tab, use the Icon settings to choose the icon color and size. Hover settings can help the close icon feel interactive.

Click into the second row and edit the column. Go to Design > Layout and set Align Items to Center. This keeps the menu links centered inside the overlay.

Step 5: Add A Group For The Menu Links

Before adding the link, place a Group Module in the second row.

This Group will act as the loop container for the menu links. It also keeps the repeated links organized inside one layout wrapper. In the Group’s Design tab, set Align Items to Center.

Step 6: Add The Link Module And Enable Menu Looping

Add a Link module inside the Group. Style the Link module to match your full-screen menu design.

Large typography works well here because the overlay has more space than a traditional header menu. Add hover styles so visitors get clear feedback when they move over a menu item.

With the link styled, enable Loop Builder on the Group that contains it. Open the Group’s Content tab and expand the Loop option group. Set Query Type to Menu, then select your site’s WordPress menu in the Menu field.

Now open the Link module’s Content tab. In the Text option group, use dynamic content for the link text and choose Loop Menu Text.

Make sure the Link module’s URL also uses the current loop menu item URL if it is not added automatically in your build. This keeps each repeated Link module connected to the correct WordPress menu item.

Step 7: Add Social Media Links

To finish the overlay, add a Social Media Follow module below the menu links. Use the + Add Social Network button to add the platforms you want to include.

Choose a network, add the profile URL, and adjust the background color as needed.

Open the main Social Media Follow module settings. In the Design tab, adjust the icon color, icon size, spacing, border radius, and hover styles so the icons match the rest of the menu.

Step 8: Hide The Full-Screen Menu By Default

Before creating the Interactions, hide the full-screen menu so it does not appear when the page first loads. Select the main Section on the full-screen menu Canvas. Go to Advanced > Visibility and hide or disable the Section on all breakpoints.

The menu is now ready to be shown by an Interaction. Save the Canvas before moving to the next step.

Step 9: Create The Close Interaction

The menu needs two Interactions. One Interaction closes the full-screen menu from inside the overlay. The other opens it from the header.

Start with the close icon inside the full-screen menu Canvas. Select the close Icon module and go to Advanced > Interactions. Click + Add Interaction.

In the Edit Interaction modal, add a clear Admin Label, such as Close Full-Screen Menu. Set Trigger Event to Click. For Effect Action, choose Hide Element. For the target, select Root Container if you want the close icon to hide the overlay container it sits inside.

Save the Canvas after creating the close Interaction.

Step 10: Create The Open Interaction

Return to the Main Canvas and select the hamburger Icon module in the header.

Go to Advanced > Interactions and add a new Interaction. Set Trigger Event to Click. Set Effect Action to Show Element. For the target, choose the full-screen menu Section on the menu Canvas.

Save the Canvas. When the Theme Builder interface loads, click Save Changes. Then preview the site in a new tab.

Click the hamburger icon to open the menu. Then click the close icon to hide it again. Also test the menu on tablet and mobile. Make sure the overlay fills the screen, the links remain readable, and the close icon is easy to tap.

Download The Files

We created two JSON files for this tutorial: one for the Main Menu and one for the Full Screen Menu. After downloading the files below, create a new Global Header template in the Theme Builder.

Inside the Builder, add a new Section to the template. Select Add From Library, then load the Main Menu JSON file to the Canvas.

Save the template. Next, open the Canvas dropdown menu in the top left corner of the Page Bar.

Select Add Canvas.

Name the Canvas Full Screen Menu and click Add Canvas.

When the Builder loads, add a new section. Select Add From Library, choose the Full Screen Menu JSON file, and load it onto the Canvas.

Save the Canvas. Then return to the Main Menu by using the Canvas dropdown menu or the Canvas Grid View icon.

Check that the Interaction used to launch the Full Screen Menu is set up correctly. Select the hamburger Icon module in the Main Menu. Open the Advanced tab, expand Interactions, and edit the Interaction created for the menu trigger.

Confirm that the Target Module is set to the Full Screen Menu’s Section.

Save the template one final time. Then preview the menu and test both Interactions.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Build A Full-Screen Header Menu With Divi 5

Divi 5’s newer menu tools make it easier to move beyond standard header navigation. By combining the Link module, Loop Builder, Canvases, and Interactions, you can build a full-screen menu that feels custom while keeping the main header minimal.

The same workflow can support other navigation patterns too. Use a Canvas for a slide-in menu, a popup, a large editorial menu, or a mega-menu style layout. Then use Interactions to control when that menu appears and how visitors close it.

Download the files above or follow the steps manually. After that, customize the links, colors, spacing, background image, and responsive settings to match your own site.

The post How To Build A Full-Screen Menu With Divi 5 Interactions appeared first on Elegant Themes Blog.

Divi 5 gives you a better way to handle that with new Aspect Ratio, Image Framing, and Image Preset tools. Aspect Ratio helps you keep elements proportional. Image Framing controls how images fit and sit inside those proportions. Image Presets let you reuse image styling across modules that display images.

In this post, we’ll walk through what each setting does, where to find it, and how to combine these tools for cleaner grids, better crops, and more consistent image styling across your site.

What Changed In Divi 5?

Divi 5’s new image workflow is built around three related updates.

• Aspect Ratio: A setting in the Sizing option group that keeps an element’s width and height in a defined proportion as it scales.
• Image Framing: Fit and position controls that decide how an image fills its frame and which part of the image stays visible.
• Image Presets: Preset support for the Image option group, making it easier to reuse image styles such as borders, shadows, filters, and framing.

These features are most useful when they work together. Aspect Ratio creates the frame. Image Framing controls how the image behaves inside that frame. Presets help you reuse the same image treatment across modules and pages.

Understanding Aspect Ratio In Divi 5

Aspect Ratio sets a proportional relationship between width and height. For example, 16:9 works well for widescreen banners and videos, 1:1 creates a square, 4:3 is useful for classic image cards, and 3:4 or 4:5 works well for portrait-style images.

Once you set a ratio, Divi keeps that proportion as the element scales across screen sizes. That makes it much easier to keep image cards, product photos, team headshots, blog thumbnails, and portfolio items aligned.

Before this update, consistent image proportions often meant preparing every image in an external editor or using layout workarounds. Now, you can control proportional sizing directly in the Visual Builder.

This is especially useful for Loop Builder layouts, blog grids, galleries, WooCommerce product sections, team pages, and any design where repeated items need to line up cleanly.

Where To Find Aspect Ratio Settings

You can find Aspect Ratio in the Design > Sizing option group.

When you define an aspect ratio, Divi calculates the element’s height based on its rendered width. As the width changes on different screen sizes, the height adjusts automatically to keep the same ratio.

Aspect Ratio is not only useful for Image modules. It can also help keep icons, avatars, decorative shapes, containers, and other elements proportional.

For images, Aspect Ratio defines the frame. The image inside that frame is controlled by the Framing settings.

Aspect Ratio Example

One of the easiest ways to see the value of Aspect Ratio is in a blog or portfolio grid. In a Loop Builder layout, you can set each featured image to the same ratio so every card lines up, even when the original image uploads have different dimensions.

For example, a 4:3 ratio creates consistent horizontal image cards that work well for blogs, portfolios, and resource grids.

The advantage becomes even clearer on smaller screens. The image can scale with the layout while keeping the same proportion, so it does not stretch, squash, or force uneven card heights.

Using Image Framing In Divi 5

Aspect Ratio gives you the frame. Image Framing controls how the image fits inside that frame.

This matters because changing the frame can change how an image appears. Without framing controls, an image may stretch, show empty space, or crop in the wrong place. Framing gives you control over the fit and focal point.

To use it, open a module that displays an image and go to the Design tab. In the Image module, Framing appears as its own option group. In modules where the image is a sub-element, such as Blurb or Person, you will usually find it under Design > Image > Framing.

Object Fit

Object Fit controls how the image fills the frame. Divi includes several fit options:

• Fill: Stretches the image to fill the frame. This can distort the image.
• Contain: Scales the full image inside the frame. This keeps the whole image visible but may leave empty space.
• Cover: Fills the frame while preserving the image’s proportions. Parts of the image may be cropped.
• None: Displays the image at its intrinsic size, which may crop or leave empty space depending on the frame.
• Scale Down: Uses the smaller result between None and Contain.

For most card grids and image-heavy layouts, Cover is often the best starting point because it fills the frame without distorting the image.

Object Position

Object Position controls which part of the image stays visible when the image is cropped. This is especially useful for portraits, product photos, and destination images where the subject is not perfectly centered.

You can anchor the image to preset positions such as top, center, bottom, left, or right. You can also enter custom horizontal and vertical values for more precise placement.

Object Fit only makes a visible difference when the image’s rendered size differs from its original proportions. In practice, that usually means you have set an Aspect Ratio or custom width and height.

Apply Framing Across Multiple Images

When you find a framing setup that works, you do not have to recreate it one image at a time.

For a quick one-off reuse, use Divi’s Copy/Paste Attributes workflow. Right-click a styled image, copy its attributes, and paste them onto another similar image.

For broader updates, use Extend Attributes to extend styling across matching modules or areas of the page. This is useful when you want many images in a section, grid, or layout to share the same ratio and crop behavior.

For long-term consistency, use presets. We’ll cover that next.

Image Framing Example

In the layout below, six destination cards use a 1:1 Aspect Ratio with Cover fit. That gives every card the same square frame.

The original images have different shapes and compositions.

By adjusting the framing, you can keep the most important part of each photo visible while still maintaining a consistent grid. The result is a cleaner layout that feels intentional across desktop, tablet, and mobile.

Reuse Image Styles With Presets

Divi 5 now supports presets for the Image option group. This means you can save reusable image styles and apply them to other modules that display images.

An Image option group preset can include settings such as border radius, border styles, box shadow, filters, and framing. This is useful for repeated image treatments, such as card images, circular avatars, product photos, editorial thumbnails, or branded gallery images.

There is one important distinction: Aspect Ratio lives in the Sizing option group, not the Image option group. If you want to reuse Image Framing and other image styling, an Image option group preset works well. If you want to save Aspect Ratio and Image Framing together, use an Element Preset or combine a Sizing Option Group Preset with an Image Option Group Preset.

Create An Image Preset

To create an Image preset, style an image the way you want it. Then open the preset menu at the top of the Image option group, choose New Preset From Current Styles, name the preset clearly, and save it.

Use names that describe the role of the image style, such as Card Image Rounded, Product Image Square Crop, Avatar Circle, or Editorial Thumbnail.

Apply Or Update An Image Preset

When you add another module that displays an image, open its Image option group and choose the preset from the preset menu.

If you update the preset later, other images using that preset can update too. This keeps image styling consistent across the site without requiring you to edit each image module manually.

Image presets also work well with Composable Settings and Design Variables. Use variables for values like border radius, border color, and shadow color when you want image styles to stay connected to your larger design system.

Image Preset Example

The layout below shows how image styling can change across breakpoints. The large image uses a 2:3 Aspect Ratio on desktop and tablet, then switches to a 1:1 square ratio on mobile.

Below the hero image, the circular icons use a 1:1 Aspect Ratio and a fixed width of 75px.

This shows that Aspect Ratio can help beyond traditional images. It can keep icons, avatars, decorative elements, and image containers proportioned across different layouts.

For this kind of responsive setup, use presets carefully. Use Image option group presets for reusable image styling and framing. Use Element Presets when the full module design, including Sizing and Aspect Ratio, should travel together.

Tips And Best Practices

Start With The Ratio, Then Adjust The Frame

Set the Aspect Ratio first. Then use Image Framing to decide how the image should fit inside that ratio. This two-step workflow keeps your layout consistent while still letting you protect the most important part of each photo.

Use Cover For Consistent Grids

For blog grids, product grids, team cards, and portfolio cards, Cover is usually the most reliable Object Fit setting. It fills the frame and preserves image proportions, although some cropping may occur.

Use Object Position to control what stays visible. For headshots, top center often works better than exact center because it helps keep faces from being cropped too low.

Use Contain When The Whole Image Must Be Visible

Use Contain when the entire image needs to remain visible, such as logos, diagrams, UI screenshots, or product images where cropping would remove important information.

Contain may leave empty space inside the frame, so pair it with a background color or layout treatment that makes that space feel intentional.

Check Mobile Crops Separately

A crop that works on desktop may not work on mobile. Use Divi’s responsive controls to adjust the ratio, fit, or object position at smaller breakpoints.

Square or portrait ratios often work better on phones, especially for card images and hero sections. Always preview the crop where the image will actually be used.

Avoid Extreme Ratios Unless The Design Needs Them

Very tall or very narrow ratios can make layouts harder to manage, especially inside grids and dynamic loops. Standard ratios like 1:1, 4:3, 3:4, 4:5, 16:9, and 21:9 are easier to reuse.

Extreme ratios can still work for editorial or experimental layouts, but test them across breakpoints before using them in repeated modules.

Use Presets For Repeated Image Treatments

If you use the same crop, border radius, shadow, or filter more than once, save it as a preset. This keeps your image styling consistent and makes future updates easier.

For full image module patterns that include Sizing, Aspect Ratio, Image Framing, border, shadow, and spacing, use an Element Preset instead of relying only on an Image option group preset.

Combine These Tools With Loop Builder

Aspect Ratio and Image Framing are especially useful in Loop Builder templates. Set the image ratio and framing once inside the loop item, and every repeated item can follow the same visual structure.

This is one of the easiest ways to turn dynamic content into a polished grid.

Download And Install The Example Files

To help you get started quickly, we prepared a downloadable Divi Library file that includes the example sections shown in this post.

After downloading the zip file, go to your WordPress dashboard and open Divi > Divi Library. Click Import & Export.

Select the JSON file from your computer, open the Import tab, and click Import Divi Builder Layouts.

Once imported, open the Visual Builder on any page and click the blue plus icon to add a new section.

Click Add From Library, choose the section you want to use, and click Use This Section.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Build Cleaner Image Layouts With Divi 5

Divi 5’s Aspect Ratio, Image Framing, and Image Preset updates make image-heavy layouts easier to control. You can set consistent proportions, choose how images fit inside those frames, protect the most important part of each image, and reuse the same styling across your site.

Use Aspect Ratio to create the structure. Use Image Framing to control the crop. Use presets to keep repeated image styles consistent.

Together, these tools make image grids, galleries, product sections, portfolios, and responsive layouts easier to build and easier to maintain.

The post Exploring Divi 5’s New Ratio & Framing Settings appeared first on Elegant Themes Blog.

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 tabbed groups. You can choose which icons are visible in the top bar. You can choose between light and dark modes, as well as various color schemes, and more!

Now, every user on your website can make the visual builder their own by creating their own collections of saved workspaces.

Create your perfect default workspace, along with alternative workspaces that you can switch to on the fly depending on what you are building, your screen size, etc.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

Customize Your Workspace

With the introduction of workspaces, every user on your website gets to customize their own building experience. Workspaces save more than just builder settings; they capture the size and position of every panel, giving you complete control.

You can create multiple workspaces for different scenarios and instantly swap between them while building.

Creating A New Workspace

Open the workspace settings using the icon in the left sidebar. From here, you can adjust various UI/UX settings in the builder, such as light/dark mode, color scheme, and more.

Additionally, you can customize the builder interface by opening, closing, and arranging panels in your preferred locations.

Once you are happy with your workspace, click the “Save as New Workspace” button and give it a name.

Switching to this workspace will instantly transform the builder interface.

You can create as many workspaces as you want for different situations and use them when needed.

Managing Workspaces

In the workspace panel, click the Active Workspace menu to see a list of all your workspaces.

From here, you can activate, update, duplicate, delete, and rename your workspaces.

New Workspace Commands

Are you using the command center yet? It’s amazing!

In this update, we added new commands that make it easy to rapidly switch between workspaces, update the active workspaces, and create new workspaces.

• Update Active Workspace – Running this command captures your current workspace and updates the active workspace to match it. When you refresh the builder, everything will be where you left it.
• Reset Active Workspace – Running this command resets the active workspace to its default settings and closes all panels.
• Switch Workspace – Type in the name of any of your workspaces, press enter, and the entire building experience changes instantly. You can bounce between different workspaces on the fly.
• Save as New Workspace – Running this command captures your active workspace and saves it as a new workspace with a name of your choosing.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have You Tried Divi  5’s New Gradient Features?

We just recently released a bunch of new gradient-related features!

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, and inspect gradients as a unified attribute.

What’s more, we added support for gradient variables. Use the same gradients throughout your website, and manage them easily in the variable manager.

Plus, gradients can now be used to fill text, along with new text-stroke and image-fill settings.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁

The post Introducing Workspaces for Divi 5 appeared first on Elegant Themes Blog.

Together, they turn saved styles into a system you can reuse across your site and update from one place when colors, spacing, borders, or other shared design decisions change.

What Are Composable Settings In Divi 5?

Divi modules are built from smaller parts. A Blurb module includes an image, title, and body text. A Call To Action module includes a button. A Testimonial module includes an image, author text, body text, and other sub-elements. In older workflows, each sub-element came with a fixed set of design controls. If a button, image, title, or icon did not include the option group you needed, custom CSS was often the only way forward.

Composable Settings changes that. It lets you enable additional Divi design option groups for module sub-elements, such as Sizing, Spacing, Border, Animation, Transform, Filters, and more. The settings do not appear by default. That keeps the panel clean. When you need more control, hover over a sub-element option group and click the Toggle Options icon.

Once enabled, the new option groups appear inside that sub-element’s settings. From there, they work like normal Divi design controls. You can style a title with a border, add spacing to a button, animate an image, or give a sub-element its own sizing rules without writing CSS.

This matters because sub-elements can now participate in the same design system as full modules.

What Are Option Group Presets?

Divi groups design settings by type. Background, Border, Spacing, Sizing, Box Shadow, Filters, Transform, Typography, and Button settings are all examples of option groups.

An Option Group Preset saves one of those groups as a reusable style. Instead of remembering the exact border width, radius, and color every time, you save those border settings once and apply the preset anywhere a compatible Border group appears.

Option Group Presets are useful because they are not limited to one module type. A Border preset created on a Blurb title can also be used on an Image module, Button option group, Call To Action module, or any other place with a compatible Border group.

That makes the preset the source of truth. The style belongs to the preset, not to one isolated module.

How Nested Option Presets Work

Element Presets save the full design of an element or module. Option Group Presets save specific groups of settings. Nested presets connect those two layers.

For example, an Element Preset for a Blurb can include Option Group Presets for the image border, title spacing, body typography, and module background. When you apply the Blurb Element Preset to another Blurb, those nested presets come with it.

Nested Option Presets take the idea even further. You can build smaller presets and nest them into larger option presets. A border style might be made from smaller presets for radius, width, and color. That combined border preset can then be used inside a button preset, a card preset, or a full module preset.

Why Nesting Matters

Without nesting, similar styles often get copied across modules. That works at first, but it becomes hard to maintain. If a client wants sharper corners, a different border width, or a new brand color, every copied style becomes another place to edit.

Nested presets solve that by keeping shared decisions connected.

For example:

• A Border Radius Pill preset controls rounded corners.
• A Border Width Medium preset controls border thickness.
• A Border Color Primary preset controls the border color.
• Those presets combine into a Primary Pill Border preset.
• That border preset is used inside a Primary Button preset.
• The button preset is nested inside a Call To Action Element Preset.

If the brand color changes, you update the color source once. Every connected preset can follow that change instead of forcing you to edit each module one by one.

Using Composable Settings And Nested Presets Together

Composable Settings gives you access to more controls. Nested Option Presets make those controls reusable. That combination is where the power is.

If you only use Composable Settings, you can style a sub-element more deeply, but those styles may still live in one module. If you only use presets, you can reuse existing settings, but you are limited to the option groups already available on that element.

Together, they let you unlock the right controls on a sub-element, style those controls with Design Variables, save the result as presets, and nest those presets into larger module-level systems. The workflow looks like this:

• Use Composable Settings to enable the option groups you need.
• Style those groups with Design Variables where possible.
• Save focused Option Group Presets for reusable design decisions.
• Nest smaller presets into larger option presets.
• Nest those option presets inside Element Presets.
• Use the Preset Manager to manage the full system over time.

This creates a design chain that is flexible, reusable, and easier to update.

Build A System With Both Features

Let’s put the workflow into practice with the Blurb module. It is a good example because it includes multiple sub-elements: image, title, and body text. We will enable extra design controls for the title, style those controls with Design Variables, save them as Option Group Presets, nest those presets into a title preset, and then save the full Blurb as an Element Preset.

Step 1: Toggle Design Options On A Sub-Element

Open a Blurb module and go to the Title Text option group in the Design tab. By default, you will see the standard text controls.

Hover over the Title Text option group header. The Toggle Options icon appears on the right.

Click the icon to open the list of additional option groups. For this example, enable Spacing and Border, then save the selection.

The Spacing and Border option groups now appear inside the Title Text group.

The same process works for other sub-elements, such as the Blurb image and body text. Enable only the option groups the design needs so the settings panel stays focused.

Step 2: Style The Sub-Element With Design Variables

After enabling the new option groups, style the title. For a scalable system, avoid hard-coded values when you can use Design Variables instead. For example, use a color variable for the title border and a spacing variable for padding or margin. That keeps the title connected to your broader design system.

This gives you one central source for important values. If the brand color, spacing scale, or border width changes later, the connected styles can update without rebuilding every Blurb.

Step 3: Create Option Group Presets

Now save the styles you just created.

Hover over the Border option group inside Title Text. Click the preset icon, choose New Preset From Current Styles, give the preset a clear name, and save it. For example, you might name it Border Medium Primary.

Repeat the same process for Spacing. A name like Padding 10 or Title Padding Small works better than a vague name like Custom Spacing.

Because these are Option Group Presets, they can be reused anywhere the same group exists. Open another module with a Border group, and your Border Medium Primary preset can appear there too.

If the Border or Spacing group is not visible on a sub-element, use Composable Settings to enable it first. Toggle the option group, then apply the preset.

Step 4: Create An Option Group Preset With Nested Option Presets

At this point, you have smaller presets for the Title Text border and spacing. The next step is to save the full Title Text design with those smaller presets nested inside it. Hover over the Title Text option group header and click the preset icon. Choose New Preset From Current Styles, then give the preset a role-based name.

For example, use Title Pill Primary or Title Text Bordered.

Role-based names are easier to reuse than names tied to one module. Title Pill Primary tells you what the preset does. Blurb Title Style 1 only tells you where it started.

You can now apply this title preset to compatible text option groups in other modules. If the nested Spacing and Border groups do not appear by default, enable them with Toggle Options before applying the preset.

The full title styling transfers in one workflow, including the smaller nested presets.

Step 5: Save The Full Module As An Element Preset

Now bring the full Blurb into the system. Back in the Blurb module, open the module-level preset menu. Create a new Element Preset and give it a clear name, such as Blurb Card With Title Pill.

The Element Preset can save the module layout, image settings, title text, body text, background, spacing, and the nested presets used inside the title.

Apply that Element Preset to another Blurb, and the full design stack comes with it. At this point, the system has several layers:

• A Design Variable stores the border color.
• A Border Option Group Preset uses that variable.
• A Title Text preset nests the border and spacing presets.
• A Blurb Element Preset includes the Title Text preset.

Update the Design Variable, and the value can travel through the connected presets. Update the Border preset, and every element using that preset can follow. Update the Blurb Element Preset, and every Blurb using it can inherit the change.

That is the difference between a saved style and a connected design system.

Step 6: Use Local Overrides When Needed

A preset system should be flexible. Not every module needs to look identical. If one Blurb needs a different title color, adjust that value locally. The local override affects that Blurb only. The rest of the preset system remains intact.

If you keep making the same override across several modules, do not leave it as repeated local edits. Turn it into a new preset variant instead.

Stack Presets For Granular Control

Nesting connects presets inside other presets. Stacking lets you apply multiple presets to the same element or option group. This is useful when you want smaller, focused presets that can be combined in different ways.

For example, instead of one border preset that contains radius, width, and color, create separate presets:

• Border Radius Pill
• Border Width Medium
• Border Color Primary

Stack all three on the same Border group, and the final border can look the same as one larger preset. The difference is control. If the brand color changes, update the color preset. Radius and width stay untouched.

This stacking logic can work at different levels. You can stack Option Group Presets, sub-element presets, or Element Presets. A Blurb might use one preset for base layout, another for typography, and another for a dark theme variant.

Think of stacking as a visual-builder version of utility classes. You combine small, focused design decisions instead of creating a new full preset for every variation.

Manage The System With Preset Manager

As your preset library grows, use the Preset Manager to keep it organized. The Preset Manager gives you a central place to view and manage Element Presets and Option Group Presets across the site.

Use it to rename presets, duplicate them, edit them, remove old ones, and find the preset you need without opening every module on the page. It also helps when you are building reusable systems for multiple projects. You can build a preset library on one Divi 5 site, export it, and import it into another project.

For agencies and freelancers, that turns the preset library into a reusable production asset instead of a one-site convenience.

Real-World Ways To Combine These Features

The Blurb example shows the full workflow, but the same pattern works across many Divi builds.

Call To Action Buttons

A Call To Action module often has a button that needs more than default styling. Use Composable Settings to enable additional option groups when needed, such as Transform, Animation, Sizing, or Border. Then save those button styles as Option Group Presets and nest them inside a Call To Action Element Preset. New CTA sections can start with the same button style automatically.

Blurb Images

A Blurb image may need a border, shadow, transform, filter, or hover treatment. If the option group you need is not visible, enable it with Composable Settings. Save the image treatment as one or more Option Group Presets, then include those presets in a Blurb Element Preset. Every new Blurb can use the same image behavior without rebuilding it manually.

Form Fields

Divi 5’s newer form field options include dedicated groups for Input, Checkbox, and Radio styling. You can combine those form option groups with Design Variables and Presets to create consistent field styles, focus states, borders, and spacing.

For deeper form work, pair this workflow with field presets and focus editing so form states stay consistent across Contact Forms, Email Optins, Login forms, and WooCommerce forms.

Cards And Layout Sections

Cards often share the same background, border, shadow, and spacing logic. Build those as focused Option Group Presets, then nest them inside Element Presets for Blurbs, Call To Action modules, Pricing Tables, or custom card layouts.

This keeps repeated visual patterns consistent even when the content changes.

Best Practices For Composable Settings And Nested Presets

A flexible design system still needs structure. Use these habits to keep your presets useful instead of messy.

• Start with Design Variables: Use variables for colors, spacing, sizes, and other values that may change later.
• Enable only what you need: Composable Settings are powerful, but too many visible groups can make the panel harder to use.
• Name presets by role: Names like Border Radius Pill or Card Shadow Soft are easier to reuse than names like Blurb Border 2.
• Keep small presets focused: Smaller presets are easier to stack, nest, and update.
• Use Element Presets for complete patterns: Save the full module only when the whole structure should travel together.
• Turn repeated overrides into variants: If the same local edit happens more than once, it probably deserves its own preset.
• Review your preset library regularly: Rename unclear presets and remove old experiments that are no longer used.

The goal is not to create the most presets possible. The goal is to create the fewest presets that still give you flexible, repeatable control.

Get More Out Of Divi 5’s Preset System

Composable Settings and Nested Option Presets are powerful on their own. Together, they help you build systems instead of isolated styles. Composable Settings unlock the controls you need on module sub-elements. Option Group Presets save those controls as reusable decisions. Nested presets connect those decisions to larger patterns. Element Presets carry the full pattern across the site.

That structure takes more thought upfront, but it pays off when a project changes. A client updates the brand color. A border radius needs to change. A card style needs a new shadow. Instead of editing dozens of modules manually, you update the right variable or preset and let the system do the work.

Build the system once, keep it organized, and it becomes easier to make every future Divi 5 site more consistent from the start.

The post Combining Composable Settings + Nested Option Presets In Divi 5 appeared first on Elegant Themes Blog.

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 Divi 5.7?

We implemented 72 bug fixes and improvements, along with several new gradient-related features.

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!

New Gradient Editor, Gradient Variables, Text Effects, and More

We just released a bunch of new gradient-related features in Divi 5.7!

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, and inspect gradients as a unified attribute.

What’s more, we added support for gradient variables. Use the same gradients throughout your website, and manage them easily in the variable manager.

Plus, gradients can now be used to fill text, along with new text-stroke and image-fill settings.

Take the full tour. 👇

What’s Coming Next?

The web design world is changing.

We are building the next evolution of Divi AI, an agentic workflow that will augment your design process in the builder, much like AI-powered IDEs like Cursor.

The Divi AI Agent will work like a human, with access to the same tools you have.

We have the architecture in place, and over the next few months, we will add many new tools to complete the vision.

It’s a brave new world, and Divi will be part of it!

Check out the sneak peek. 👇

Changelog

Here is a list of all fixes and improvements included in this update.

• Added gradient variables.
• Added a new gradient field component and a gradient picker panel.
• Add new gradient and image text fill options to font groups.
• Added a new “convert to variable” option to the field right-click menus.
• Fixed gradient stop colors not being detected in the inspector.
• Fixed image replacement in the inspector, replacing the image URL with an invalid object instead of the URL string.
• Inherited variables are now shown with reduced opacity in the settings panel to make their inheritance clear.
• Fixed inherited values in the responsive editor showing up as hard values instead of placeholder values in the field components.
• Imported legacy Text modules now preserve the expected Open Sans body weight during import, so frontend rendering matches freshly created Text modules.
• Fixed HTML in dynamic content. Before and After fields are not rendering in the Link module on the Visual Builder and front end.
• Fixed SVG Code being cleared when reloading the Visual Builder for Global SVG modules.
• Fixed Icon List Item Body Text color not applying to hyperlinks inside list item text (including Loop Post Terms with taxonomy links).
• Fixed off-canvas content being replaced with main canvas content when clicking the main canvas star in the Canvases dropdown while editing another canvas.
• Fixed Loop Builder Order By options missing after reloading a Theme Builder template when Query Type was set to Posts For Current Page.
• Fixed Testimonial portrait stacking in Divi 5 flex layouts by extending narrow-column detection to flex column classes on desktop and tablet.
• Fixed Video module aspect ratio targeting so portrait YouTube embeds use the same sizing selector chain as existing video height constraints.
• Fixed accordion content scrolling underneath sticky sections on the front end by including the builder sticky element height in the accordion auto-scroll offset, matching anchor link scroll behavior.
• Improved module-creation workflow guardrails so generated modules more reliably match approved implementation contracts.
• Saved layouts no longer keep a desktop centering offset on tablet and phone when a module switches back to relative positioning at smaller breakpoints.
• Fixed preset-based button hover padding regressions in CTA and related module paths where hover could incorrectly fall back to default hard-coded padding.
• Added Module Elements documentation (Introduction, Render, Script Data, Style) under Module explanations, with full API parameter references, paired VB/FE usage examples, updated Module category sidebar order, and improved formatting conventions.
• Prevented hide-on-load interactions from flashing on initial page load.
• Fixed an issue where closing preset editing could close Preset Manager instead of returning users to it when editing was initiated from Preset Manager.
• Fixed an issue where local Column padding in the Visual Builder did not apply when a module preset also defined padding, because preset padding was incorrectly marked as important.
• Fixed a critical error on the front end when layouts stored object position as separate horizontal and vertical values instead of a single CSS value.
• Fixed the Blurb module title hover text not updating on the frontend when a Title Link URL is set.
• Fixed an issue where Theme Builder pages could occasionally generate incomplete critical/deferred CSS after partial cache invalidation, causing missing frontend styles.
• Link module Design → Layout now applies to nested modules because their output sits in the same .et_pb_link_inner flex container as the Link’s icon and text in both the frontend and Visual Builder.
• Link grid layout now keeps the text row full-width, so nested Icons can occupy the grid columns together instead of splitting across rows.
• The Link inner wrapper now renders as a div, so nested block-level module roots remain valid and do not get hoisted out of the Link subtree in the Visual Builder.
• Link now suppresses nested Icon anchors under divi/link, resets default nested child-module bottom spacing inside .et_pb_link_inner, and ships an earlier FE flex baseline for .et_pb_link_inner through the existing Link static CSS path to avoid the observed load jump.
• Updated the example extension modules so Layout, HTML, and Elements match core Divi 5 patterns in VB, extended the same behavior to Child Module with a documented inner layout pattern, aligned Parent with Accordion-style child rules, and fixed front-end render callbacks so Elements children and module styles output correctly.
• Fixed third-party modules being unable to open settings panels.
• Fixed premade layout library appearing empty when opening the load layout modal from the page creation flow.
• Fixed Responsive Editor not showing preset values on the desktop row when opening the Responsive Editor from the module level.
• Fixed the missing browser backup restore prompt in the Divi 5 Visual Builder after a tab crash or reload when unsaved edits existed in the previous session.
• Removed the legacy D4 frontend builder runtime while keeping required legacy build outputs intact.
• Lockfile regenerations across the repo and related submodules are intentional and intended to remove Node 14-era dependencies and align the toolchain with Node 18/20 + Corepack/Yarn 4.7.0. These updates are required to keep installs/builds deterministic after the Node 14 removal.
• Image modules using Grow to Fill with Cover now stretch to the full row height in Safari without changing the shared VB/frontend contract.
• Fixed Visual Builder incorrectly reporting a failed save for some layouts where special characters and HTML-related module fields caused save verification to disagree with the real Divi save pipeline.
• Image module border-radius clipping now works for complex radius values such as clamp(…), so rounded images clip correctly without custom CSS.
• Fixed an issue where the Visual Builder could fully reload when using a Link module with a Dropdown module set to open on click, which could discard unsaved changes.
• Fixed the built-in icon picker showing incorrect icons when selecting icons in the Visual Builder on RTL sites.
• Fixed an issue where the Icon module’s background color stretched across the full column width instead of centering around the icon in flex layouts.
• Fixed modules disappearing on the Visual Builder canvas when decoration animation repeat was set to loop, especially after hovering once the first animation cycle had finished.
• Fixed frontend PHP fatal on some pages when image URL fields in saved content were not valid strings, so the page can load instead of crashing (invalid image data may no longer display until content is corrected).
• Fixed Visual Builder saves (and related REST actions) failing after long idle when WordPress and Divi REST nonces went stale, by refreshing those nonces and retrying the request once, and by allowing fresh nonces to merge during after-app-load.
• Introduced divi_remove_empty_array_attributes_pre_filter WordPress filter in ModuleUtils::remove_empty_array_attributes(), allowing third-party modules to preserve intentional empty array field values that would otherwise be removed during save-time security sanitization.
• Fixed a loop page issue where CSS was incorrectly inherited from Divi-built posts, causing auto-generated loop excerpts to render those posts’ layouts in the background.
• Fixed an issue where clicking the settings icon on a Link module in the Visual Builder could load the linked page inside the builder instead of opening module settings.
• Fixed an issue where the Filter by Date field in the Visual Builder media library was misaligned after updating to WordPress 7.0.
• Fixed AI Agent inserting blank modules and failing to edit unset attributes — the agent now adds modules with the requested content populated and can change any attribute on any module on first try.
• Fixed Fullwidth Image background video not playing after migrating from Divi 4 when the module had a video background.
• Fixed default heading font not applying in Theme Builder Visual Builder when heading text font is set to Default.
• Fixed an issue where the Sizing option group incorrectly appeared as modified on newly added Columns in the Visual Builder.
• Fixed Loop Builder Order and Order By not applying when using Posts for Current Page on archive templates.
• Fixed global preset save failing with a validation error when module presets included stacked group preset metadata from the builder.
• Fixed Blurb title overlapping an animated image on the front end so published pages match the Visual Builder when composable title styling overlaps the image.
• Fixed Post Slider background overlay tint not applying in the Visual Builder when Dark text color was set on phone only while desktop or tablet remained Light.
• Fixed unit synchronization in Transform Scale fields when switching from math functions (e.g., calc()) to regular numeric units with sync enabled, ensuring both X and Y axes maintain matching units. Also improved CSS numeric field validation to prevent invalid CSS values when transitioning between value types.
• Fixed Theme Builder layout titles in the Visual Builder showing as “Theme Builder Layout” until Theme Builder was saved.
• Image module Object Position now transitions smoothly when the Visual Builder settings modal switches between Desktop and Hover.
• The Visual Builder canvas and Object Position settings preview now show the correct hover image asset when the Image module uses a different hover-state image source.
• Fixed background videos set to display only on hover, showing and playing correctly on the frontend and in the Visual Builder.
• Fixed a browser crash that could occur when using Find & Replace on very large layouts, especially when replacing one variable with another across many modules.
• Fixed the missing Layouts option on Tools → Export in Divi 5 by ensuring the library layout post type registers on the WordPress export screen.
• Fixed a Visual Builder parity issue where the Single Post Content Area Background Color did not render in the builder.
• Fixes D5 Visual Builder failing to load on WooCommerce product pages when the iframe had #et-fb-app-body-root but no outer #et-fb-app mount node.
• Fixed the Table of Contents to ignore hidden headings and resync after responsive breakpoint changes.
• Fixed Role Editor Module Use restrictions in the Divi 5 Visual Builder: aligned permission key resolution across Insert Module and add middleware, hid empty module folders when all children are disabled, and blocked adds for modules disabled for the current role (including Group when divi/group is off).
• Fixed an issue where entering line-height values without a unit could incorrectly switch the unit picker to unitless instead of keeping the selected/default unit.
• Fixed mobile Theme Customizer body text size being overridden by desktop body font size in Divi 5.

Jump Into Divi 5 Today

It’s official. Divi 5 is ready for production. Give it a try, and let us know what you think!

If you are brand new to Divi 5, we suggest familiarizing yourself with its many new features; there’s much to explore.

• The Divi 5 page provides a good overview of some of its most exciting changes.
• Our help center has nearly 200 articles focused on Divi 5.
• On the blog, the Divi Resources category features hundreds of long-form tutorials that explore every aspect in depth.
• On YouTube, we have many videos that walk you through each new update.
• Plus, our Fin chatbot is trained on everything and can answer questions instantly! Behind the chatbot is our support team, ready to chat with you and help you through the transition.

The post Divi 5.7 Release Notes appeared first on Elegant Themes Blog.

Each section uses full-width photo backgrounds, layered content, overlays, typography, buttons, and structured supporting elements to create polished hero designs that are ready to customize. Import a section, replace the content, update the background image, and you’re ready to go.

Preview

Here’s a quick look at the 6 Photo Background Heroes included in the pack. The download is further down the post.

Download 6 Photo Background Heroes For Divi 5

Get all 6 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 a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

What’s Included (7 Exports)

After you download and unzip the file, you’ll find 6 styled Photo Background Hero Section exports, plus 1 file containing all layouts.

Styled – Photo Background Hero Section 1 to 6 (6) → Six fully styled hero section layouts with full-width photo backgrounds, layered content areas, bold typography, buttons, overlays, image treatments, and clean spacing that you can use as-is or customize.

Styled – Photo Background Hero Sections (All) → Imports all 6 designs into your Divi Library at once.

How To Use The Photo Background Heroes

Keep your download folder handy. We’ll import the files, add a section to a page, and then replace the content.

1. Import Sections Into The Divi Library

Go to Divi → Divi Library. Click Import & Export at the top of the screen.

In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file. Choose any Photo Background Hero Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Photo Background Hero To Any Page

Open a page in the Visual Builder and add a new Section.

Click Add From Library and select one of your Photo Background Hero sections.

3. Swap The Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, buttons, links, labels, stats, captions, supporting details, and calls to action to ensure the hero section aligns with your brand and message. Then swap in your own photo background, featured image, logo, icons, video, or supporting visuals as needed.

Because photo background hero sections rely on strong contrast, readable text, and careful image placement, it’s best to replace content one area at a time. This helps preserve the balance between the background photo, overlay, typography, buttons, and supporting content as you customize the design.

If you want to expand or simplify a section, duplicate or remove existing rows, columns, groups, content blocks, buttons, or modules, rather than rebuilding the design from scratch. That’s the easiest way to preserve the original structure, alignment, spacing, and visual rhythm of the layout.

4. Adjust Styles (Optional)

These Photo Background Hero layouts are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, background images, overlays, borders, shadows, spacing, buttons, and image treatments as needed using the settings in the Content and Design tabs.

To change typography, open any Text or Heading module and go to the Design tab. Expand the relevant text settings to adjust Font, Font Weight, Text Alignment, Text Color, and more.

To refine the hero styling, open the section, row, column, group, or module you want to adjust and use the Content and Design tabs to tweak Background, Background Image, Background Overlay, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.

If your section uses dark overlays, split content blocks, floating cards, large headline type, supporting stats, social links, or layered visual elements, keep those relationships in mind as you edit so the hero remains intentional, readable, and balanced.

Use Divi’s responsive editing tools to fine-tune spacing, background positioning, image cropping, text size, stacking, alignment, and button placement on smaller screens so the layout stays polished across devices.

Tips For Effective Photo Background Heroes

Photo background hero sections work best when the image, message, and call to action all support the same goal. Use these quick tips to keep your heroes polished, readable, and easy to customize.

Choose A Strong Background Photo

Your background image sets the tone for the entire hero section. Use high-quality photos with clear focal points, strong composition, and enough open space for text and buttons.

Keep Text Readable

Photo backgrounds can make text harder to read if contrast is too low. Use overlays, text shadows, color contrast, and careful placement to make headings, body copy, and buttons easy to see.

Create A Clear Visual Hierarchy

Use headline size, supporting copy, button placement, contrast, and spacing to guide visitors through the hero. The main message and call to action should be easy to understand at a glance.

Balance The Photo With The Content

A strong image should support the message, not compete with it. Position your content where the photo has room to breathe, and use padding, overlays, or layout blocks to create a clean reading area.

Check The Layout On Mobile

Photo background heroes can change noticeably on tablet and phone screens as images crop and content stacks. Review your layout on smaller devices to ensure the focal point remains visible, text stays readable, spacing feels balanced, and calls to action are easy to tap.

Start Building In Divi 5 Today!

These 6 Photo Background Heroes give you a fast way to build bold, immersive hero sections for landing pages, portfolios, service pages, restaurant websites, product launches, architecture studios, agencies, sports websites, and more. Swap in your content, customize the styling if needed, and you’ll have a professional hero section ready in minutes with Divi 5’s Visual Builder.

The post 6 Photo Background Hero Sections For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

You created Design Variables, built Presets, created Theme Builder templates, mastered Flexbox and CSS Grid, worked with the Loop Builder, and learned a faster power user workflow.

Now it is time to step back, review everything with a critical eye, polish the details, and prepare the site for launch. In this post, we will walk through a complete pre-launch audit, check visual and functional details, review performance settings, tighten accessibility and SEO basics, test across devices and browsers, and finish with the final launch steps.

By the end, your Divi 5 website will be ready for real visitors. Let’s dive in!

The Pre-Launch Checklist

You have spent weeks in builder mode, tweaking modules, adjusting spacing, and refining every part of your Divi 5 website. Now it is time for one of the most important shifts in the process: moving from creator to critic.

This transition is harder than most people realize. After working on a design for a while, you can stop seeing it clearly. Small inconsistencies, awkward spacing, broken links, and usability issues can become easy to miss. That is why a strong pre-launch audit starts with the right mindset.

Step Away Before You Audit

If possible, step away from the project for a short period before the final review. Close the browser, take a break, and let your mind reset. Coming back with fresh eyes helps you experience the website more like a first-time visitor.

When you return, view your site in a new way:

• Use an Incognito window in Chrome or a Private window in Safari.
• Stay logged out of WordPress when testing the front end.
• Browse the site on a physical phone or tablet, not only inside the builder preview.

Then, review the site from a user-first perspective. Ask yourself:

1. Does this feel intuitive?
2. Is the navigation clear?
3. Does the content flow naturally?
4. Are the calls to action easy to find?
5. Would I trust this website with my time or money?

This mindset helps you move beyond “Does it look finished?” and toward the more important question: “Does it work well for visitors?”

Use Your Power User Workflow

This is where everything you learned in Part 15: Divi 5 Power User Workflow becomes valuable. Use the Layers panel, Command Center, Page Manager, Inspector, Design Variables, and Presets to move through the site efficiently.

Instead of clicking around aimlessly, review the site with a system. Move page by page, check repeated components, inspect anything that looks inconsistent, and fix problems at the Design Variable or Preset level whenever possible.

Visual And Functional Audit

Now that you are approaching the website with fresh eyes, it is time to run a visual and functional audit. This is where you catch the small details that can affect the professional feel of the site. Treat this as your final quality control pass before opening the site to real visitors.

Step-By-Step Audit Checklist

Go through the following items carefully. It helps to create a simple checklist so you can track what you have reviewed and what still needs attention.

1. Review Every Page For Consistency

Start by visiting every major page on the site: the homepage, core inner pages, Blog page, archive templates, single post template, search results page, and 404 page.

As you review each page, pay close attention to typography. Check that heading sizes, font weights, line heights, and spacing feel consistent with the design system. Small typography inconsistencies can make a site feel unfinished.

Next, verify that colors are controlled through your Design Variables from Part 3. This is one of the biggest advantages of the workflow you built. If you ever need to rebrand or adjust your palette, you can update the variable once and let the connected presets and modules follow.

Then, examine your button styles. Confirm that buttons use the correct Option Group Presets and Element Presets from Part 4. Check text size, padding, hover states, border radius, and spacing so buttons look and behave consistently across the site.

Finally, review spacing between sections and modules. Make sure vertical gaps feel balanced on desktop, tablet, and phone. This is the time for small spacing adjustments that improve the final polish without changing the overall design.

2. Check Header And Footer Behavior

Next, focus on the header and footer. Test whether the header stays sticky as intended on every page and whether it behaves correctly on desktop, tablet, and phone.

Pay attention to how the header interacts with different content lengths and screen sizes. Verify that the custom navigation from Part 6 does not overlap content, break across lines awkwardly, or hide important links on smaller screens.

Then, confirm that the footer from Part 7 displays correctly on every page. Check spacing, column stacking, social icons, copyright text, and link alignment.

3. Test All Interactive Elements

Interactive elements can make a website feel polished, but only if they behave predictably. Open and close any off-canvas menus, pop-ups, notices, or slide-ins you built in Part 13.

Test hover states on buttons, images, and links. Confirm that interactions trigger at the right time and do not interrupt the user experience. Next, scroll through your Loop Builder layouts from Part 14. Verify that featured images, post titles, terms, excerpts, metadata, links, and pagination display correctly.

Finally, click through every link and submit every form. Make sure contact forms, email opt-ins, buttons, navigation links, social links, and dynamic Read More links all work as intended.

4. Check Content Accuracy

After the visual review, shift your focus to content accuracy. Proofread the entire website for spelling, grammar, punctuation, and formatting issues. Look for leftover placeholder text, repeated phrases, incorrect dates, outdated offers, and unfinished captions.

Replace any placeholder images with the final assets. Then check all internal and external links to ensure none are broken.

Also, verify that company information is consistent across the site. Contact details, business hours, address, email, phone number, and social links should match wherever they appear. If you stored these values as Text or Link Variables, update them there instead of editing each instance manually.

5. Review Mobile And Tablet Layouts

One of the most important parts of the audit is reviewing the site on smaller screens. Use Divi 5’s Customizable Responsive Breakpoints and the Responsive Editor to test the layout across active breakpoints.

Look for overlapping elements, hidden content that should be visible, text that is too small to read, awkward column stacking, and buttons that are too close together.

If typography needs adjustment, edit the Design Variables or Presets created earlier in the course whenever the change should apply globally. Use module-level changes only when the issue is specific to one section.

This review often reveals issues that are easy to miss when working primarily on a desktop canvas.

6. Use Divi’s Layers Panel And Inspector

Finally, use Divi 5’s built-in workflow tools to speed up the audit. Open the Layers panel to scan the structure of complex sections and understand the hierarchy of modules at a glance.

Then, use the Inspector to review styles, content, Design Variables, Presets, and other attributes across pages and elements.

These tools help you spot inconsistencies without manually opening every module and every option group.

Performance Optimization Checklist

With the site looking sharp and functioning correctly, shift your attention to performance. A faster website improves the user experience and can support better engagement, conversions, and search visibility.

Start in Divi > Theme Options > General > Performance. Review the available performance options and enable the settings that fit your site.

Important settings to review include Dynamic Module Framework, Dynamic Icons, and Critical CSS. Critical CSS helps by prioritizing the CSS needed above the fold and deferring the rest.

Set the Critical Threshold Height to a level that works for your layout. Medium is a practical starting point for many sites, but test after changing it.

You can also consider enabling options such as Defer jQuery and jQuery Migrate and Defer Gutenberg Block CSS. After enabling JavaScript or CSS deferral settings, test forms, menus, sliders, pop-ups, and third-party integrations to make sure nothing breaks.

Review the remaining performance options, activate the settings that fit your build, and save your changes.

Optimize Your Images

Next, optimize your images. Image files are often one of the easiest places to reduce page weight.

Resize images close to the largest size they need to display on the site. For example, if a hero image never displays wider than 1920px, avoid uploading a 4000px original. Use tools such as Photoshop, Affinity Photo, Squoosh, or TinyPNG to resize, compress, and export optimized files.

When possible, use modern image formats such as WebP, especially for large photographic images. Divi 5’s Aspect Ratio and Image Framing settings also help keep images consistent. You can define image proportions and control how an image fits inside its container.

This is especially useful in Loop Builder templates and grid layouts, where inconsistent image proportions can make cards look uneven. Finally, check image-heavy pages after optimization. Confirm that images still look sharp, load correctly, and do not cause layout shifts.

Accessibility And SEO Polish

A professional website should be usable by as many people as possible and easy for search engines to understand. These final checks improve both usability and discoverability.

Start with accessibility. Run the site through tools such as WAVE, axe DevTools, or Lighthouse. Look for issues such as insufficient color contrast, missing image alt text, keyboard navigation problems, unlabeled form fields, or interactive elements without clear accessible names.

Use Semantic Elements

Divi 5 helps here with Semantic Elements. Review key layout areas and assign appropriate HTML elements when they improve the structure of the page.

For example, use nav for primary navigation, section for thematic content groupings, article for standalone post or card content, and aside for secondary content. Choose tags based on the content’s purpose, not how it looks.

Also, review heading structure. Use one clear main H1 for the primary page title, then organize major sections with H2s and supporting sections with H3s. Logical heading hierarchy helps visitors, screen readers, and search engines understand the page.

Focus On SEO Basics

Write unique meta titles and descriptions for important pages. You can use an SEO plugin, such as Yoast SEO, Rank Math, or All in One SEO, or use Divi’s built-in SEO settings where appropriate.

Next, make sure your XML sitemap is enabled. If you use Yoast SEO, go to Yoast SEO > Settings > Site Features and confirm that XML sitemaps is turned on. Yoast provides a sitemap index, which is commonly available at /sitemap_index.xml.

Also, check your robots.txt file. Make sure it is not accidentally blocking important pages or your sitemap.

Final Design Refinements And Consistency Checks

With the visual, functional, performance, accessibility, and SEO checks complete, it is time for the final polish.

Go through the site one last time and make only necessary adjustments. Cross-check everything against your global design system. If you find inconsistencies, update Design Variables or Presets instead of making one-off changes whenever the fix should apply globally.

You can add subtle polish, such as small scroll animations or tasteful hover effects, but avoid overdoing it. The goal is clarity and confidence, not distraction.

Finally, read through the site copy again. Make sure the tone, terminology, button labels, and calls to action feel consistent from page to page. To move between pages without leaving the Visual Builder, use the Page Manager. Divi 5’s Speculative Prerendering can help make navigation inside the builder feel faster by preparing likely destinations in the background.

Testing Across Devices And Browsers

No website is finished until it has been tested in real-world conditions. Use Divi 5’s responsive tools, but do not stop there. Open the site on actual phones, tablets, laptops, and desktop displays. Test in multiple browsers, including Chrome, Safari, Firefox, and Edge.

You can also use tools such as BrowserStack, Sizzy, or ResponsivelyApp to preview the site across many screen sizes. Pay close attention to scroll behavior, touch interactions, typography size, sticky elements, forms, and off-canvas UI.

For better feedback, ask a few friends or colleagues to navigate the site and share what feels unclear. Fresh eyes often catch usability issues you have stopped noticing.

Pre-Launch Preparations

Before making the site public, take care of a few behind-the-scenes tasks. Secure the site with strong passwords and make sure SSL is installed correctly. Many hosts provide free SSL certificates, often through Let’s Encrypt, but confirm that the certificate is active and that the site loads over HTTPS.

Create a full backup before launch. If you built on a staging environment, migrate the site carefully to the live domain and confirm that links, media paths, forms, and Theme Builder assignments still work.

Set up required integrations, including contact forms, analytics, email marketing tools, CRM connections, and any third-party services your site depends on. Finally, implement any needed 301 redirects, review DNS settings, and confirm that your domain configuration is correct.

Going Live: Launch Steps

You have done the hard work. Now it is time to open your Divi 5 website to the world. Follow these final steps for a cleaner launch.

1. Make Your Site Public

Go to Settings > Reading in WordPress and make sure Discourage search engines from indexing this site is unchecked. This is one of the most commonly missed steps when launching a new WordPress site from staging or development.

2. Publish All Content And Templates

Double-check that all pages, posts, and Theme Builder templates are published and assigned correctly. Make sure your custom header, footer, single post template, archive templates, search results template, and 404 template are active where they should be.

3. Flush Permalinks

Go to Settings > Permalinks and click Save Changes. This refreshes WordPress’s permalink rules and can help resolve unexpected 404 errors after launch or migration.

4. Clear All Caches

Clear the Divi static CSS cache, any optimization plugin cache, your server-side cache, your CDN cache, and your browser cache. Then reload the front end and confirm the latest styles and scripts are loading.

5. Test One More Time

View the live site in a private or incognito window while logged out. Test navigation, forms, responsive layouts, pop-ups, dynamic content, search results, and checkout or booking flows if your site uses them.

6. Submit Your Sitemap

Submit your XML sitemap in Google Search Console. Open the Sitemaps report, paste your sitemap URL, and submit it. This helps Google discover your site structure and lets you monitor sitemap processing issues.

7. Announce The Launch

Share the new site on social media, your email list, and any relevant communities that would benefit from the content. Consider publishing a short launch post that explains what the site offers and directs visitors to the homepage.

8. Monitor Closely

Keep an eye on the site during the first 24–48 hours after launch. Watch analytics, form submissions, server logs, uptime monitoring, and Search Console for unexpected errors.

Divi 5 Mastery Course Wrap-Up

You have reached the end of the Divi 5 Mastery Course. From preparing a blank WordPress install to building a full coworking website, you have worked through the core pieces of a modern Divi 5 build.

You built a design system with Design Variables and Presets. You created layouts with Flexbox and CSS Grid. You used the Theme Builder, responsive tools, Canvases, Interactions, and the Loop Builder to build a site that is structured, reusable, and easier to maintain.

More importantly, you learned the reasoning behind the workflow. You did not just copy steps. You learned how the system fits together, which means you can apply the same process to future client sites, business sites, portfolios, blogs, and custom WordPress projects.

Your Divi 5 website now has a launch process: audit the design, test the functionality, optimize performance, review accessibility and SEO, check real devices, prepare the domain, and monitor the site after launch. Thank you for following through this entire series. Feel free to drop a link to your finished website in the comments below or reach out on our social media channels to share your thoughts.

The post Part 16: Auditing, Polishing, And Launching Your Divi 5 Website appeared first on Elegant Themes Blog.

You’ve also worked with Design Variables, Presets, Flexbox, CSS Grid, Canvases, Interactions, and the Loop Builder. This part is not about learning one more isolated feature. It is about learning how to move through Divi 5 like a power user.

A power user is not just someone who knows more features. It is someone who knows what to do first, what to reuse, what to automate, and where to look when something feels off. They plan before building. They style by reference instead of hardcoding values. They navigate by jumping rather than scrolling. They inspect their own work instead of guessing. Most importantly, they build systems that can be reused across pages, templates, and future projects.

This installment walks through that workflow as it applies to the coworking site we’ve been building. We’ll move between the Visual Builder, pages, and the Theme Builder as needed. The order below is the order a seasoned Divi builder tends to work in. It is not just a list of features. It is a workflow.

Plan Before You Build

The fastest builds start before the first module is styled. Wireframe each page first, not only to settle on a layout, but also to understand which design patterns will repeat. That matters because repeated patterns are what become Presets.

A wireframe tells you which modules you will use dozens of times and which modules you will use only once or twice. That distinction helps you decide where to invest your time.

Let The Wireframe Reveal Your Presets

If a Blurb module appears only once across the entire site, it does not need a deep library of presets. Style that Blurb, save the style as an Element Preset if you expect to reuse it, and move on.

However, Headings, Text modules, Buttons, Links, Rows, Columns, and Groups often appear everywhere. Those elements need more flexibility. A Heading might appear as a hero title, section title, card title, post title, and eyebrow label. Each of those treatments deserves a clear preset when it repeats.

This is why the course was built in the order it was. You created Design Variables in Part 3, Presets in Part 4, and then used both to build pages and Theme Builder templates.

That sequence worked because the coworking site was planned in advance. The design system was not created randomly. It was based on the patterns the site actually needed.

Avoid Building Presets You Do Not Need

When you build your own sites, resist the urge to create every possible preset before placing a module. That usually adds clutter. Instead, build the presets your wireframe points to. Then, add more only when the design calls for them.

For example, if a new heading treatment appears on the Events page and none of your existing presets cover it, that is the right time to create another preset. This keeps your design system lean. A tight preset library is faster to work with and easier to maintain than a sprawling library you have to search through every time you style an element.

Style By Reference, Not By Value

One of the biggest habits that separates a Divi 5 power user from a slower builder is styling by reference instead of by value.

Styling by value means typing the same hex code, font size, padding value, or border radius into individual modules again and again. Styling by reference means saving those values as Design Variables and applying them wherever needed.

When the source value changes, everything connected to it updates with it.

Use Design Variables As The Source

Design Variables can store reusable values such as colors, fonts, numbers, text, links, and images. They can also be used inside Presets, which makes them the foundation of a scalable design system. In this course, we created many Design Variables by hand so you could understand what each one does. In a real workflow, you can often move faster by using Divi 5’s variable generators.

The Color Palette Generator can create a relative color system based on your primary and secondary colors. The Sizing Variable Generator can create fluid sizing systems for font sizes, spacing, gaps, widths, border radius, border width, and generic clamp-based values.

That means much of the manual variable setup from earlier in the course can now be accelerated. You still need to make design decisions, but the generator can create a useful starting system in far less time.

Build The Chain Once

The workflow should form a chain:

• Design Variables store reusable source values.
• Option Group Presets apply those values to specific style groups.
• Element Presets combine those groups into reusable module or container styles.
• Modules and layouts use those presets during the build.

When you update a value at the top of the chain, everything downstream can update with it.

Instead of pasting the same hex code into many modules, use a named color variable. Instead of typing the same padding value into every card, use a spacing variable or preset. Instead of rebuilding the same button design from scratch, apply the button preset.

This is how your design system gets faster over time.

Extend Instead Of Rebuild

When a visual pattern repeats across several elements, build the first one carefully. Then, use Extend Attributes to carry the relevant attributes to the other instances. For example, if you have several cards styled at the Column level, do not rebuild that same Column styling on every card. Extend the design attributes from the first card to the others.

Extend Attributes lets you apply settings from a source element to matching targets. If the cards contain different text but should look identical, extend only the design attributes and leave the content untouched.

That is the difference between copying a card and extending a system.

Navigate At Speed

On a small page, clicking around is fine. On a real website, navigation time adds up quickly. You lose time when you scroll the Canvas looking for a section, dig through nested structure to select a module, or jump back to the WordPress dashboard just to open another page.

Divi 5 gives you several tools to keep you moving inside the builder.

Use Page Manager To Move Between Pages

The Page Manager lets you navigate pages and posts without leaving the Visual Builder. This keeps you in the same workflow when a task spans multiple pages. For example, if you are standardizing testimonial cards across several pages, you can jump from one page to another and keep working on the same design task instead of breaking your flow to navigate the dashboard.

Use The Command Center

The Command Center opens with Cmd + K on macOS or Ctrl + K on Windows. It works like a search and action bar for the builder. Use it to find settings, open pages, jump to builder tools, or trigger common actions without hunting through menus.

Once this becomes part of your workflow, you will spend less time clicking through panels and more time making the change you came to make.

Use Layers View For Complex Layouts

Layers View is essential on deeply nested pages. When Sections contain Rows, nested Rows, Columns, Groups, and modules, selecting the exact element on the Canvas can become imprecise. Layers View gives you the full hierarchy of the page. From there, you can select elements directly, rename them, reorder them, and understand the layout at a glance.

For complex layouts, Layers View is not just a convenience. It is how you stay oriented.

Read Your Own Work

When you open an element, you need to quickly understand how its current design was created.

That element might be your own work from three months ago. It might be a teammate’s work from yesterday. Either way, the slow method is the same: opening every option group and inspecting every field manually. Divi 5 gives you faster ways to understand the work in front of you.

Use The Modified Filter And Modified Indicators

The Modified Filter reduces the settings panel to values that have been changed from their defaults. Instead of reading the full panel, you can focus on the edits that matter. The Modified Indicator supports the same workflow. It appears as a small blue dot next to a setting or option group label when a value has been edited.

Together, these tools help you understand what was directly changed on an element. There is one important limitation to remember. The Modified Filter shows direct edits on the element. It does not necessarily show every style coming from an Element Preset or Option Group Preset.

That means an element can look heavily styled while the Modified Filter shows very little. In that case, most of the styling is likely coming from presets rather than direct field edits.

Use The Inspector To Trace Styles

To understand styles across the broader layout, use the Inspector. The Inspector helps surface attributes such as colors, fonts, styles, presets, and other settings used across elements. This is useful when you need to find inconsistencies.

For example, you might discover a stray off-brand color, a heading that is not using the right preset, or a module that still has a one-off value instead of a Design Variable.

Use the Modified Filter to understand direct edits on one element. Use the Inspector to understand patterns and inconsistencies across the layout. Together, they help you read your own work instead of guessing.

Reuse The System Instead Of Rebuilding It

The design system you built is not limited to this one coworking site. Export your Design Variables and Presets, import them into a new project, and you can start the next build with a working structure instead of a blank slate.

The real value comes from how the system is wired. Your Presets reference Design Variables. So, on a new site, you do not need to edit every preset right away. Start by updating the variables: brand colors, typefaces, spacing, borders, and sizing values.

Then, every preset that references those variables can adapt to the new project. A button preset that used the old primary color now uses the new one. A heading preset built on the old type scale now follows the new scale. A card preset that referenced the old border radius now inherits the updated radius.

That is the difference between reusing a design system and copying a layout file. You are not duplicating a finished look and hunting for every place it needs to change. You are carrying a reusable structure forward and repointing its references.

From Building To Launching With Divi 5

A power user workflow is less about any single feature and more about the order of operations. Plan first so you build the right pieces once. Style by reference so changes can propagate. Navigate by jumping instead of hunting. Inspect your work instead of guessing. Reuse your design system instead of rebuilding it from scratch.

Together, those habits turn a capable Divi 5 user into a faster and more consistent builder. Your coworking website is now built with a full design system, reusable templates, dynamic content, responsive layouts, and interactive elements. In the final part of this series, we’ll move from construction to readiness: auditing the site, polishing the details, and preparing it for launch.

The post Part 15: Divi 5 Power User Workflow appeared first on Elegant Themes Blog.

Standalone color generators can help with the math, but they often stop at a list of hex values. You still have to move those colors into your actual website, whether that means pasting values into a stylesheet, creating CSS variables by hand, or entering each one into your builder.

Divi 5’s Color Palette Generator turns that process into a built-in workflow. You provide one primary color, choose how the rest of the palette should relate to it, and Divi creates a connected color system using relative colors. The generated palette is saved directly to the Variable Manager as color variables.

That means your palette is not just a group of static swatches. It becomes part of your Divi 5 design system. You can use the colors across modules, presets, and Theme Builder templates, then update the system from one central place when the brand color changes.

This tutorial walks through the single-brand-color workflow in Divi 5. We will focus on turning one primary color into a usable palette, then applying and reusing that palette across other Divi 5 projects.

When To Generate A Color Palette From One Brand Color

The Color Palette Generator is best when you have one primary brand color and need a complete supporting palette around it. It is also useful when you are starting a new site, building a design system, or creating a reusable layout pack that needs to adapt to different brands later.

Use this workflow when:

• You have one main brand color and need supporting colors around it.
• You want tints, shades, tones, and transparent variants without building them manually.
• You want colors saved as reusable variables in Divi’s Variable Manager.
• You plan to use those variables inside Divi 5 Presets.
• You want the same design structure to work across multiple sites with different brand colors.

If you already have several locked brand colors from a client style guide, the one-color palette workflow may not be the best starting point. In that case, Color Scale or Color Harmony generation can be a better fit if those options are available in your Divi build. This post stays focused on the one-color-to-full-palette workflow.

Open The Color Palette Generator

The generator lives inside the Variable Manager. Here’s how to navigate to it:

1. Open any page in the Visual Builder.
2. Click the Variable Manager icon in the left sidebar.
3. Hover over the Colors group.
4. Click Generate Color Palette Variables.

The generator opens as a full-screen modal with settings on the left and a live preview on the right. If the regular page or element settings panel is still open, close it so the generator has more room.

Choose The Right Generator Type

For this tutorial, keep the generator set to Color Palette. This is the option designed to start with one primary color and generate a full supporting palette from it.

If your build includes Color Scales and Color Harmony, those are useful for different workflows. Color Scales are better when you already have individual colors and want tint, shade, and tone scales for each one. Color Harmony is better when you want to generate multiple related colors from a harmony model.

Use Color Palette when the starting point is one brand color and the rest of the system should be derived from it.

Set The Primary Color

The primary color is the seed for the entire palette. Divi uses this value as the foundation for the secondary color, tints, shades, tones, and transparent variants.

Enter your hex value in the Primary Color field. The preview panel updates immediately, so you can see how the generated palette changes around that new color.

Choose the color that best represents the brand. This should usually be the color you would use for key buttons, active states, brand accents, or the strongest identity moments on the site.

A very pale or very dark color can limit the usefulness of the generated steps. If your primary color sits close to white or black, test the preview carefully before saving the palette.

Choose A Palette Type

The Palette Type setting controls how the secondary color relates to the primary color. This is one of the fastest ways to change the overall feel of the palette.

Divi includes several color harmony options:

• Analogous: Uses a nearby hue on the color wheel for a calm, closely related palette.
• Complementary: Uses a hue opposite the primary color for stronger contrast.
• Split Complementary: Uses a hue near the complement for contrast that feels less direct.
• Triadic: Uses a three-point color relationship for a more energetic palette.
• Tetradic: Uses a four-point color relationship for a broader, more complex palette.

For most brand websites, Complementary or Analogous is a practical starting point. Complementary palettes give you a clear accent color. Analogous palettes tend to feel softer and more unified.

Triadic and tetradic palettes can work well for expressive brands, event sites, creative portfolios, or bold campaign pages. They usually need more restraint because they introduce more competing color energy.

Fine-Tune The Secondary Color

The palette type gives you the starting relationship. The secondary color controls let you adjust that relationship without abandoning it completely.

Use these settings when the generated secondary color is close, but not quite right:

• Secondary Color Hue Offset: Rotates the secondary color around the color wheel.
• Secondary Saturation Offset: Increases or decreases the secondary color’s intensity.

Small changes often work best. A few degrees of hue offset can make the secondary color feel more polished while keeping the same general harmony. Saturation adjustments are useful when the secondary color feels too loud or too dull for the brand.

Depending on the palette type, your build may also show controls for additional generated colors, such as tertiary or quaternary values. Use the same logic there: adjust only as much as the brand needs.

Set Shade, Tint, And Tone Counts

The next group of settings controls how many variations Divi generates for each base color. This is where one brand color starts becoming a full color system.

• Number Of Shades: Darker versions of the base color.
• Number Of Tints: Lighter versions of the base color.
• Number Of Tones: More muted versions of the base color.

A smaller palette is often easier to use. Start with two to four of each variation type, then add more only if the design needs them. Too many variables can make decisions harder later, especially for teams or client-managed sites.

Tints are useful for backgrounds, cards, and soft section treatments. Shades are useful for text, borders, buttons, and hover states. Tones help when a pure tint or shade feels too saturated for interface elements.

Adjust The Color Intensity

The intensity sliders control how far the generated colors move from the base color. They affect the strength of each step, not the number of steps.

The generator includes these controls:

• Shade Intensity: Controls how dark the shade steps become.
• Tint Intensity: Controls how light the tint steps become.
• Tone Intensity: Controls how muted or neutral the tone steps become.
• Alpha Intensity: Controls the opacity range of transparent variants.

Lower intensity creates subtler changes between colors. That works well for backgrounds, dividers, borders, and quiet UI details. Higher intensity creates more separation, which can help with hover states, active states, overlays, and high-contrast design moments.

Avoid pushing every intensity slider high by default. A useful design system needs a few strong colors, but it also needs quiet colors that can be used repeatedly without overwhelming the layout.

Customize Variable Names

The naming section controls how the generated variables are labeled. Clear names matter because these variables will appear throughout the builder when you apply colors to modules and presets.

The default naming is straightforward:

• Shades Prefix: shade-
• Tints Prefix: tint-
• Tones Prefix: tone-
• Alpha Suffix: alpha-

Most users should keep the defaults. They are easy to understand and match common design-system language.

Change the prefixes only when you already have a naming convention you want to preserve. For example, your team might use light-, dark-, muted-, or overlay- in an existing design system. Matching that language can make the generated variables easier to scan later.

Review The Color Preview

The right side of the modal shows the palette before you save it. Use this preview to check whether the generated colors are useful in real design situations, not just attractive as swatches.

Depending on your settings, you will see groups such as:

• Primary and secondary colors.
• Primary and secondary tints.
• Primary and secondary shades.
• Primary and secondary tones.
• Transparent alpha variants.

The Color Style Guide Preview shows sample text and background combinations. This is helpful for spotting combinations that feel too low-contrast, too saturated, or too heavy before you apply them across a page.

The preview is a good first pass, but it is not a replacement for accessibility testing. Before publishing, test key text and background combinations with a contrast checker, especially for body text, buttons, navigation, forms, and calls to action.

View The Generated CSS

To see how Divi defines each variable, click Show CSS at the top of the preview. The generated values show how the palette is built with HSL-based relationships.

You do not need to write or edit this CSS manually. The point is to understand what Divi is doing behind the scenes. The variables are built as related values, so the palette can stay consistent when the primary color changes.

This is the difference between a static list of hex codes and a color system. A static palette gives you individual values. A relative color system keeps those values connected.

Add The Palette To Your Site

When the preview looks right, click Add Variables To My Site in the top right of the preview panel.

Divi closes the modal and adds the generated colors to the Variable Manager. The generator updates the base color slots, including Primary, Secondary, Heading Text, Body Text, and Link. It also creates the additional tint, shade, tone, and transparent variables based on your settings.

After that, the colors are ready to use anywhere Divi supports color variables. You can apply them to backgrounds, text, borders, buttons, gradients, overlays, forms, and other module settings.

If the generator created more variables than you need, reduce the tint, shade, or tone counts and run the generator again. Matching variable names can update existing generated variables. Extra variables from an earlier, larger palette may need to be removed manually in the Variable Manager.

Use The Palette With Presets

The palette becomes more useful when you combine it with Divi 5 Presets. Variables store the color values. Presets decide where those colors are used.

For example, you might create:

• A Button Preset that uses the primary color for the background and a tint for the text.
• A Card Preset that uses a soft tint as the background and a shade for the border.
• A Heading Preset that uses the heading text variable.
• A Form Preset that uses tones for fields and a primary shade for focus states.

This keeps your design decisions reusable. Instead of applying the same color variables module by module, you apply presets that already reference the right variables.

If you want to build this into a broader system, pair the color palette with Divi 5’s Sizing System. Color variables handle the visual identity, while sizing variables handle spacing, type scale, gaps, widths, border widths, and radius values.

Reuse Your Color System On Other Sites

From here, modules, presets, and Theme Builder templates can all pull from the generated variables. The real payoff appears when you reuse the same design structure on another project.

Export your Design Variables and Presets together using Divi’s portability tools. The exported JSON file can carry the variable names, preset structure, and design relationships into another Divi 5 site.

On the receiving site, the layout and preset architecture stay intact. The brand colors can change.

Open the Variable Manager on the new site, hover over the Colors group, and click Generate Color Palette Variables again. Enter the new primary color, adjust the palette relationship, and click Add Variables To My Site.

For the cleanest result, use the same palette type and the same tint, shade, and tone counts as the original system. That helps Divi update matching variable names instead of leaving unused extras behind.

Every module or preset that references those variables can now reflect the new brand. The structure stays the same, while the color values change.

When You Need To Input Colors Individually

The Color Palette Generator solves the one-color-to-many problem. It is not always the right tool when a brand already has several locked colors.

If your brand guidelines already define a primary, secondary, accent, and neutral color, use a workflow that respects those fixed values. Depending on your Divi version, the Variable Generator may include additional color options such as Color Scales and Color Harmony.

• Color Scales: Use this when you already have individual colors and need tint, shade, or tone variations for each one.
• Color Harmony: Use this when you want to generate related colors from a broader harmony model.

The single-color Color Palette workflow is the right choice when one primary brand color should drive the rest of the system.

Turn One Brand Color Into A Working Design System

What used to be several separate jobs now happens inside one Divi 5 workflow. You choose a primary color, Divi generates a connected palette, and the result lands in the Variable Manager as reusable color variables.

The real value is not just speed. It is consistency. Your colors can live in one system, feed into presets, travel across layouts, and adapt to new brand colors without rebuilding every module from scratch.

Start with one color. Generate the palette. Save the variables. Then use those colors inside presets so the whole site follows the same design logic.

The post How To Turn One Brand Color Into An Entire Divi 5 Color Palette appeared first on Elegant Themes Blog.

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, and inspect gradients as a unified attribute.

What’s more, we added support for gradient variables. Use the same gradients throughout your website, and manage them easily in the variable manager.

Plus, gradients can now be used to fill text, along with new text-stroke and image-fill settings.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

New Gradient Options

Divi 5.7 is all about gradients. We added new ways to both manage and use gradients.

Gradient Field Type

The new gradient field combines gradient attributes into a single manageable field. Now you can interact with gradients in the same way you interact with other attributes.

Copy, paste, extend, inspect, and find and replace! You no longer need to manage a gradient’s internal attributes individually.

Gradient Variables

We added a new variable type: gradient variables. You can turn any gradient into a variable and use it throughout your website. When you edit a gradient variable, the gradient is updated across the site.

Since gradients can be used in new ways (more on that below), you’ll definitely want to keep things manageable. That’s the beauty of Divi 5’s variable and preset systems.

Gradient Picker Panel

Gradient options have been extended to all font groups (more on that below), and gradients can be edited in new contexts, such as in the variable manager.

We consolidated all gradient options into a new gradient picker panel; this way, you can edit gradients the same way everywhere.

It works just like the color picker panel, giving you access to all gradient options and variables in one place.

New Text Effect Settings

All text option groups have some new settings, including gradient fills, image fills, and text strokes.

Text Gradient and Image Fills

Now it’s easy to create visually striking text in Divi 5. You can fill text with gradients and images, and even use gradient variables.

Text Strokes

Text stokes are a small but useful addition. They are a great way to make text stand out against a busy background.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have You Tried Divi  5’s New Modules?

We recently added five new modules to Divi 5.

1. Create beautiful, animated timelines using the timeline module. This one works great with loops.
2. Add breadcrumbs to any page using the new breadcrumbs module; simple, but great for Theme Builder templates!
3. SVGs are great; lightweight and pixel-perfect. Now you can add SVGs and style them using native stroke and width settings using the SVG module.
4. Use the Table of Contents module to automatically generate clickable tables of contents; great for Theme Builder post templates.
5. Create beautiful image galleries directly from Instagram with the Instagram Feed module.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁

The post New Gradient Editor, Gradient Variables, Text Effects and More appeared first on Elegant Themes Blog.