This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5, you’ll see a version 5.7 update notification today.

What’s New In Divi 5.7?

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

The majority of our team is focused on bug fixing and overall stability. However, after months of doing nothing but fixing bugs, we are slowly transitioning back to feature development.

That means the rate of innovation will accelerate significantly over the next few months.

If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us!

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

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

Gradient options have been consolidated into a new gradient picker panel, and with the introduction of a new gradient field type, gradients are now easier to manage than ever. You can copy, paste, extend, find, replace, and inspect gradients as a unified attribute.

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

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

Take the full tour. 👇

What’s Coming Next?

The web design world is changing.

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

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

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

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

Check out the sneak peek. 👇

Changelog

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

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

Jump Into Divi 5 Today

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

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

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

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

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

Preview

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

Download 6 Photo Background Heroes For Divi 5

Get all 6 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder.

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (7 Exports)

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

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

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

How To Use The Photo Background Heroes

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

1. Import Sections Into The Divi Library

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

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

2. Add A Photo Background Hero To Any Page

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

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

3. Swap The Content

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

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

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

4. Adjust Styles (Optional)

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

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

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

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

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

Tips For Effective Photo Background Heroes

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

Choose A Strong Background Photo

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

Keep Text Readable

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

Create A Clear Visual Hierarchy

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

Balance The Photo With The Content

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

Check The Layout On Mobile

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

Start Building In Divi 5 Today!

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

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

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

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

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

The Pre-Launch Checklist

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

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

Step Away Before You Audit

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

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

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

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

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

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

Use Your Power User Workflow

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

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

Visual And Functional Audit

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

Step-By-Step Audit Checklist

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

1. Review Every Page For Consistency

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

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

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

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

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

2. Check Header And Footer Behavior

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

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

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

3. Test All Interactive Elements

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

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

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

4. Check Content Accuracy

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

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

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

5. Review Mobile And Tablet Layouts

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

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

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

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

6. Use Divi’s Layers Panel And Inspector

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

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

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

Performance Optimization Checklist

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

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

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

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

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

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

Optimize Your Images

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

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

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

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

Accessibility And SEO Polish

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

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

Use Semantic Elements

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

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

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

Focus On SEO Basics

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

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

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

Final Design Refinements And Consistency Checks

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

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

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

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

Testing Across Devices And Browsers

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

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

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

Pre-Launch Preparations

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

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

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

Going Live: Launch Steps

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

1. Make Your Site Public

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

2. Publish All Content And Templates

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

3. Flush Permalinks

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

4. Clear All Caches

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

5. Test One More Time

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

6. Submit Your Sitemap

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

7. Announce The Launch

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

8. Monitor Closely

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

Divi 5 Mastery Course Wrap-Up

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

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

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

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

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

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

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

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

Plan Before You Build

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

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

Let The Wireframe Reveal Your Presets

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

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

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

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

Avoid Building Presets You Do Not Need

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

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

Style By Reference, Not By Value

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

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

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

Use Design Variables As The Source

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

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

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

Build The Chain Once

The workflow should form a chain:

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

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

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

This is how your design system gets faster over time.

Extend Instead Of Rebuild

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

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

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

Navigate At Speed

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

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

Use Page Manager To Move Between Pages

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

Use The Command Center

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

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

Use Layers View For Complex Layouts

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

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

Read Your Own Work

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

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

Use The Modified Filter And Modified Indicators

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

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

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

Use The Inspector To Trace Styles

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

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

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

Reuse The System Instead Of Rebuilding It

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

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

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

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

From Building To Launching With Divi 5

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

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

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

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

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

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

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

When To Generate A Color Palette From One Brand Color

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

Use this workflow when:

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

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

Open The Color Palette Generator

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

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

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

Choose The Right Generator Type

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

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

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

Set The Primary Color

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

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

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

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

Choose A Palette Type

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

Divi includes several color harmony options:

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

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

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

Fine-Tune The Secondary Color

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

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

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

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

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

Set Shade, Tint, And Tone Counts

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

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

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

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

Adjust The Color Intensity

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

The generator includes these controls:

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

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

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

Customize Variable Names

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

The default naming is straightforward:

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

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

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

Review The Color Preview

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

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

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

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

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

View The Generated CSS

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

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

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

Add The Palette To Your Site

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

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

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

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

Use The Palette With Presets

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

For example, you might create:

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

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

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

Reuse Your Color System On Other Sites

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

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

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

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

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

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

When You Need To Input Colors Individually

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

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

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

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

Turn One Brand Color Into A Working Design System

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

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

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

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

Gradient options have been consolidated into a new gradient picker panel, and with the introduction of a new gradient field type, gradients are now easier to manage than ever. You can copy, paste, extend, find, replace, and inspect gradients as a unified attribute.

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

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

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

New Gradient Options

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

Gradient Field Type

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

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

Gradient Variables

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

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

Gradient Picker Panel

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

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

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

New Text Effect Settings

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

Text Gradient and Image Fills

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

Text Strokes

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

Try Divi 5 Today

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

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

Have You Tried Divi  5’s New Modules?

We recently added five new modules to Divi 5.

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

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

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

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

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

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

The moment someone clicks or tabs into a field, the focus state takes over. If you have not designed that state, the browser fills in the gap with its own default outline. Sometimes that default is visible enough. Often, it is too thin, too low-contrast, or out of place with the rest of the design.

Divi 5 gives you visual control over form focus states without custom CSS. With the new form field options, Focus mode, Design Variables, and Presets, you can build focus styles that are clearer, more consistent, and easier to reuse across your site.

