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.8 update notification today.

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!

What’s New In Divi 5.8?

We implemented 66 bug fixes and improvements, along with a brand-new feature: Customizable Workspaces!

Some notable bug fixes include patches for several cache-related bugs that were causing styles to mysteriously go missing at night.

Customizable Workspaces

We released customizable workspaces in Divi 5.7.3!

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.

Take the full tour. 👇

What’s Coming Next?

We have many new features in the works, and some of them are right around the corner.

In the video below, I give you an early look at:

• New font options and variable font support.
• Loop Filter modules
• Gravity Forms, Fluent Forms, and Imagely modules.
• Tooltip module.
• Payment module.

There’s so much exciting stuff in the pipeline for Divi 5.

By the way, I ask an important question at the end of the video, so please share your answer in the comments.

Check out the sneak peek. 👇

Changelog

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

• Added Tooltip module.
• Fixed an issue where WordPress automatic update scrape requests could regenerate incomplete Divi 5 homepage CSS, causing builder styles to disappear.
• Fixed an issue where pages visited with specific URL parameters could generate invalid CSS for pages containing loops.
• Fixed VB perf regression by removing update-transient priming from perf-mode bootstrap and restored CI perf gate thresholds.
• Fixed an issue where a thin sliver of the next Group Carousel slide could show at certain viewport widths.
• D4 Search migration now keeps Search native and moves the legacy free-form CSS rule into module free-form CSS, rather than leaving it at the page level.
• Fixed an issue where saving a page in the Visual Builder could purge all LiteSpeed Cache entries instead of only the edited page.
• Fixed Button Options selection and global module sync tracking edge cases by aligning field change payload typing and handling immutable attribute trees correctly.
• Fixed an issue where Section Area Background Color could fail to apply in certain Theme Builder front-end layouts, causing sections to appear white.
• Fixed false CSS linter errors when using nested selectors without & in Free Form CSS and other Divi 5 CodeMirror CSS fields.
• Fixed the Image module lightbox not opening inside the Group Carousel after the carousel looped back to the first slide.
• Fixed workspace save not preserving the selected sidebar tab when multiple tabs are open in the same row.
• Fixed default Heading/Body global font variable labels, aligned VB/FE font resolution using shared/customizer store data, and resolved frontend fallback issues for default-like customizer font values.
• Fixed Contact Form 7 Styler button icon and rounded corners on hover.
• Fixed control layering in the Slider Module so arrows and dot navigation stay above high-z-index slide content.
• Fixed heading level set through Option Group or module presets not applying to rendered HTML on the frontend and Visual Builder.
• Fixed an issue where the Pagination module did not display custom Previous link text on hover.
• Fixed an issue where input fields could stop responding after saving the Visual Builder.
• Fixed an issue where the top-bar Clear Layout modal would not reopen after being closed.
• Fixed the Social Media Follow icon font size and icon color being unavailable for editing in the sticky state.
• Fixed an issue where Divi Cloud duplicate and copy actions could save empty layout content to the cloud when a layout failed to download or export correctly.
• Fixed an issue where Theme Customizer background settings could reset after activating a child theme.
• Preserved the parent theme background color and image when activating a child theme.
• Fixed a PHP deprecated warning when using custom CSS on the Contact Form module’s Contact Button field.
• Fixed an issue where the Layers panel could unexpectedly jump when activating modules that were already visible or when selecting modules directly inside Layers.
• Added a new workspace management system, allowing users to create customizable workspaces that encapsulate default builder settings and modal positioning.
• Added new command center comments for switching workspaces and updating existing workspaces.
• Auto-closing panels will no longer auto-close when docked.
• Fixed an issue where third-party shortcode modules could remain in backward compatibility mode in Divi 5 when content did not include a core Divi shortcode token.
• Fixed “create preset from current styles” not capturing nested composite group attributes when creating a group preset.
• Fixed dropdown panels jumping horizontally after entrance animation when dropdown alignment was set to center or end.
• Fixed an issue where the Loop Element setting could incorrectly appear in the Modified Styles filter with a reset option after the loop was turned off.
• Fixed Breadcrumbs modules so Justify Content works on newly inserted modules without toggling Layout Direction first.
• Fixed saved layouts not loading in the Visual Builder library on hosts with strict MySQL join limits, and added a clear error when the library query still cannot run.
• Added a Visual Builder filter so third-party extensions can append controls next to module field labels in the module settings modal, with documentation and a copy-paste example.
• Fixed icons sitting at the top of button-options fields when options used icons without label text.
• Fixed icon alignment in Visual Builder button-option controls so icon-only choices render vertically centered.
• Fixed a thin section divider seam that could appear during load and responsive rendering in Divi 5.
• Fixed an issue where group preset styles (including border radius) could fail to apply in the Visual Builder when preset class names were not attached correctly.
• Fixed incorrect heading font sizes on the front-end and in the Visual Builder when Text modules use option group presets, by removing preset-duplicate values from module attributes during import and at render time, so preset CSS is no longer overridden by module-level rules.
• Fixed SVG module stroke width control so users can no longer set negative stroke widths.
• Fixed the Layers View cursor freezing when dragging contact form fields (and other child modules) between modules after an invalid or blocked drop.
• Fixed false save confirmation when using Layers More Options on a global element that had already been saved.
• Fixed Theme Builder header sticky sections not sticking on scroll in the Visual Builder when editing a page.
• Fixed Timeline item date, title, and body text not appearing on the live page when the Timeline card background image parallax effect was enabled.
• Fixed an issue where Number Counter modules could switch to a default value on mobile tap when responsive hover values were not set.
• Fixed a Button module hover-spacing regression where disabled icons could still reserve icon-like horizontal space when only one custom padding was set.
• Fixed list item indent for ordered and unordered lists in Divi 5 on posts where the theme sidebar styles overrode module padding.
• Object Position responsive editing now shows the full focus-point UI and preview image on every supported responsive row in the Visual Builder, including custom wide breakpoints, and preview/spinner interactions switch the active breakpoint consistently.
• Fixed Video module responsive overlay images not appearing on the frontend when the desktop overlay image was empty, including object-shaped responsive thumbnail payloads. Hardened server-side image source normalization to prevent Visual Builder loading failures from malformed/object-shaped image src values.
• Fixed blank Layers panel labels for loop-enabled child modules when List Text (or equivalent title field) uses a loop dynamic content field such as Loop Post Title.
• Fixed an issue where shortcode-backed URL fields in Divi 5 could render malformed links by standardizing URL normalization before sanitization across affected rendering paths.
• Fixed invalid empty width and height CSS on the frontend after manually clearing sizing fields in the builder instead of using reset or the unit picker.
• Fixed the design settings for Fixed Sidebar Body Text so paragraph text inside widgets now updates consistently in both the Visual Builder and the frontend output.
• Fixed DeepHive companion PR handling so same-issue/same-branch dependency ordering feedback is treated as non-blocking without weakening true blocking review outcomes.
• Fixed the Toggle module grid column layout in the Visual Builder when changing layout while the toggle content is already open.
• Fixed Social Follow network custom attributes so rel and other link attributes apply to the icon and follow button links instead of only the list item wrapper.
• Fixed migrated background gradients rendering with incorrect length units by preserving and inferring gradient units.
• Fixed migrated Text module heading font style conversion so empty heading styles keep inherited text casing instead of forcing reset casing.
• Fixed interaction: Target Module list does not update when new modules are added to an existing page until save or reload.
• Fixed Search module Button Text font-weight not applying when Text Color was set to Light.
• Fixed Divi 5 Image module alignment so migrated custom spacing margins are preserved while SVG alignment behavior remains intact.
• Theme Customizer Body Font Weight now defaults to Regular and keeps the Customizer, frontend, and Visual Builder aligned when no custom weight is saved.
• Updated Divi 5 extension-module documentation with dedicated tutorials for enabling and customizing Layout and HTML settings groups.
• Fixed the Theme Builder “Load From Library” modal staying in light mode and showing hard-to-read tabs when the builder is set to Dark Mode.
• Fixed console errors on the Theme Options and Divi Library admin pages when using WordPress 6.9 or later.

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.8 Release Notes appeared first on Elegant Themes Blog.

