Preview

Here’s a quick look at the 4 Tabs + Nested Elements designs included in the pack. The download is further down the post.

Download 4 Tabs + Nested Elements For Divi 5

Get all 4 designs 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 (5 Exports)

After you download and unzip the file, you’ll find 4 styled Tabs + Nested Elements section exports, plus 1 file containing all layouts.

Styled – Tabs + Nested Elements Section 1 to 4 (4) → Four fully styled tab section layouts with nested content areas, imagery, cards, buttons, structured text, strong hierarchy, and clean spacing that you can use as-is or customize.

Styled – Tabs + Nested Elements Sections (All) → Imports all 4 designs into your Divi Library at once.

How To Use The Tabs + Nested Elements Designs

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 Tabs + Nested Elements JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Tabs + Nested Elements Section To Any Page

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

Click Add From Library and select one of your Tabs + Nested Elements 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 headings, tab labels, body copy, buttons, links, service descriptions, feature details, portfolio text, captions, and supporting content so the section matches your brand and message. Then swap in your own images, icons, nested modules, calls to action, or supporting visuals as needed.

Because these designs rely on tabbed navigation, nested elements, and clear visual hierarchy, it’s best to replace content one tab at a time. This helps preserve the relationship between each tab label, its content panel, imagery, buttons, and supporting layout elements.

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

4. Adjust Styles (Optional)

These Tabs + Nested Elements designs are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, borders, spacing, backgrounds, images, buttons, tab states, active tab styling, and nested module styles as needed using the settings in the Design tab.

To change typography, open any Text, Heading, or Tabs 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 section styling, open the tabs, row, column, group, or nested module you want to adjust and use the Content and Design tabs to tweak Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.

If your section uses nested images, cards, buttons, text blocks, service details, multi-column content, tabbed galleries, or comparison panels, keep those relationships in mind as you edit so the layout remains intentional, readable, and balanced.

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

Tips For Effective Tabs + Nested Elements Sections

Tabs + Nested Elements sections work best when they group related information into clear, easy-to-browse categories. Use these quick tips to keep your sections clean, useful, and easy to customize.

Keep Tab Labels Clear

Tab labels should be short, specific, and easy to understand. Use labels that help visitors know exactly what type of content they’ll see before they click.

Use Nested Elements With Purpose

Nested elements can make each tab more useful, but they should support the content. Add images, buttons, cards, columns, or supporting details only when they help visitors understand the section faster.

Create A Clear Visual Hierarchy

Use title size, color, spacing, active tab styling, imagery, and button placement to guide visitors through each tab panel. The most important details and calls to action should be easy to spot.

Keep Content Consistent Across Tabs

Tabs feel more polished when each panel follows a similar structure. Keep headings, images, text lengths, cards, and buttons balanced so switching between tabs feels smooth and intentional.

Check The Layout On Mobile

Tabs + Nested Elements sections can change noticeably on tablet and phone screens as tab labels wrap and nested content stacks. Review your layout on smaller devices to ensure tab labels remain readable, content feels balanced, images crop well, and buttons are easy to tap.

Start Building In Divi 5 Today!

These 4 Tabs + Nested Elements designs give you a fast way to build polished, interactive sections for service breakdowns, product details, feature comparisons, process sections, portfolio highlights, FAQs, team information, agency websites, landing pages, and more. Swap in your content, customize the styling if needed, and you’ll have a professional section ready in minutes with Divi 5’s Visual Builder.

The post 4 Tabs + Nested Elements For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

That matters because the generated colors are not just static swatches. They become reusable color variables you can apply across modules, presets, layouts, and Theme Builder templates. When your design uses those variables, you can update the palette from one place instead of replacing individual color values by hand.

In this post, we’ll look at how Divi 5’s Color Palette Generator works, what the main settings do, and five generated palettes you can use as starting points for your own projects.

What Divi 5’s Variable Generator Does

The Variable Generator lives inside Divi 5’s Variable Manager. It can generate both sizing systems and color palettes, but this post focuses on the color workflow.

For color palettes, you choose a primary color and adjust the generator settings. Divi then creates a connected palette with base colors, tints, shades, tones, and alpha variants. Those colors are added to the Colors group in the Variable Manager so you can reuse them throughout the builder.

Subscribe To Our YouTube Channel

The system works because Divi 5’s relative color tools are built around HSL. Hue controls the color family. Saturation controls how vivid or muted the color feels. Lightness controls how dark or light it becomes. Opacity controls transparency.

Because generated colors can be based on a primary color through HSL relationships, the palette stays connected. Change the base color, and related variables can keep their relationships instead of becoming a disconnected set of hex values.

That is the difference between a static palette and a design-system palette. A static palette gives you individual colors. A relative palette gives you colors that are designed to work together.

You can still fine-tune the output. The generator gives you controls for palette type, hue offsets, saturation offsets, variation counts, intensity, alpha variants, and naming. That means you can start quickly, then refine the palette until it fits the brand.