Why Focus States Matter For Accessible Forms

A focus state shows which field or control is currently active. This matters for anyone using a keyboard, switch device, voice control, screen reader, or other assistive technology. It also helps mouse and touch users understand where they are when a form becomes complex.

Default browser focus styles vary. One browser might use a blue outline. Another might use a dotted border. The thickness, contrast, and offset can change across browsers and operating systems. Those defaults are better than no focus indicator, but they rarely match your brand or your page background.

The goal is not to remove the default outline and replace it with something prettier. The goal is to create a focus state that is easy to see, works across different backgrounds, and still fits the design.

What Makes A Good Focus State?

A good focus state should make the active field easy to spot. This is especially important for keyboard users, screen reader users, and anyone navigating a form without a mouse.

WCAG requires visible focus indicators for keyboard navigation. It also expects important non-text visual cues, such as focus borders and outlines, to have enough contrast against nearby colors. You do not need to turn the form into an accessibility spec sheet. A practical focus state should do three things:

• Stand out clearly from the resting field style.
• Use enough contrast to remain visible against the field and page background.
• Keep field text and placeholder text readable in both default and focused states.

In practice, that usually means using more than color alone. A stronger border, a subtle background change, or a visible outline can help users understand exactly which field is active.

How Divi 5 Handles Form Field States

Divi 5 gives form styling a more consistent structure across form-based modules. Instead of relying on one broad Field group, form field design is split into dedicated Input, Checkbox, and Radio option groups.

These groups include design controls for field text, labels, placeholders, backgrounds, borders, spacing, and related styling. They also support state editing, so you can style fields differently when they are focused, checked, or in their default state.

Focus mode works much like Hover mode. Switch to the Focus state, adjust the field design, and those styles apply only when the field receives focus. For checkboxes and radio buttons, the Checked state gives you the same kind of control when an option is selected.

This shared structure makes it easier to reuse the same form logic across Contact Forms, Email Optins, Login forms, Comments, Contact Form 7 forms, and WooCommerce forms. It also means focus styles can become part of your broader Divi 5 design system, not a one-off adjustment.

Use Custom Attributes Carefully

Good visual focus states help sighted users. Screen readers use a different layer: the HTML and accessibility tree. That means visual styling and semantic information both matter.

Divi 5’s Custom Attributes feature lets you add attributes such as aria-label, aria-describedby, aria-invalid, and other HTML attributes from the builder. This can help when a field needs extra context that is not already present in the markup.

Use ARIA as a supplement, not as a replacement for good form structure. Visible labels, meaningful field names, clear helper text, and native form attributes should come first. Add ARIA only when it improves the information assistive technology receives.

How To Build Better Focus States In Divi 5

Now let’s build the focus state. The example uses Divi’s Contact Form module, but the same principles apply to other Divi form modules that use the new Input, Checkbox, and Radio option groups.

Step 1: Add A Form

Open a page in the Divi Visual Builder. Add a Section, add a Row, and click the plus icon inside the column to open the module picker.

For this walkthrough, add the Contact Form module.

Once the module is on the canvas, style the resting state first. Set the field background, text color, borders, spacing, labels, placeholders, and button design before moving into Focus mode.

The resting state becomes your baseline. The focus state should feel related to it, but clear enough that users can instantly see which field is active.

Step 2: Set Up Design Variables

Design Variables make focus styling easier to manage. Instead of choosing static colors for every form, save your key colors and spacing values as reusable variables.

You can create those variables manually, or use the Variable Generator to turn one brand color into a broader palette of tints, shades, tones, and transparent variants.

To generate color variables, open the Variable Manager, hover over the Colors group, and click the palette icon.

Divi can generate light tints, darker shades, muted tones, and transparent variants from your primary color. Those lighter tints often work well for focus backgrounds, while stronger shades or brand colors can work well for focus borders.

If you already have a field background variable, you can also create a relative color from it. Choose the field background as the base, increase the lightness for a focus tint, and save it with a clear name such as Input Focus Background.

For text, use a high-contrast color that remains readable in every field state. If your resting field text uses a softer shade, the focus state can use a stronger version of the same text color.

Step 3: Open Focus Mode

Select the form module on the canvas and open its settings panel. Go to the option group you want to style, such as Input, then switch from the default state to Focus.

Any change you make in Focus mode applies only when the field receives focus. If the canvas does not immediately show the focused design, preview the page and click or tab into the field to test it.

Step 4: Change The Focus Background And Text Colors

The focused field should look active without becoming distracting. A subtle background shift can help, especially when combined with a clear border.

In Focus mode, open the field background settings and choose your focus tint variable. Then set the field text color to a strong, readable color.

Check two things before moving on. First, the focused state should be visually different from the resting state. Second, the text inside the focused field should still pass contrast requirements against the new background.

Do not rely on HSL lightness values alone. They are useful starting points, but actual contrast depends on hue, saturation, and the surrounding colors. Use a contrast checker for important field text, placeholder text, buttons, and error messages.

Step 5: Add A Strong Focus Border

A background change helps, but a border or outline usually makes the focus state easier to spot. Still in Focus mode, open the Border settings inside the Input group.

Set the border width to at least 2px. This is a practical target because WCAG’s stricter Focus Appearance guidance uses the area of a 2 CSS pixel perimeter as its minimum area reference.

For the border color, choose a brand color or shade that has strong contrast against both the field background and the page background. A solid border is usually easier to see than a dotted or dashed border at small sizes.