But some projects need more variety than the default tools provide. Client sites, brand-heavy landing pages, 404 templates, service cards, feature grids, and editorial layouts often need icons and shapes that feel more specific.

That is where two Divi Marketplace extensions from Divi Den can help: Divi Icon Library and Divi Mask Library.

Divi Icon Library adds a searchable library of 14,000+ SVG icons directly inside the Visual Builder. Divi Mask Library adds 4,500+ hand-drawn SVG shapes you can save and apply as masks. Both are built for Divi 5, and both are designed to give you more visual options without leaving the builder.

In this Product Highlight, we will look at what each extension does, how they work, and a few practical ways to use them in real Divi 5 layouts.

Divi Icon Library: 14,000+ SVG Icons Inside The Visual Builder

Divi Icon Library adds a custom Icon Library module to Divi 5. Once the extension is active, the module appears in the Visual Builder alongside Divi’s native modules.

Think of it as a faster way to find and use custom SVG icons. Divi’s native SVG module is useful when you already have the SVG markup or file you want to use. Divi Icon Library gives you a searchable collection of SVG icons from inside the builder, so you can browse, select, and style an icon without sourcing one elsewhere.

When you add the module and open the icon picker, you get a searchable modal with three icon styles:

• Line: Stroke-based icons that work well for lightweight UI and outline styles.
• Shape: Solid icons that work well for bold visual accents.
• Filled: Two-tone icons with both stroke and fill controls.

A category sidebar helps narrow the library by topic, and the search updates as you type. That makes a 14,000+ icon library practical to use because you are not forced to scroll through the entire collection manually.

The advantage becomes clear when you need a specific symbol. A generic icon set may have a handful of business, social, or interface icons. This library gives you more room to match the icon to the site, industry, or message.

For example, if you are building a section about services, benefits, categories, or features, you can search for more specific terms and swap icons until the set feels balanced.

How The Icons Are Styled

The icons render as inline SVG, which means they stay sharp at any size and do not rely on icon fonts on the front end.

The module also includes the design controls you would expect from a Divi element:

• Color controls: Adjust stroke, line, fill, or accent colors depending on the icon style.
• Responsive sizing: Set the icon size and adjust it per breakpoint.
• Stroke width: Fine-tune line thickness for supported icon styles.
• Alignment controls: Position the icon inside its layout.
• Hover states: Create simple interactive color or styling changes when needed.