Once you save the palette, the generated variables are ready to use in Divi’s color fields. You can apply them to backgrounds, text, borders, buttons, gradients, overlays, shadows, forms, and presets.

The same Variable Generator also includes sizing workflows for font sizes, spacing, gaps, border radius, and other design values. We will stay focused on color here, but the release post covers the sizing system in more detail. For a deeper look at HSL, read our guide on building a dark color palette with Divi 5’s relative colors.

How To Use The Color Palette Generator

To open the Color Palette Generator, open the Variable Manager in the Visual Builder. Hover over the Colors group header and click the Generate Color Palette Variables button that appears.

The generator opens with the variable type set to Color Palette.

The left side contains the settings. The right side shows a live preview of the generated palette. As you adjust the settings, the preview updates so you can judge the colors before adding them to your site.

Primary Color

The Primary Color is the anchor for the palette. Tints, shades, tones, alpha variants, and related colors are generated from this starting point.

Choose a color that represents the brand well. Very pale or very dark colors can limit the usefulness of some generated variations, so check the preview carefully before saving.

Palette Type

The Palette Type controls how the generated colors relate to the primary color. You can use harmony models such as Analogous, Complementary, Split Complementary, Triadic, and Tetradic depending on how simple or varied the palette should feel.

Analogous palettes tend to feel calm and connected. Complementary palettes create stronger contrast. Split Complementary, Triadic, and Tetradic palettes introduce more color variety, which can work well for larger or more expressive designs.

Hue And Saturation Offsets

The hue offset controls shift generated colors around the color wheel. The saturation offset controls make those generated colors more vivid or more muted compared to the primary color.

Small changes usually work best. A few degrees of hue offset can make an accent color feel more natural. A small saturation reduction can keep a secondary color from competing too strongly with the primary.

Shade, Tint, And Tone Counts

The variation count settings control how many supporting colors Divi generates for each base color.

• Number Of Shades: Creates darker versions of the base color.
• Number Of Tints: Creates lighter versions of the base color.
• Number Of Tones: Creates more muted versions of the base color.

A large palette gives you more flexibility, but it also gives you more variables to manage. Start with the smallest useful set, then add more steps only when the design needs them.

Shade, Tint, Tone, And Alpha Intensity

Intensity controls how far each generated variation moves from the base color.

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

Alpha variants are useful for overlays, glows, shadows, soft borders, and layered backgrounds.

Variable Names

The naming controls let you customize prefixes and suffixes for generated variables. Defaults such as shade-, tint-, tone-, and alpha- are easy to understand.

Change these only if your site already uses a different naming convention. Clear names make variables easier to find later when you are applying colors inside modules and presets.

Add The Variables To Your Site

Once the preview looks right, click Add Variables To My Site. Divi saves the generated palette to the Colors group in the Variable Manager.

The exact set of variables depends on your settings. If you generate more variables than you need, reduce the counts and generate a smaller palette. If matching variable names already exist, review the confirmation prompts carefully so you understand what will be added or replaced.

Learn Everything About Divi 5’s Color Palette Generator

Before You Use A Generated Palette

A generated palette is a strong starting point, but it still needs design judgment. Review the palette before applying it across a live site.

Check these details first:

• Contrast: Test important text and background combinations with a contrast checker.
• Role: Decide which colors are for backgrounds, buttons, borders, headings, links, and subtle UI details.
• Restraint: Do not use every generated color just because it exists.
• Presets: Apply colors through Divi 5 Presets so your design choices stay reusable.
• Variables: Use the generated variables instead of hardcoded color values whenever possible.

This turns the palette into a working design system instead of a decorative color board.

5 Color Palettes Generated With Divi 5’s Variable Generator

Each palette below uses a different palette type or relationship style. Use the settings as starting points, then adjust the offsets, counts, and intensities to fit your own brand.

Palette 1: Analogous — Warm And Welcoming

Settings Used:

• Primary Color: #E8735A
• Palette Type: Analogous
• Secondary Color Hue Offset: 30
• Secondary Saturation Offset: 0
• Number Of Shades: 4
• Number Of Tints: 5
• Tint Intensity: 60
• Shade Intensity: 50

Why It Works: The coral primary moves into a nearby warm secondary color, which keeps the palette connected and friendly. The extra tint step gives you more light values for section backgrounds, cards, and soft visual breaks.

Best For: Hospitality brands, wellness sites, food blogs, boutique hotels, and personal brands that need warmth without feeling loud.

How To Use It: Use the primary color for buttons and key accents. Use the light tints for backgrounds and cards. Save the darker shades for text, borders, hover states, and small emphasis details.

Palette 2: Custom Complementary — Bold And Expressive

Settings Used:

• Primary Color: #C2185B
• Palette Type: Complementary
• Secondary Color Hue Offset: 75
• Secondary Saturation Offset: 0
• Number Of Shades: 3
• Number Of Tints: 5
• Shade Intensity: 40
• Tint Intensity: 40

Why It Works: This setup uses the Complementary palette type but customizes the hue offset so the secondary color lands closer to a warm gold than a strict opposite-color complement. The result is bold, polished, and easier to use than a harsh direct contrast.

Best For: Fashion, beauty, luxury ecommerce, boutique creative agencies, and campaign pages that need strong visual personality.

How To Use It: Use magenta for brand presence and gold for high-value accents, badges, buttons, or featured calls to action. Keep larger background areas light so the palette does not become too heavy.

Palette 3: Split Complementary — Fresh And Versatile

Settings Used:

• Primary Color: #2E86AB
• Palette Type: Split Complementary
• Secondary Color Hue Offset: 150
• Tertiary Color Hue Offset: 210
• Secondary Saturation Offset: 0
• Tertiary Saturation Offset: 0
• Number Of Shades: 4
• Number Of Tints: 4
• Shade Intensity: 40
• Tint Intensity: 50

Why It Works: The blue primary is steady and versatile, while the split accents add warmth and contrast. The palette has enough range for more complex page sections without feeling random.

Best For: Creative agencies, portfolio sites, SaaS products, education brands, and service pages that need more than two colors.

How To Use It: Use blue as the main brand color. Use the red accent sparingly for highlights or important calls to action. Use the gold range for supporting accents, icons, or secondary labels.

Palette 4: Triadic — Balanced And Expressive

Settings Used:

• Primary Color: #3D5A80
• Palette Type: Triadic
• Secondary Color Hue Offset: 120
• Tertiary Color Hue Offset: 260
• Secondary Saturation Offset: 0
• Tertiary Saturation Offset: 0
• Number Of Shades: 4
• Number Of Tints: 4
• Shade Intensity: 35
• Tint Intensity: 50

Why It Works: The steel blue primary creates a calm base, while the warm and earthy supporting colors give the palette more range. Lower shade intensity keeps the darker values useful instead of making them too dense.

Best For: Corporate sites with a human tone, healthcare brands, SaaS dashboards, education platforms, and professional services.

How To Use It: Use blue for structure and trust. Use rose for emphasis and human-centered moments. Use the green or olive range for secondary UI, success states, or grounded section accents.

Palette 5: Tetradic — Rich And Multidimensional

Settings Used:

• Primary Color: #2D6A4F
• Palette Type: Tetradic
• Secondary Color Hue Offset: 90
• Tertiary Color Hue Offset: 180
• Quaternary Color Hue Offset: 270
• Number Of Shades: 0
• Number Of Tints: 4
• Number Of Tones: 4
• Shade Intensity: 35
• Tint Intensity: 50

Why It Works: The forest green primary expands into a richer set of supporting colors. Since the base colors are already dark, skipping shades keeps the palette more practical. The tints carry the lighter end of the system and make the palette easier to use in real layouts.

Best For: Luxury brands, premium editorial sites, immersive landing pages, event sites, and complex multi-section layouts.

How To Use It: Choose one dominant color and treat the others as accents. Tetradic palettes can become overwhelming if every color competes at once. Use tints and tones for larger areas, then reserve the deepest colors for emphasis.

How To Apply Your Generated Palette

Once you generate a palette and save it to the Variable Manager, the next step is applying it through your design system.

For the cleanest workflow, use generated color variables inside Divi 5 Presets. For example, a Button Preset might use the primary color for its background, a light tint for its text color, and a darker shade for its hover state. A Card Preset might use a tint for the background, a tone for the border, and a shade for the heading.

To show the basic idea, we applied Palette 1, the warm coral analogous palette with primary color #E8735A, to an existing design. Open the Variable Manager, update the relevant color variables, and review the modules and presets that reference those variables.

The key phrase is that reference those variables. A generated palette does not automatically recolor hardcoded values. The update flows through the parts of the site that use the variables. That is why Design Variables and Presets are strongest together. Variables store the color values. Presets decide where those values are used. If your site is built around that structure, changing the palette becomes much faster.

If your site isn’t set up that way yet, Divi 5 Mastery Course Part 3 walks you through building a complete variable system from scratch.

Try Divi 5’s Color Palette Generator Today!

The five palettes here are starting points. Each one begins with the same workflow: choose a primary color, choose a palette type, adjust the settings, and let Divi generate the related variables. The value is not just speed. It is control.

You can swap the primary color, adjust an offset, reduce the number of shades, increase the tint range, or change alpha intensity without rebuilding the palette manually. Use the generator to create the palette. Use Design Variables to manage the colors. Use Presets to apply those colors consistently across your site.

The post 5 Color Palettes Generated With Divi 5’s Variable Generator appeared first on Elegant Themes Blog.

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.