Now preview the page and test the form with your keyboard. Use the Tab key to move through the fields and confirm that the active field is obvious at every step.

Step 6: Test Checkboxes And Radio Buttons

Text inputs are only part of the form. If your form includes checkboxes or radio buttons, style their focus and checked states too.

Open the Checkbox or Radio option group. Use Focus mode to make the active option easy to find with a keyboard. Then use Checked mode to make the selected option clear after it has been chosen.

A good pattern is to use a visible focus outline for the active control and a separate checked style for the selected control. This helps users understand both where they are and what they have selected.

Add ARIA Only When It Improves The Markup

Custom Attributes can help, but ARIA should be used carefully. The first rule is simple: use native HTML and visible labels when they already provide the right meaning.

In Divi, start with the built-in field settings first. Add visible labels where possible, mark required fields with the module’s required setting, and write clear helper text near fields that need extra explanation.

Use Custom Attributes when you need to add information that is not already available in the markup.

Use aria-required Carefully

The aria-required attribute tells assistive technology that a field is required. However, native HTML’s required attribute already communicates required status for standard form controls and also supports browser validation.

If Divi’s Required Field setting already adds the native required attribute, adding aria-required=”true” may be redundant. Use it only when the field or control needs the extra ARIA state and native markup is not already doing the job.

If you do need to add it, add the attribute to the specific field, not the entire form module.

Use aria-required as the Attribute Name and true as the Attribute Value. Then test the field with a screen reader or accessibility inspector.

Use aria-label Only When There Is No Visible Label

The aria-label attribute gives a field an accessible name. Use it when a field has no visible label and no other suitable accessible name.

Do not add aria-label just because you can. If a visible label already describes the field, keep the visible label and skip aria-label. If both are present, aria-label can override the visible label as the accessible name, which may create a mismatch between what sighted users see and what screen reader users hear.

Placeholder text should not be the only label for an important field. It disappears or becomes less useful as soon as someone starts typing.

Use aria-describedby For Helper Text

Some fields need extra instructions. For example, a password field might require a minimum length, a number, and a special character. A phone field might need a specific format.

Add a Text module near the field and write the helper text there. Then open that Text module’s Advanced tab, add an id attribute, and use a clear value such as password-requirements or phone-format.

Next, select the related form field and add aria-describedby as a custom attribute. Use the same ID as the Attribute Value.

This connects the field to the helper text so assistive technology can announce the additional context along with the field.

Use aria-invalid For Custom Error States

If you display a custom error message for a field, consider adding aria-invalid=”true” to the field while the error is active. Pair it with aria-describedby so the field points to the error message.

Do not mark fields as invalid before the user has a chance to complete them. Apply invalid states after validation, then remove them once the issue is fixed.

Save Your Focus Styles As Presets

After building the focus state, save the styles so you do not have to recreate them for every form.

An Option Group Preset saves one option group, such as Input, Checkbox, Radio, Border, Spacing, or Sizing. This is useful when you want the same field styling across different forms.

To create one, open the option group you want to save, click the preset icon, choose New Preset From Current Styles, name the preset, and save it.

Element Presets save a fuller module-level design. Use them when you want a complete Contact Form, Email Optin, Login form, or WooCommerce form style to start from the same design system.

Keep accessibility attributes in mind when using presets. Visual styles can be reused broadly, but ARIA attributes should still be checked field by field. A helper text ID, error message ID, or field-specific label may not apply to every form.

Test The Form Before Publishing

Do a quick accessibility pass before the page goes live.

• Tab through every field and make sure the focus state is easy to see.
• Check that the focus border or outline has enough contrast against nearby colors.
• Confirm typed text and placeholder text remain readable in both default and focused states.
• Test checkboxes and radio buttons in both Focus and Checked states.
• Make sure required fields are clearly identified.
• Check helper text and error text with aria-describedby when needed.
• Test the form on mobile and at different responsive breakpoints.

A strong focus state should not depend on color alone. Use border width, background change, spacing, or another visual cue so the active field remains clear for more users.

Try Styling Your Forms In Divi 5 Today!

Most form styling stops at the resting state. Better form design goes further. It includes visible focus states, readable text, clear labels, helpful instructions, and reusable styles that stay consistent across the site.

Divi 5 gives you the tools to build that system visually. Use Focus mode to style the active field, Design Variables to keep colors consistent, Custom Attributes when markup needs extra context, and Presets to reuse the work across future forms.

The result is not just a better-looking form. It is a form that works more clearly for keyboard users, screen reader users, mouse users, and anyone trying to complete the form without guessing where they are.

The post How To Create Better Focus States For Accessible Forms In Divi 5 appeared first on Elegant Themes Blog.

With Divi 5, you can build a cart page visually using native WooCommerce modules, rather than relying on a generic layout or custom code. In this guide, we will show you how to create a custom WooCommerce cart page in Divi 5, style the cart products and totals, add trust signals, include optional cross-sells, and refine the layout for mobile.

Why You Should Customize WooCommerce Cart Pages

Most store pages have one job: move shoppers to the next step. Product pages push visitors toward the cart. The cart page pushes them toward checkout. By the time someone reaches the cart, they have already said yes to something. The remaining job is to make the next step feel clear, safe, and easy.

WooCommerce’s default cart page gives shoppers the essentials: cart items, quantities, totals, and a checkout button. For some stores, that is enough. For many others, it leaves too much of the buyer’s final decision unsupported.

Image by WooCommerce Documentation