Not every icon style exposes the same controls. A solid shape icon does not need the same stroke settings as a line icon, for example. Choose the style that matches the design controls you need.

Divi Mask Library: 4,500+ Custom Masks For Divi 5

Divi Mask Library works differently from the icon extension. Instead of adding a new content module, it gives you a large library of SVG shapes that can be saved and applied as masks in Divi 5.

The library includes 4,500+ hand-drawn shapes across 56 categories. The shapes are CC0 licensed, which makes them usable for personal, client, and commercial projects without attribution.

The workflow starts outside the Visual Builder. Open the Mask Library page in WordPress, browse the cloud library, search by keyword, or filter by category. When you find a shape you want to use, save it to your site.

Those saved masks are stored locally in your WordPress database. That means the published page does not need to call an external cloud library just to render the mask.

Once saved, the masks appear in Divi’s mask workflow. You can apply them from the Mask Library option group on supported image-bearing modules, and saved masks also appear in Divi’s native Background > Mask picker.

Mask Controls

After applying a mask, you can adjust how it behaves. Common controls include:

• Size: Control how large the mask appears, including custom sizing.
• Position: Place the mask where it works best over the image or background.
• Repeat: Repeat the mask pattern when the design calls for it.
• Flip: Flip the mask horizontally, vertically, or both.
• Mode: Use normal or inverted masking.
• Rotate: Rotate the shape to fit the composition.

Those settings can be especially useful because masks rarely need to be used exactly as-is. A shape may work better flipped, rotated, resized, repeated, or inverted.

The mask controls also support responsive and hover-state workflows, so a mask can be adjusted for desktop, tablet, phone, or interactive states.

5 Practical Ways To Use Divi Icon Library And Divi Mask Library

These extensions are most useful when they make a real layout feel more intentional. Here are five examples that show how icons and masks can improve ordinary sections.

1. Create A 404 Page That Matches The Brand

A 404 page is a good place for a small visual idea. In this example, the layout uses three inline elements: a Text module with 4, an Icon Library module in the middle, and another Text module with 4.

The icon becomes the zero.

That one swap lets the page match the industry. A dental site can use a tooth. A cleaning company can use a spray bottle. A park service can use a tree. A fitness brand can use a dumbbell. The layout stays the same, but the message becomes more specific.

This is where a deep icon library helps. You are not just decorating the page. You are using the icon to make a generic template feel like it belongs to that site.

2. Replace Border Radius With A Background Mask

Border radius is useful, but it can only round corners. Masks can create more expressive shapes.

In this example, the hero section started with a background image shaped by border radius. Removing the radius turns it back into a plain rectangle. Applying a half-pill mask brings the original shape back, but with more flexibility.

Now the image shape is swappable. The same layout could use a blob, brush stroke, torn edge, organic curve, or geometric mask without rebuilding the section.

3. Add Character To An Image Collage

Image collages can easily become a grid of rectangles. Masks help break that pattern.

In this example, two images in a five-image collage were masked. One image uses a repeating semi-circle shape to soften the edge of the grid. Another uses an inverted line mask to create a cutout that feels related to the content.

The layout still feels structured, but it no longer looks like five flat image boxes.

4. Use Masks On Images And Backgrounds

Divi Mask Library can be useful in more than one context. You can apply masks to image modules and to background images.

That means a portrait, product photo, hero background, section background, or decorative image can share the same shape language.

This is helpful when you want a design motif to repeat across a page. A shape can appear in the hero, return in a card, and show up again in a background treatment.

5. Give Social Icons More Variety

Social icons are small, but they can still affect the tone of a design.

In this example, the section started with standard social icons. Divi Icon Library gives you more variations for the same social platforms, which makes it easier to match the icon weight, corner style, and overall personality of the layout.

That is useful when the default version is technically correct but visually not quite right.

Using The Divi Den Libraries

Both extensions install like other Divi Marketplace products.

After activation, Divi Icon Library adds the Icon Library module to the Divi 5 module list. Divi Mask Library adds its mask workflow for supported image-bearing modules and saved masks for Divi’s background mask picker.

The current Divi Den documentation lists both products as Divi 5-only. Divi 4 is not supported. Divi Den also lists WordPress 6.3+ and PHP 8.0+ as minimum requirements.

Pricing

At the time of writing, both extensions are listed on the Divi Marketplace at $5 each.

Each Marketplace listing includes:

• Unlimited website usage
• GPL licensing
• One year of support and updates
• 30-day money-back guarantee

Because pricing and licensing details can change, check the Marketplace pages before purchasing.

About Divi Den

Divi Den is a long-running third-party Divi creator and Divi Marketplace author. Its product lineup includes Divi Den Pro, Divi Icon Library, and Divi Mask Library. Divi Icon Library and Divi Mask Library solve two specific design problems: finding more icons and creating more custom image shapes. Both do that inside the Divi 5 workflow, which is what makes them useful.

Use the icon library when a design needs a better symbol. Use the mask library when a rectangle is not enough. Use both when you want a Divi 5 layout to feel more custom without leaving the Visual Builder.

The post Divi Product Highlight: Divi Icon Library & Divi Mask Library appeared first on Elegant Themes Blog.

That flexibility makes SVGs useful for more than crisp image quality. Since SVGs are built from paths and shapes, you can often adjust their fill, stroke, size, and animation without opening a design tool. Divi 5‘s new SVG Module brings that workflow into the Visual Builder. You can paste SVG markup directly, upload an SVG file when your WordPress site supports it, and style the graphic with Divi’s design controls.

What Is Divi 5’s SVG Module?

The SVG Module is a dedicated Divi 5 module for adding scalable vector graphics to a page.

Divi has long included an Image module, but SVGs are not quite the same as standard image files. They are vector-based graphics made from markup, paths, and shapes. That means they can scale without losing quality and can be styled in ways a flat image file cannot.

That distinction matters.

The Image module can display image files. The SVG Module is built for SVG-specific workflows. It lets you add SVG markup directly or use an uploaded SVG file, then control key SVG styles such as Fill and Stroke from inside Divi.

Where The SVG Module Works Best

Use the SVG Module when the graphic needs to stay sharp, scale cleanly, or match your design system.

• Logos and brand marks: Keep branding crisp across screen sizes and high-density displays.
• Icons: Add custom icons and style their fill or stroke to match your site’s palette.
• Decorative shapes: Use dividers, blobs, flourishes, and background accents that scale without blur.
• Custom illustrations: Paste SVG markup for graphics you want to style directly in the builder.

For photos, screenshots, and raster artwork, the Image module is still the right choice. For vector graphics that need styling control, the SVG Module is the better fit.

How To Use The Divi 5 SVG Module

The workflow is simple. Add the module, choose the SVG source, then style the graphic in the Design tab. No custom code is required for the module itself. The only extra setup you may need is WordPress SVG upload support, and only when you want to upload SVG files to the Media Library.

Add The SVG Module To Your Page

Click the gray plus icon inside any Row to open the module list. Type SVG in the search bar, or scroll until you find the SVG Module. Click the module to add it to your page.

The module loads and opens its settings panel. You can place it anywhere a standard Divi module works, including single-column rows, multi-column layouts, nested rows, Flexbox layouts, and Grid layouts.

Choose Your SVG Source

In the Content tab, the SVG Source setting gives you two ways to add your graphic:

• SVG Code: Paste valid SVG markup directly into the module.
• Uploaded SVG: Select an SVG file from the WordPress Media Library.

Both options can display the same graphic. The better choice depends on how you want to manage the asset.

Option 1: Paste SVG Code

Choose SVG Code when you want the fastest workflow and do not need to store the SVG as a separate Media Library file. Paste the full SVG markup into the field. The markup must be a valid <svg> element. Partial or broken SVG code will not render correctly.

This option does not require WordPress SVG upload support because you are not uploading a file to the Media Library. You can get SVG markup from tools like Figma, Adobe Illustrator, or icon libraries that offer copyable SVG code. Clean, simple SVGs usually work best because they are easier to style with Fill and Stroke.

Option 2: Upload An SVG File

Choose Uploaded SVG when you want to manage the graphic as a reusable file in the WordPress Media Library. This workflow is useful for shared brand assets, client-editable graphics, or SVGs that appear across multiple pages.

There is one important WordPress detail to know first: WordPress blocks SVG uploads by default for security reasons. That does not stop the SVG Code option from working. It only affects the Uploaded SVG workflow.

Do You Need To Enable SVG Uploads?

Not always. If you paste SVG markup into the SVG Code field, you do not need to enable SVG uploads in WordPress.

If you want to use Uploaded SVG, then your site must allow SVG uploads. The safer no-code path is to use a trusted plugin instead of adding custom PHP to your theme files. The screenshot below uses the File Upload Types by WPForms plugin to enable the SVG file type. After installing and activating it, go to Settings > File Upload Types, search for SVG, check the SVG option, and save your settings.

Use this only if your workflow needs SVG files in the Media Library. SVG files can contain scripts if they are not cleaned properly. Only upload SVGs from trusted sources, and use a plugin or workflow that sanitizes SVG files before they are added to your site.

Add A Title And Link When Needed

The Content tab also includes a Title field. Use it when the SVG communicates meaning, such as a logo, icon, or illustration that supports the content. The title can help with accessibility and may appear as a tooltip when someone hovers over the graphic.

The SVG Module also includes Link settings. Use them when the whole SVG should be clickable, such as a logo that links to the homepage or an icon that links to a social profile.

The SVG module is incredibly versatile. It can be used basically anywhere as a decorative component. Cards, hero section, highlights, and more. For this example, we are using a vegetable line art SVG as shown as a section divider.

And for that effect, it needs to go across the page. So, we went ahead and set the row’s width and max-width to 100vw, so it remains flush on both sides.

And because it is an SVG file, it will easily adapt to the size change without pixelating. Now, let’s dive into the design options available for the SVG itself.

Style SVGs In The Design Tab

After adding the SVG, open the Design tab. This is where the module becomes more useful than a static image. You can control SVG-specific styles like Fill and Stroke, then use standard Divi design settings for sizing, spacing, filters, transforms, and animation.

Control Fill

Fill controls the color inside closed SVG shapes. When you set Fill in the module, Divi can override fill values already defined in the SVG markup. This makes it easier to match the graphic to the page design without editing the original file.

For one-off graphics, a static color is fine. For a scalable design system, connect Fill to a color from your Design Variables. That keeps the SVG tied to your global color system.

When the variable changes, any SVG using that variable can update with it.

Control Stroke