This matters because shoppers abandon carts for practical and trust-related reasons. Baymard cart abandonment research reports that 19% of shoppers abandon because they do not trust the site with their credit card information, 14% leave because they cannot see or calculate the total order cost up front, and 10% leave because there are not enough payment methods.

A custom cart page helps you address those concerns before checkout. You can make the order summary easier to scan, keep totals visible, match the page to your brand, add payment and policy reassurance near the checkout button, and keep the next action obvious.

A good cart page does not need to be complicated. It needs to be clear, trustworthy, and consistent with the rest of your store.

WooCommerce And Divi 5 Work Better Together

Divi 5 gives you visual control over WooCommerce layouts by turning key WooCommerce areas into modules you can place, style, and arrange inside the Visual Builder and Theme Builder.

Before building the cart page, it helps to understand the Divi 5 tools that make this workflow possible.

Loop Builder

WooCommerce stores products, categories, and product data in WordPress. The challenge is deciding how that data should appear on the front end. Loop Builder helps solve that by letting you design a layout once, connect it to a query, and repeat that design for matching content.

For WooCommerce sites, that means you can build custom product grids, category sections, promotional product rows, and upsell-style layouts without being limited to a rigid product listing design.

Change the query, and the content changes. Change the card design, and every repeated item using that design updates with it.

Woo Product Modules

WooCommerce product pages usually follow a familiar structure: image, title, price, description, add-to-cart controls, reviews, and related product sections. Divi 5 breaks that structure into dedicated Woo modules so you can place and style each product element independently.

Divi 5’s Woo Product Modules include modules for key product page elements such as product images, product title, product price, product rating, product reviews, product gallery, product stock, product tabs, product information, related products, and more.

Because each part is its own module, you can style the product experience around how your customers shop. You can move the add-to-cart area higher, give reviews more emphasis, or create a layout that feels more like a branded product landing page than a default WooCommerce template.

Woo Cart And Checkout Modules

The cart page is where shoppers review what they are about to buy. Divi 5 gives you three Woo Cart modules for that part of the experience:

• Woo Cart Products: Displays the products currently in the customer’s cart, including product names, images, prices, quantities, and totals.
• Woo Cart Totals: Displays the cart subtotal, shipping options, fees, and final total.
• Woo Cross Sells: Displays products that you have linked as cross-sells inside WooCommerce.

Divi 5 also includes checkout modules for the next step in the purchase flow:

• Woo Checkout Billing: Displays and styles the billing details form.
• Woo Checkout Shipping: Displays and styles the shipping details form.
• Woo Checkout Information: Displays the additional information or order notes field.
• Woo Checkout Details: Displays the order details during checkout.
• Woo Checkout Payment: Displays the payment method selection and payment details.

Together, these modules let you create cart and checkout pages that feel like part of the same store instead of a handoff to a generic WooCommerce template.

Other Divi 5 Features That Help

The Woo modules handle the ecommerce data, but the rest of Divi 5 helps you turn that data into a polished cart experience.

• Design Variables: Store reusable colors, fonts, numbers, images, and other values so your cart page uses the same design system as the rest of your site.
• Presets: Save styled modules or option groups and reuse them across your store for consistent buttons, tables, cards, and text styles.
• Interactions: Add click, hover, scroll, and timed interactions directly in the Visual Builder when they support the buying experience.
• Canvases: Build off-canvas elements such as slide-ins, pop-ups, or promo panels and trigger them with interactions.
• Responsive Breakpoints: Fine-tune the cart layout across up to seven breakpoints so the page remains usable on smaller screens.

Use these features to support the checkout flow, not distract from it. On a cart page, clarity matters more than decoration.

Building A Custom Woo Cart Page In Divi 5

Now let’s build the cart page. The workflow starts in the Theme Builder, then moves into the Visual Builder where you can add the cart modules, style them, and test the layout across breakpoints.

Create A Cart Page Template

Go to your WordPress dashboard, then open Divi > Theme Builder. Click Add New Template, choose Build New Template, and select the display condition for the WooCommerce Cart page.

Set the display condition to the WooCommerce Cart page, then confirm the template.

Your new template card will include a Body area. For this example, we removed the global header and footer from the cart template so the page could use a more focused checkout-style layout.

This is optional. A simplified cart header can work well because it reduces distractions, but you should still give shoppers enough context to know they are on the same trusted store. A logo, short progress indicator, and secure checkout message are often enough.

Click Add Custom Body. Divi opens the Visual Builder for the cart page template. Anything you build in this template applies to the cart page condition you selected.

Add A Base Layout For Your Cart Page

The Visual Builder opens with a blank section. Start with a clear structure before adding modules. For this layout, we first added a full-width row for the cart page header.

Then, in the same section, we added a nested row with a wider main column and a narrower sidebar column.

This creates a familiar cart structure: products on the left, order summary and checkout action on the right. You can also use Grid layout options if your design needs more control.

Add And Configure The Woo Cart Modules

With the base layout in place, add the modules that make the cart functional. The key modules for this page are Woo Cart Products, Woo Cart Totals, and, optionally, Woo Cross Sells.

Build The Cart Header

Cart pages do not need a heavy header. In the full-width header column, open Design > Layout and set the alignment and justification for the content.

Add a Heading module and write a clear page title, such as Your Cart or Review Your Order. Style the heading with your Design Variables so it matches the rest of your store.

Next, add a Group Module below the heading. Set its layout direction to row, set the justification to space between, and add three Blurb modules inside it.