Stroke controls the outline drawn along the SVG’s paths. The SVG Module gives you controls for stroke color, stroke width, and stroke style. Use these settings for line icons, outlined logos, illustrated details, and decorative graphics that need a consistent outline.

Stroke color can use a color variable, just like Fill. Stroke width can also be tied to a number variable. That turns the outline thickness into part of your design system instead of a one-off value.

Since we are using a simple line art illustration, we skipped applying a stroke.

Adjust Sizing And Spacing

The Sizing group controls the SVG module’s width, height, and responsive sizing behavior. Use fixed values for simple icons. Use percentages or advanced units when the SVG needs to scale with its container.

The Spacing group controls margin and padding around the module. Use spacing to give logos, icons, and decorative shapes room to breathe without changing the row or column settings.

Use Filters Carefully

Filters let you adjust the visual output of the module. Common options include hue rotation, saturation, brightness, contrast, and blend modes. These can be useful for decorative SVGs placed over colored backgrounds or layered sections.

Use filters carefully for logos and brand marks. A filter can change the appearance of a brand asset in ways that no longer match the original identity.

Transform The Module

Transform settings change the module’s presentation on the page. You can scale, rotate, skew, or move the SVG module without editing the SVG file itself. These controls affect the module wrapper, not each internal SVG path.

This works well for decorative shapes, background accents, and icons that could use a stronger overflow effect.

Add Animation

Animation adds entrance effects to the SVG module. You can choose effects like fade, slide, fold, roll, flip, bounce, or zoom. Then you can adjust timing, direction, delay, and duration.

This can help add subtle motion to UI icons and brand elements, as well as to larger decorative shapes, adding pizzazz to the site whenever needed.

Reuse SVG Styles With Presets

Once you have the SVG styled the way you want, save the work as a preset. Divi 5 gives you two useful preset workflows here: Option Group Presets and Element Presets.

Use Option Group Presets

Option Group Presets save one group of settings at a time. For example, you can save a Sizing preset, Spacing preset, Box Shadow preset, Filter preset, or other shared option group. Then you can reuse that same group in any module that supports it.

To create one, hover over the option group header in the Design tab. Click the preset icon, choose New Preset From Current Styles, name the preset, and save it. This is useful when you want the same spacing, sizing, filters, shadows, or border styles across different modules.

To reuse it on any module, simply select the preset from the same icon.

Use Element Presets

Element Presets save the full SVG Module design. That includes Sizing, Spacing, Filters, Transforms, Animation, and any option presets already used inside the module.

To create one, click the preset menu at the top right of the module settings panel. Choose New Preset From Current Styles, name the preset, and save it.

Every new SVG Module can then load that full design with a single click. To use it, click the same icon and select the preset you just created.

Handle Local Overrides

A preset does not mean every SVG has to look identical. If one icon needs a different Fill color, set that value directly on the module. The override applies only to that SVG. The preset can still control the other settings.

When the same override appears on several SVGs, save it as a new preset. That gives you a reusable variant instead of a collection of one-off edits.

This workflow uses both Design Variables and Presets. Design Variables store the raw values, such as brand colors, stroke widths, and spacing values. Option Group Presets reuse groups of settings that reference those values. Element Presets save the complete SVG Module design.

That creates a clean chain. Change a Design Variable, and the update can flow into the presets and modules that use it. This is much faster than editing each SVG manually across a large site.

Try The SVG Module In Divi 5 Today!

SVGs are ideal for logos, icons, line art, decorative shapes, and custom illustrations that need to stay crisp at any size. The SVG Module in Divi 5 gives those graphics a dedicated home in Divi 5. You can paste SVG markup directly, upload SVG files when your site supports them, style Fill and Stroke in the Visual Builder, and reuse the design with presets.

You do not need custom PHP to use the module. You only need WordPress SVG upload support if you want to use uploaded SVG files from the Media Library. For many workflows, pasting SVG code is enough. For asset libraries and client-managed graphics, use a trusted plugin to enable safe SVG uploads.

The post Exploring Divi 5’s New SVG Module appeared first on Elegant Themes Blog.

That matters most on responsive sites. A desktop header, dropdown menu, and mobile overlay do not always need the same structure. With the Link module, Dropdown module, Menu Loops, Canvases, and Interactions, you can build each version of the menu in the way that fits the screen.

In this post, we will build a responsive Divi 5 menu from start to finish. The desktop version uses looped menu links and optional dropdowns. The mobile version uses a separate Canvas that opens and closes with Interactions.

Divi 5’s New Menu Building Features

Responsive menus in Divi 5 are built from a set of focused tools. Each one handles a different part of the navigation workflow.

The Link module handles individual menu items. The Dropdown module handles flyouts and mega-menu panels. Menu Loops keep links connected to WordPress menus. Canvases hold off-canvas mobile menus. Interactions control how those hidden menus open and close.

The Link Module

The Link module lets you add a single customizable link anywhere in your layout. You can use it as a standalone navigation item, connect it to dynamic content, or pair it with a Menu Loop so one styled link repeats for each item in a WordPress menu.

In this post, we will use the Link module as the foundation for the desktop and mobile menu links.

When a Link module is connected to a Menu query, Divi can pull in the current menu item text and URL. That keeps the menu connected to Appearance > Menus, so future menu changes do not require rebuilding the header.

The Dropdown Module

The Dropdown module lets you add a submenu or mega-menu panel inside a parent element.