Use the blurbs as a simple progress indicator for the purchase journey. For example, you could show Shop, Cart, and Checkout, then highlight the cart step so shoppers know where they are.

Build The Main Cart Area

The two-column row is where the main cart experience happens. Use the wider column for cart products and the narrower column for totals, checkout action, and trust signals.

The Main Cart Column

Add the Woo Cart Products module to the wider column. This module displays the products currently in the customer’s cart, including names, images, prices, quantities, and totals.

Start in the Content tab. The Elements settings include four useful toggles:

• Show Product Image: Shows or hides each product’s featured image.
• Show Coupon Code: Shows or hides the coupon form.
• Show Update Cart Button: Shows or hides the Update Cart button.
• Show Remove Item Icon: Shows or hides the remove item icon.

For this example, we hid product images because the cart contains digital products and the product names are enough. If you sell physical products, keep images enabled so shoppers can quickly confirm they added the right item.

Keep the coupon field visible if this is the only place in the layout where shoppers can apply a discount. Hide it only if you have a clearer coupon workflow elsewhere.

Keep the Update Cart button visible when shoppers can change quantities. They need a clear way to apply quantity changes before moving on to checkout.

The remove item icon is also worth keeping. Removing an item is part of normal cart management, and making that action visible can reduce frustration.

After the content settings are in place, move to the Design tab.

Use the Layout setting to choose how the cart rows display. Horizontal is the default and works well for wider screens. Vertical can be useful for tighter layouts because each element appears on its own row.

Then style the table, table header, body text, table rows, table cells, remove icon, fields, buttons, and disabled button state. If you already use Design Variables for brand colors and typography, apply them here so the cart table stays connected to the rest of your store.

The image settings are useful if product images are enabled. Match the thumbnail radius, border, and spacing to the product cards or product pages elsewhere on the site.

Once the Woo Cart Products module is styled, style the column around it. A soft background, generous spacing, and a consistent border radius can help the cart content feel like a deliberate card rather than a default table.

The Cart Sidebar

The right column holds the order summary and checkout action. To make it easy to find, give the column a background color that contrasts with the main cart area while still matching your brand.

Add padding and border radius to the column so the totals area feels contained.

Next, add the Woo Cart Totals module. This module displays the cart subtotal, shipping options, fees, and final total from WooCommerce.

The Woo Cart Totals module is mostly about design and placement. Open the Design tab to style it.

Use Title Text to style the Cart Totals heading. Use Column Label for labels such as Subtotal and Shipping. Use Body Text for the values on the opposite side.

The Table, Table Row, and Table Cell settings let you match the totals table to the cart products table. The Fields settings style the Calculate Shipping or Change Address fields when they appear. The Button settings control the Proceed To Checkout button.

That button deserves extra attention. It is the primary call to action on the cart page. Make it visually clear, give it enough size and spacing, and use the same button style shoppers see elsewhere in your store.

Build Trust Around The Checkout Button

The space near the Proceed To Checkout button is valuable. Shoppers are close to paying, and this is where final doubts often appear. Use this area to reinforce trust without cluttering the page.

Trust signals can include payment logos, security notes, return policy reminders, delivery information, customer support links, or guarantee statements.

For this example, add a short label such as Pay Securely With:, then add a Group module set to row layout with Image modules for payment methods such as Visa, Mastercard, and PayPal.

You can also add more trust indicators depending on your store:

• Policy callouts: Use an Icon List module for short lines such as 30-day returns, Secure checkout, Instant download, or Free shipping over $50.
• Support reassurance: Add a small contact link or chat trigger for shoppers who need one last answer before checkout.
• Review snippets: Add a short testimonial near the cart summary if social proof is important for your product type.

Keep this section short. Trust signals should reduce doubt, not compete with the checkout button.

Add Final Visual Emphasis

To make the cart totals column stand out, add a subtle box shadow. This gives the checkout area a little depth without making the layout feel busy.

You can also use the Transform settings to scale the sidebar slightly. Use this carefully. A small increase can help the checkout area stand out, but a large scale can create spacing issues, especially on tablets and phones.

At this point, the core cart page is complete. It uses Divi 5’s native Woo Cart modules, keeps the cart contents clear, makes the checkout action obvious, and adds trust signals near the decision point.

Because the layout is built from Divi modules, you can continue adjusting the structure visually. Move the progress indicator, add dividers, change column spacing, or save parts of the design as presets so the cart page stays consistent with the rest of your WooCommerce store.

We moved the progress indicator into the cart column and added two Divider modules inside the group to show the purchase path.

Optional: Add Cross-Sells

The cart page can be a good place to suggest complementary products, especially when the add-ons are genuinely useful. This should feel like a helpful recommendation, not a distraction from checkout.

Divi 5 includes a Woo Cross Sells module for this purpose. It displays products you have linked as cross-sells inside WooCommerce. You can place it anywhere in the cart layout, control how many items appear, adjust the column structure, and style the section to match your store.

Add the Woo Cross Sells module below the main cart area or in a full-width section under the cart products and totals. Then style the title, price text, spacing, border, and background so the section feels connected to the rest of the page.

If you want a more custom product carousel instead, you can use a Group Carousel with Loop Builder. Add a Group Carousel module, design one product card inside the group, enable the loop option, set the query to products, and filter by a category that makes sense for your store.

Then connect the card elements to WooCommerce data using dynamic content.

Use this only when the recommendations are relevant. A focused cart page is often better than a crowded one.