Place it under a parent Link module, then choose whether it opens on hover or click. The dropdown content is flexible. You can add a simple stack of links, or build a richer panel with rows, columns, images, text, icons, buttons, and other modules.

This gives you more control than a standard dropdown menu. You are not limited to a plain list of links.

Canvases

A Canvas is a detached workspace in Divi 5. You can build content on a Canvas the same way you build anywhere else in Divi, using sections, rows, columns, and modules. The difference is that the Canvas can stay separate from the Main Canvas while you work.

This makes Canvases useful for mobile menus, off-canvas panels, popups, and mega menus. The header stays clean, while the menu layout gets its own dedicated workspace. You can manage Canvases from the Canvas dropdown at the top of the Visual Builder. From there, you can add a Canvas, switch between Canvases, open Canvas Grid View, duplicate a Canvas, export it, or delete it.

Interactions

Interactions control behavior in Divi 5. Every Interaction has three main parts:

• Trigger Event: What starts the Interaction, such as a click, hover, page load, viewport event, or breakpoint change.
• Effect Action: What happens after the trigger fires, such as showing an element, hiding an element, toggling visibility, applying a preset, or changing an attribute.
• Target Module: The element affected by the action.

For this menu, Interactions will handle the mobile overlay. A hamburger icon will show the mobile menu Canvas, and a close icon inside that Canvas will hide it again.

Breakpoint triggers also help here. You can make sure mobile-specific behavior runs only on the screen sizes where that menu exists.

How To Create A Responsive Menu In Divi 5

Now let’s build the menu. The workflow starts in the Theme Builder. We will create a global header, build the desktop navigation, add dropdowns when needed, and then create a mobile menu on a separate Canvas.

Step 1: Open The Theme Builder

Go to your WordPress dashboard and open Divi > Theme Builder. Find the default website template, click Add Global Header, then choose Build Global Header. Divi opens the Visual Builder for the header template.

Using the Theme Builder keeps the navigation in one reusable template. That way, the responsive menu can appear across your site instead of being rebuilt page by page.

Divi 5 also lets you work with editable template areas directly alongside page content. That can be useful when you already built part of a header or footer on a page and want to move it into a template.

Step 2: Build The Header Structure

When the Visual Builder opens, Divi can show starter Flexbox templates. For this example, start with a multi-row header structure. We used a two-row layout, then duplicated one row to create three stacked rows:

• Row 1: Announcement bar.
• Row 2: Logo and call-to-action button.
• Row 3: Desktop menu links.

This build uses a centered header style. It works well for minimal, editorial, portfolio, and boutique-style websites. A left-aligned logo with navigation on the right is also a good option. The same Divi 5 menu features work either way.

Open the header section’s layout settings. Set the layout direction to Column, then add a 10px vertical gap between rows.

Next, add 10px of top and bottom padding to the section. This keeps the header compact without feeling cramped.

If you want a faster starting point, you can also use our free 20 Flexbox header layouts pack.

Before adding the header modules, set the section background. In this example, we used a gradient that moves from a dark neutral Design Variable to transparent, with both color stops set to 50%.

That clean color break helps the middle row feel lifted from the rest of the header.

Step 3: Add The Announcement Bar

The first row is a simple announcement bar. Use a single-column row. Set the column alignment and justification to center, then add a Text module. Keep the announcement short. It should support the header, not compete with the menu.

Use your brand font and a color variable from your design system. A smaller font size usually works best here. Set the top padding to 1em. In this example, the text line height handles most of the lower spacing, which keeps the announcement bar compact.

Step 4: Build The Logo And Button Row

The second row holds the logo and call-to-action button. Add a nested row with three columns. Set the row and its columns to use a horizontal layout so the columns sit side by side. Add a 10px gap between columns, then align and justify the contents to center.

In this example, the first column acts as visual spacing. The second column holds the logo. The third column holds the CTA button. Add a background color to the parent column or row so the middle header area stands apart from the surrounding section.

For the logo, add an Image module and link it to the homepage. A dynamic home URL works well because it keeps the logo link connected to your site setup.

In the third column, add a Button module. Use the Design tab to style the button color, font, border radius, and spacing. For this layout, we used a light button background with dark text so it stands out against the darker header row.

Step 5: Add The Desktop Menu Links

The third row is where the desktop navigation lives. Open the row’s Design tab and set Layout Direction to Row. This keeps menu items side by side rather than stacked vertically. Add a 10px gap and a subtle box shadow to help the menu row feel separate from the rest of the header.

Add a Link module inside the row. Style the font, size, color, hover state, and spacing to match your header design. The text can remain temporary until the menu loop is connected.

Enable The Menu Loop

Open the Link module’s Content tab and enable Loop Element. Set Query Type to Menu, then choose the WordPress menu you want to display.

Most navigation menus can use the default loop settings. Still, these options are useful when you need more control:

• Order By: Controls how menu items are sorted.
• Order: Controls ascending or descending order.
• Menu Items Per Page: Limits how many menu items the loop renders.
• Menu Item Offset: Skips a set number of menu items from the start.

For a simple desktop nav, leave the defaults in place.

Connect The Labels And Links

After the loop starts running, you may see the same placeholder label repeated across the menu. That happens because the text is still static. Open the Link module’s URL field and click the dynamic content icon. Choose Loop Menu Link so each repeated link gets its correct destination.