If you want to learn more, we cover building a product carousel with the Loop Builder in detail in this guide.

Optimize The Cart Page For Mobile

Before publishing, test the cart page across Divi 5’s responsive breakpoints. The desktop layout may look strong, but cart pages often need extra mobile attention because tables, totals, buttons, and trust signals can become cramped.

Use the breakpoint controls in the top toolbar to switch views and make adjustments for smaller screens. For example, we hid the blurb progress indicator on tablet and phone because it took up too much vertical space.

If you add a carousel, adjust it for smaller screens too. At the mobile breakpoint, setting Slides To Show to 1 keeps the carousel readable and easier to swipe.

Check these mobile details before you publish:

• The cart products are easy to read and edit.
• The checkout button is visible and easy to tap.
• The cart totals do not feel buried below too much content.
• Coupon fields and quantity controls are usable on smaller screens.
• Trust signals support the checkout button without pushing it too far down the page.

Divi 5 supports up to seven responsive breakpoints, so keep refining the layout until the cart feels clear on every screen size your customers use.

Start Building Your WooCommerce Store With Divi 5!

A strong cart page keeps shoppers focused, reassured, and ready for checkout. It does not need to be flashy. It needs to show the right products, make the totals clear, keep the checkout action visible, and answer the doubts shoppers often have before paying.

Divi 5 gives you the tools to do that visually. With Woo Cart Products, Woo Cart Totals, Woo Cross Sells, Design Variables, Presets, responsive controls, and the Theme Builder, you can replace the default WooCommerce cart with a page that feels like a natural part of your store.

Build the page once, save the styles you want to reuse, test it across breakpoints, and keep the experience focused on the next step: checkout.

The post How To Build Custom Woo Cart Pages In Divi 5 appeared first on Elegant Themes Blog.

Each section removes the gaps between columns and content blocks to create bold, edge-to-edge compositions with clean alignment, striking imagery, and modern structure. Import a section, replace the content, update the images, and you’re ready to go.

Preview

Here’s a quick look at the 11 Gutterless Sections included in the pack. The download is further down the post.

Download 11 Gutterless Sections For Divi 5

Get all 11 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder.

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (10 Exports)

After you download and unzip the file, you’ll find 11 styled Gutterless Section exports, plus 1 file containing all layouts.

Styled – Gutterless Section 1 to 11 (11) → Nine fully styled gutterless section layouts with edge-to-edge columns, bold image placement, structured content blocks, refined typography, buttons, overlays, and clean spacing that you can use as-is or customize.

Styled – Gutterless Sections (All) → Imports all 11 designs into your Divi Library at once.

How To Use The Gutterless Sections

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 Gutterless Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Gutterless 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 Gutterless sections.

3. Swap The Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, buttons, links, labels, service names, feature text, menu details, portfolio copy, and supporting content to ensure the section aligns with your brand and message. Then swap in your own images, videos, icons, featured content, or supporting details as needed.

Because gutterless sections rely on tight alignment, strong image placement, and seamless column relationships, it’s best to replace content one area at a time. This helps preserve the balance between text, imagery, buttons, overlays, and negative space as you customize the design.

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

4. Adjust Styles (Optional)

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

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

To refine the layout styling, open the row, column, group, or 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 full-bleed images, split content blocks, overlapping media, dark overlays, side-by-side cards, or editorial-style compositions, keep those relationships in mind as you edit so the layout remains intentional and balanced.

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

Tips For Effective Gutterless Sections

Gutterless sections work best when every content block feels connected and intentional. Use these quick tips to keep your sections clean, modern, and easy to customize.

Use Strong Imagery

Gutterless layouts often rely on edge-to-edge images to create impact. Choose high-quality visuals with strong composition so the section feels polished and purposeful.

Keep Content Blocks Focused

With columns sitting directly next to one another, clutter can become noticeable quickly. Keep headings, copy, buttons, and supporting details focused so each area remains easy to scan.

Create A Clear Visual Hierarchy

Use typography, color, contrast, image scale, and button placement to guide visitors through the section. The most important message or call to action should be easy to spot.

Balance Edge-To-Edge Layouts With Breathing Room

Even without gutters, your content still needs space to feel comfortable. Use padding inside text areas, cards, overlays, and buttons so the layout feels intentional instead of cramped.

Check The Layout On Mobile

Gutterless sections can change noticeably on tablet and phone screens as columns stack. Review your layout on smaller devices to ensure images crop well, content remains readable, spacing feels balanced, and calls to action stay easy to tap.

Start Building In Divi 5 Today!

These 11 Gutterless Sections give you a fast way to build bold, full-width page sections for landing pages, portfolios, restaurant websites, service pages, product highlights, agency layouts, architecture studios, 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 11 Gutterless Layouts For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

The new Variable Generator makes that process faster. It can generate a complete fluid sizing system with clamp()-based variables for typography, spacing, gaps, widths, border radius, border widths, and more. When combined with Presets, those variables become the foundation for a consistent, scalable design system across your entire website.

In this post, we’ll walk through how Divi 5’s sizing system works, how to generate fluid variables, when to customize them, and how to apply them across your site.

What Is Divi 5’s Sizing System?

Divi 5’s sizing system is built on Design Variables, reusable values that you create once and use anywhere across your website. While Design Variables can store many types of values, including colors, fonts, images, links, numbers, and text, this post focuses on number-based variables that control your site’s visual scale.

That includes font sizes, spacing, gaps, widths, border widths, border radius, and other numerical values that shape the layout and rhythm of your design.