Then open the label or text field and choose Loop Menu Text. Now each repeated item uses the correct menu label.

From now on, changes in Appearance > Menus can flow into the header without editing each menu item in the Visual Builder.

Optional: Add Dropdowns To The Desktop Menu

A flat looped menu works well for simple navigation. For larger sites, you may want some items to open dropdowns or mega-menu panels. The setup needs a little planning.

If you place the same Dropdown module inside one fully looped Link module, the dropdown can repeat across every item. That is useful only if every menu item needs the same dropdown structure. For mixed navigation, use separate segments. Keep simple items in menu loops, then add static Link modules for the items that need custom dropdown content.

Plan The Menu Structure

Start by sketching the menu structure. For this example:

• Item 1 is a looped menu link.
• Items 2 and 3 are static Link modules with Dropdown modules inside.
• Items 4 and 5 return to a looped menu segment.

This setup gives you the benefits of a dynamic WordPress menu while still allowing custom dropdown panels for specific items. In WordPress, remove the planned dropdown items from the menu used by the loop, or create a separate WordPress menu that contains only the flat links. This prevents the same items from appearing twice.

Split The Menu Loop Into Segments

Back in the builder, turn off the loop on the existing Link module. Duplicate the Link module until you have the number of menu positions you need. For this five-item example, you will use four Link modules:

• One looped Link module for the first flat item.
• Two static Link modules for dropdown items.
• One looped Link module for the remaining flat items.

On the first Link module, enable the menu loop again. Set Menu Items Per Page to 1 so it only shows the first flat item.

Leave the second and third Link modules static. Those will become dropdown triggers. In the fourth Link module, enable the same menu loop and use Menu Item Offset to skip the items that have already been displayed. Adjust the offset and item count to match your exact menu structure.

Another option is to create two separate WordPress menus and assign each one to its own looped Link module. That avoids offset math, but it does mean managing more than one menu in WordPress.

Add The Dropdown Module

Select one of the static Link modules. In the Content tab, open the Elements area and click Add Element. Search for Dropdown and add the Dropdown module as a child element.

The Dropdown module starts as an empty container. Add simple links for a standard submenu, or build a richer mega-menu panel with rows, columns, images, headings, and buttons. In the Content tab, use the Background settings to add a color, gradient, image, pattern, or video background.

Next, open the Dropdown module’s Design tab and find the Dropdown settings. Useful options include:

• Dropdown Position: Choose whether the dropdown floats over the page or appears inline.
• Show Dropdown On: Choose hover or click behavior.
• Dropdown Direction: Choose whether the panel opens above, below, left, or right of the parent.
• Dropdown Alignment: Align the panel to the start, center, or end of the parent.
• Dropdown Offset: Set the gap between the parent and the dropdown panel.

For this desktop build, we used Floating, Hover, Below, Center, and a 15px offset.

Build The Dropdown Content

Inside the Dropdown module, add a three-column row. Place an image at the top of each column and a short heading below it. Adjust the horizontal and vertical gaps in the row and column Layout settings so the dropdown content feels balanced.

In each column’s Design tab, add a subtle border using a Design Variable. Once the first card looks right, duplicate it for the remaining columns.

To make the full column clickable, open the column settings. In the Content tab, add the destination to the Column Link URL field.

From there, style the spacing, border radius, shadows, and hover states until the dropdown matches your header design.

Repeat the same process for the second static menu item. At this point, the desktop menu has dynamic flat links and custom dropdown panels.

Make The Menu Responsive With A Mobile Canvas

The desktop menu is complete, but a wide dropdown layout can feel cramped on tablets and phones. For smaller screens, we will use a separate Canvas. This lets the mobile menu use a vertical layout, larger tap targets, click-based dropdowns, and a full-screen overlay without forcing the desktop header to change.

Step 1: Hide Desktop-Only Header Elements On Smaller Screens

Before building the mobile Canvas, hide the desktop-only parts of the header on tablet and mobile. In this example, the first and third columns in the logo row are hidden on smaller screens. That leaves the logo visible while removing the desktop CTA and spacing column.

Go to Advanced > Visibility for the elements you want to hide, then disable them on tablet and mobile. Use your custom breakpoints if your site needs more precise control.

Step 2: Add A Mobile Menu Canvas

Open the Canvas dropdown at the top of the Visual Builder and choose Add Canvas.

Name the Canvas Mobile Menu. If this header will be used across the site, enable Make Global. If the menu only belongs to one template, you can keep it local.

Leave the Canvas detached so it stays out of the Main Canvas while you build. If your Canvas settings include a z-index field, give it a high value so the menu can appear above the header and page content when opened.

Click Add Canvas. Divi opens the new Canvas workspace.

Step 3: Set Up The Mobile Menu Section

Inside the Mobile Menu Canvas, add or select the main Section and Row. The Section acts as the full-screen overlay. The Row and Column control how the menu content sits inside that overlay.

Open the Section’s Meta option group and give it a clear Element Label, such as Mobile Menu Section. This label makes the Section easier to find later when you create Interactions.

Style The Section

Open the Section’s Design tab. In the Layout settings, set Justify Content to Center.

In the Sizing settings, set Height and Max Height to 100vh so the menu fills the viewport.

Add a dark background color to the Section. Use a Design Variable if you already have a dark neutral in your color system.

Next, open the Column settings inside the Row. In the Design tab, go to Layout and set:

• Layout Direction: Column
• Justify Content: Center
• Align Items: Center
• Vertical Gap: 15px

This creates a centered vertical stack for the mobile menu.

Step 4: Add Mobile Menu Items

Add Link modules to the mobile menu column. You can reuse the same menu loop workflow from the desktop menu. Connect the URL field to Loop Menu Link and the label to Loop Menu Text.

The difference is in the layout. On mobile, the links run vertically and can use larger spacing to make them easier to tap. Copy the CTA button from the desktop header if you want it to appear in the mobile menu too. Paste it below the menu links, then remove any visibility setting that would hide it on tablet or mobile.

Step 5: Add A Close Button

The mobile overlay needs a clear way to close. Add an Icon module to the Canvas and choose a close or X icon. Style the icon to contrast with the dark background.

Set the icon size to around 24px, then add enough padding so the tap area feels comfortable on touch devices. Where possible, set the icon’s semantic element to button and add a clear accessible label such as Close menu.

Open Advanced > Position. Set the icon to Fixed, choose the Top Right origin, and set both offsets to 20px. Set a high z-index so the close icon stays above the menu content.

Step 6: Position The Mobile Menu As An Overlay

Before wiring up the Interactions, position the Mobile Menu Section as an overlay. Open the Mobile Menu Section settings and go to Advanced > Position.

Set Position to Fixed, choose the Top Left origin, and set the top and left offsets to 0.

Then open Design > Sizing and set the Section width to 100%. This helps the menu cover the viewport when it is shown by an Interaction.

Step 7: Add Dropdown Cards For Mobile

If your mobile menu needs dropdowns, add Dropdown modules inside the static Link modules just as you did on desktop. On mobile, set Show Dropdown On to Click. Touchscreens do not have reliable hover behavior, so click is the better choice.

Inside each dropdown, add the same content structure from the desktop menu. Then open the row settings and set Layout Direction to Column.

This stacks the dropdown cards vertically. Set Align Items to Center so each card keeps a consistent width. For this example, each card uses a max width of 150px.

Set the Dropdown module and the inner row width to around 175px so the stacked cards align cleanly.

If the dropdown feels too tall on smaller screens, make these adjustments:

• Hide decorative images on mobile using Advanced > Visibility.
• Reduce column padding to 8px or 10px.
• Lower the heading font size at the mobile breakpoint.
• Keep dropdown labels short so the menu stays easy to scan.

Step 8: Add The Close Interaction

The mobile menu is built. Now the open and close controls need to target it. Start on the Mobile Menu Canvas. Select the close icon and open Advanced > Interactions. Add a new Interaction with these settings:

• Admin Label: Close Mobile Menu
• Trigger Event: Click
• Effect Action: Hide Element
• Target Module: Mobile Menu Section

Now the close icon can hide the Mobile Menu Section.

Step 9: Add The Hamburger Trigger

Switch back to the Main Canvas from the Canvas dropdown. Add an Icon module next to the logo and choose a hamburger icon. Style it to match the header.

Use Advanced > Visibility to hide the hamburger icon on desktop and show it on tablet and mobile.

Where possible, set the hamburger icon’s semantic element to button and add an accessible label such as Open menu.

Add A Load Interaction To Keep The Menu Hidden

Select the hamburger icon and open Advanced > Interactions. Add the first Interaction:

• Admin Label: Hide Mobile Menu On Load
• Trigger Event: Page Load
• Effect Action: Hide Element
• Target Module: Mobile Menu Section

This acts as a safety step so the mobile menu starts hidden when the page loads.

Add The Click Interaction To Open The Menu

On the same hamburger icon, add a second Interaction:

• Admin Label: Open Mobile Menu
• Trigger Event: Click
• Effect Action: Show Element
• Target Module: Mobile Menu Section

Use breakpoint settings so this Interaction applies only on tablet and mobile.

Now the hamburger icon opens the menu, the close icon hides it, and the desktop header stays unaffected.

Responsive Menu Best Practices

A responsive menu should do more than fit the screen. It should stay easy to update, easy to tap, and easy to understand.

• Use WordPress menus for dynamic links: Menu loops help your header stay in sync with Appearance > Menus.
• Keep desktop and mobile structures separate when needed: A detailed desktop dropdown may not be the best mobile experience.
• Use click behavior on touch screens: Hover-based dropdowns are unreliable on phones and tablets.
• Label important targets: Element Labels make Interactions easier to configure and troubleshoot.
• Test tap targets: Icons should be large enough to tap comfortably and have sufficient padding around them.
• Use accessible labels: Hamburger and close icons should communicate their purpose to assistive technology.
• Check every breakpoint: Test desktop, tablet, and phone layouts before publishing.

A little structure up front makes the menu easier to maintain later.

Create Responsive Menus In Divi 5 Today!

Navigation is one of the first things visitors use on a website. A good menu should stay clear on desktop, adapt cleanly on smaller screens, and remain easy to update as the site changes. Divi 5 gives you the pieces to build that system visually. Use Link modules and Menu Loops for dynamic navigation. Use Dropdown modules for richer desktop menus. Use Canvases and Interactions for mobile overlays.

The result is a responsive menu that works across screen sizes without custom code, extra plugins, or duplicated manual updates.

The post Creating A Responsive Menu In Divi 5 (Using New Menu Features) appeared first on Elegant Themes Blog.

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.