Divi 5 also supports Advanced Units such as clamp(), calc(), vw, rem, and more. These units help you create fluid values that respond smoothly as the viewport changes, reducing the need for repetitive breakpoint-by-breakpoint edits.

All of these variables are managed in the Variable Manager. Variables are grouped by type, making it easier to manage global design values from one place instead of hunting through individual modules, rows, or sections.

Why Use Sizing Variables?

Compared to static pixel values, Divi 5’s sizing variables give you a more flexible and maintainable way to design.

• Fluid scaling: Generated sizing variables use clamp() by default, giving each value a minimum size, a preferred fluid value, and a maximum size.
• Less responsive editing: Once your variables are set, values can scale automatically across screen sizes without requiring manual edits at every breakpoint.
• Site-wide consistency: When the same variable is used across your site, updating that variable updates every connected design value.
• Easier maintenance: You can adjust your site’s spacing, typography, or layout rhythm by editing a small set of variables instead of dozens of individual module settings.
• Better preset workflows: Sizing variables pair naturally with Divi 5 Presets, allowing you to create reusable design patterns that stay consistent over time.

Accessing The Fluid Sizing Variable Generator

You can generate sizing variables directly inside the Visual Builder. Open a page in the Visual Builder. In the left sidebar, click the Variable Manager icon.

In the Variable Manager, hover over the Numbers group.

Click the Generate Fluid Sizing Variables icon to open the Variable Generator. The generator includes configuration controls and a live preview so you can review your system before adding variables to your site.

Choosing A Variable Type

The sizing generator can create different systems for different parts of your design. With the generator open, choose a Variable Type from the menu at the top.

• Font Size: Creates a scalable typography system for headings, body text, and other text elements.
• Spacing: Creates reusable values for margins and padding.
• Gap: Creates values for horizontal and vertical gaps in flex and grid layouts.
• Radius: Creates border-radius values for buttons, images, cards, and containers.
• Border Width: Creates consistent border thickness values for outlines, dividers, buttons, and decorative elements.
• Width: Creates reusable width values for layout elements such as rows, columns, cards, sidebars, and containers.
• Clamp (Generic): Creates custom clamp()-based variables that do not fit into a predefined sizing category.
• Size (Generic): Creates generic size variables for one-off or custom sizing needs.

The Color Palette Generator is part of the same Variable Generator feature set, but it is launched from the color group instead of the Numbers group. Since this post focuses on sizing, we’ll cover color variables only briefly later in the article.

Why clamp() Matters In Divi 5

By default, Divi 5’s generated sizing variables use CSS clamp(). This is what allows a value to scale fluidly between a minimum and maximum size without requiring separate responsive values for every breakpoint.

How clamp() Works

The clamp() function uses three values:

• Minimum size: The smallest allowed value.
• Preferred size: The fluid value that changes with the viewport.
• Maximum size: The largest allowed value.

A heading variable might look like this:

clamp(1.25rem, 4vw + 0.5rem, 3.5rem)

In this example, the heading will never be smaller than 1.25rem or larger than 3.5rem. Between those limits, it scales fluidly as the viewport changes. Divi handles the clamp() calculation for you, which makes fluid design more approachable even if you do not want to write the math manually.

Generating A Fluid Typography System

Let’s use font sizes as an example.

Click the Generate Fluid Sizing Variables icon next to the Numbers group, then choose Font Size as the Variable Type. Keep Fluid Scale (CSS Clamp) as the Scale Type, review the preview, and click Add Variables To My Site.

Click the X in the top-right corner of the generator to close it.

To view your new variables, expand the Numbers group. To save them, click Save Variables, then click Apply Changes.

Understanding Advanced Settings In The Variable Generator

The default generated systems are useful out of the box, but Divi 5 also gives you detailed control when you want to customize your variables before adding them to your site.

After choosing a Variable Type, click Customize Values to open the advanced panel.

You can add smaller or larger variables, edit individual values, and adjust how the entire scale is generated before you save it.

Key Customization Options

Scale Type

The Scale Type determines how Divi generates the values in your system.

Fluid Scale (CSS Clamp) creates responsive values that scale between minimum and maximum sizes. Fixed Scale (Responsive) gives you separate values across responsive breakpoints. Fixed Scale (Single) creates static values that do not scale fluidly.

Modular Scaling Ratios

For fluid scales, you can define different scaling ratios for smaller and larger screens. For example, the phone scale can stay more restrained while the desktop scale grows more dramatically. This helps you create a balanced visual hierarchy across viewports.

Website And Viewport Settings

Website and viewport settings help Divi tailor clamp() values to your layout. You can define viewport limits and layout width values so generated variables scale in a way that fits your site’s real design constraints.

Individual Variable Editing

You can manually edit each variable in the preview area. Depending on the scale type, you can adjust names, units, minimum sizes, maximum sizes, and generated values. You can also add smaller or larger variables to expand the system.

Additional Controls

Additional controls let you refine how your system is named and generated. These include generated CSS units, root font size settings, variable prefixes, suffix styles, and base size options.

Other Variable Types

Font size variables are only one part of Divi 5’s sizing system. The Variable Generator can also create dedicated systems for spacing, gaps, radius, border width, width, and generic size values.

Spacing Variables

Spacing variables are best for margins and padding. They help create consistent breathing room between sections, rows, modules, and content blocks while allowing that spacing to scale across screen sizes.

Their settings can include options such as a zero-spacing token, separate base sizes for smaller and larger screens, scaling ratios, and layout-aware width settings.

Gap Variables

Gap variables are designed for the space between child items in flex and grid containers. They are useful for galleries, card grids, navigation layouts, feature lists, and other layouts where the space between items should remain consistent.

Unlike spacing variables, gap variables affect the internal spacing between items rather than the outer margin or padding around a container.

Radius Variables

Radius variables create reusable border-radius values for buttons, cards, images, columns, and other design elements. You can use them to keep rounded corners consistent across your site instead of manually entering radius values in multiple places.

Border Width Variables

Border width variables create reusable thickness values for outlines, dividers, buttons, cards, and decorative borders. Since borders are usually subtle, these variables are especially useful for keeping small visual details consistent across your design.

Width Variables

Width variables create reusable width values for structural elements such as rows, columns, cards, sidebars, and containers. They are useful when you want layout elements to follow a consistent width system instead of relying on unrelated custom values across the page.

Clamp (Generic) Variables

Clamp (Generic) variables are useful when you want to create a custom fluid value that does not belong to one of the predefined systems. For example, you might use a generic clamp variable for an icon size, a custom height, or a unique layout measurement.

Size (Generic) Variables

Size (Generic) variables are useful for custom sizing needs that do not require a complete scale. Use them for utility values, fixed dimensions, or custom tokens that do not fit into the more specific variable types.

Color Palette Variables

Although this post focuses on sizing, the Variable Generator also includes a Color Palette Generator. Instead of launching it from the Numbers group, you access it from the color group in the Variable Manager.

The Color Palette Generator can create a global color system from your site’s primary color. It can generate related colors, light-to-dark variations, and transparent color options, and those colors remain connected through Divi’s relative color system. When the primary color changes, related colors can follow that relationship.

Applying Sizing Variables Across Your Site

After generating variables, the next step is using them in your design. The real value of Divi 5’s sizing system comes from applying variables consistently across modules, presets, and layouts.

Assigning Variables In The Visual Builder

Anywhere the Visual Builder accepts a supported sizing value, such as font size, padding, margin, width, gap, border width, or border radius, you can insert a variable instead of typing a static value.

Look for the Insert Dynamic Content icon next to the field.

Click the icon, search or browse your available variables, and select the value you want to use. A clear naming structure makes this step much easier because variables are faster to identify and reuse.

Once selected, the field uses the variable instead of a static value. If you update that variable later, any connected field updates with it.

You can use sizing variables in many Design tab settings that accept number values, including typography, spacing, borders, sizing, Flexbox, and CSS Grid layout settings.

Creating Presets With Sizing Variables

Sizing variables become even more powerful when combined with Presets. Instead of styling one module at a time, you can build reusable design patterns that reference your global variables.

For example, you can style a Button module using spacing, border, radius, font size, and color variables.

Then, you can save those styles as Option Group Presets.

You can also nest Option Group Presets inside broader Element Presets.

From there, you can apply the same preset system to other modules with just a few clicks.

This is where variables and presets work together. Variables define the values. Presets apply those values consistently across your design.

Tips And Best Practices

Use Variables For Reusable Design Decisions

Use sizing variables for values that will appear across multiple sections, modules, or templates. Typography scales, section spacing, card gaps, button padding, border widths, and corner radius values are all good candidates.

For one-off values that will not be reused, a static value or Size (Generic) variable may be more appropriate.

Name Variables Clearly

Clear naming makes variables easier to find and reuse. Use names that describe the role of the value, not just the number. For example, a variable named spacing-section-lg is more useful than a variable named 80px because it communicates where the value belongs in your design system.

Start With The Default Scale, Then Customize

The generated sizing systems are designed to work well out of the box. Start with the default output, review how it behaves across screen sizes, and customize only where your design needs more control.

Pair Variables With Presets

Variables are most effective when they are not applied randomly. Pair them with Presets to create reusable systems for buttons, cards, sections, pricing tables, testimonials, and other repeated design patterns.

Check For Static Overrides

If a value is not updating as expected, check whether the field is still using the variable or whether it has been replaced by a static value. This is one of the most common issues when working with design variables.

To test fluid values, resize the canvas or use Divi 5’s Customizable Responsive Breakpoints.

Know When To Use Fluid Or Static Values

Use fluid clamp() values for design elements that should scale across screen sizes, such as headings, section spacing, layout gaps, and container widths.

Use static values when a size should remain fixed, such as a small icon, a thin divider, or a specific utility value that should not change with the viewport.

Understand The Difference Between Spacing And Gap

Spacing variables are best for padding and margins around elements.

Gap variables control the space between child items inside flex and grid containers.

Generic Clamp and Size variables give you flexibility for values that do not fit neatly into those categories.

Divi 5 Makes Creating A Sizing System Easier

Divi 5‘s Variable Generator turns responsive sizing into a reusable system. Instead of relying on scattered static values, you can generate fluid variables, customize them, save them globally, and apply them throughout your site.

With clamp()-based sizing, advanced customization options, and deep integration with Presets, Divi 5 makes it easier to build websites that stay consistent across pages, modules, templates, and screen sizes.

Open the Visual Builder, launch the Variable Generator, and start with a simple typography or spacing system. Once your core variables are in place, combine them with presets to create a design system that is easier to update, easier to scale, and easier to maintain.

We’d love to hear your thoughts. Leave us a comment below or reach out on our social media channels to let us know how you plan to use the Variable Generator.

The post Everything You Need To Know About Divi 5’s Sizing System appeared first on Elegant Themes Blog.