Search results for "build custom wordpress child theme" | WP FixAll

Get the unfastened Divi 5 Design Device freebie

Mastering Divi 5’s Design Device: How To Means New Builds

Deanna McLean — Mon, 02 Mar 2026 16:00:00 +0000

Divi 5 is the largest evolution within the historical past of Divi. This can be a whole rebuild all for functionality, fashionable accessibility, and a strong no-code design machine. The result’s a platform that shall we any person create constant, scalable internet sites quicker and extra successfully.

Divi 5’s new modular framework supplies a quicker, extra feature-rich Visible Builder. With equipment like Design Variables, Part and Possibility Staff Presets, Loop Builder, Flexbox, CSS Grid, and Divi 5 Canvases, you’ll create skilled, complicated internet sites extra simply than ever sooner than. Merely outline world methods as soon as, follow them far and wide, and replace site-wide with a unmarried exchange.

On this submit, we can spoil down Divi 5’s core design machine, give an explanation for the best way to arrange a rock-solid framework, and percentage a step by step means for brand spanking new tasks. This submit builds on our unfastened Divi 5 Design Device freebie, which offers you an entire, production-ready place to begin you’ll import into a brand new Divi 5 web site.

Let’s get began.

Figuring out Divi 5

Divi 5 introduces a contemporary design machine constructed for consistency, pace, and scalability. It means that you can create an entire design machine in line with core options that assist you to outline kinds as soon as and follow them far and wide. Those options paintings in combination to hurry up the design procedure whilst producing blank, class-based frontend code in the back of the scenes.

Within the examples all over this phase, we can reference components from the unfastened Divi 5 Design Device for example how Design Variables, Presets, Structure Taste settings, and different equipment combine in an entire, ready-to-customize Divi 5 design machine.

Design Variables

Design Variables function reusable development blocks for colours, fonts, numbers, pictures, textual content, and URLs. They act as a no-code similar to CSS customized houses. Outline them within the Variable Supervisor as soon as, and use them anyplace in your web site.

The Variable Supervisor has a devoted panel within the Visible Builder’s left sidebar.

Whilst you plug a variable into modules, Presets, or different components, any exchange made within the Variable Supervisor propagates right away site-wide, getting rid of the wish to sift via particular person kinds or pages.

Complex options come with Relative Colours, which use hue, saturation, and lightness (HSL) controls. Those create parent-child relationships, so you’ll make lighter or darker sun shades or tints from a base shade variable. If the bottom updates, all relative colours modify mechanically for harmonious palettes.

You’ll be able to additionally use Complex Gadgets like min() or clamp() immediately in quantity variables to create responsive values, comparable to fluid typography that scales easily with out breakpoints.

Design Variables stay your designs constant. Outline a number one shade as soon as, use it throughout your web site, and use it on buttons, headings, hyperlinks, and extra. With world settings in position, you most effective wish to make adjustments as soon as within the Variable Supervisor, and so they auto-apply site-wide. You’ll be able to additionally save routine content material, like corporate addresses as textual content variables, social hyperlinks as URL variables, or emblems as symbol variables, for one-click insertion anyplace.

Presets

Presets assist you to save and reuse kinds throughout your whole web site, enabling a real preset-based design framework. As you genre components, Divi 5 interprets the ones alternatives into blank, optimized CSS categories within the background. The result’s minimum code bloat and advanced functionality.

Part Presets seize complete module designs, together with textual content, spacing, colours, icons, hovers, and extra. By way of environment a default preset, you make certain that each new module you upload mechanically inherits the ones kinds. This assists in keeping your design constant site-wide with out repetitive handbook tweaks.

Whilst Part Presets maintain all of the module, Possibility Staff Presets center of attention on explicit classes comparable to typography, borders, or spacing. This modular means means that you can follow a border or heading genre to any module in your web site that helps the ones settings.

For the most productive effects, mix Possibility Staff Presets with Design Variables so shade adjustments, spacing, or borders cascade all over your design mechanically.

Stacked and Nested Presets upload much more flexibility to this workflow. Nesting means that you can save an Possibility Staff Preset within an Part Preset, in order that a unmarried exchange to the OGP updates each component that makes use of it. Stacking allows you to layer diversifications, like two another way styled buttons, with out overwriting them.

Nesting Possibility Staff Presets within an Part Preset creates a modular, extremely updatable machine. As an example, in the event you nest a spacing OGP within a Button Part Preset, the button will undertake the spacing kinds from the OGP. Must making a decision to switch the spacing later, you most effective wish to replace the OGP as soon as within the Preset Supervisor. Each and every component that makes use of that spacing environment will replace throughout your whole web site right away.

The Preset Supervisor organizes the entirety. You’ll be able to browse, create, edit, and preview presets with visible previews, then reproduction, delete, import, and export them. Preview adjustments safely sooner than making use of them site-wide, and export presets for consistency throughout different tasks.

More than one Structure Methods

Divi 5 provides each module versatile structure choices by the use of the Structure Taste environment within the Design tab. This permits you to make a choice from 3 modes immediately on sections, rows, columns, or particular person modules.

Block

That is the normal go with the flow structure acquainted from previous Divi variations. Parts stack vertically in a hard and fast, predictable order, following the herbal record go with the flow. When the use of a Structure Pack or Divi Fast Web page, that is the default environment. It’s superb for easy, linear content material that calls for minimum positioning changes, comparable to spacing or margins.

Flexbox

That is probably the most often used mode for Divi 5. Flexbox turns the container into a versatile field that arranges youngster components (modules and columns) alongside a unmarried primary axis (horizontal or vertical). It provides intuitive visible controls for alignment, justification, and horizontal/vertical gaps, structure wrapping to increase content material to new traces, and simple reordering, which is easiest for responsive design. You’ll be able to align content material completely in a hero phase, create card grids that wrap naturally, or reorder columns on cell with out customized CSS.

CSS Grid

For extra complicated preparations, transfer to CSS Grid to regulate each rows and columns concurrently. Outline specific tracks, use auto-fit or auto-fill for responsive grids, set exact merchandise placement, and set up overlaps or spans. It’s easiest for magazine-style layouts, galleries, product showcases, or any design that calls for structured row and column regulate past what Flexbox supplies.

Those structure methods make Divi 5 extremely adaptable. Get started with Flexbox for many on a regular basis layouts, fall again to Block for elementary stacking, or transfer to CSS Grid when you wish to have complete grid precision. This pliability streamlines the advent of contemporary, responsive pages whilst conserving your workflow visible and environment friendly.

Further Options

Divi 5 comprises a number of tough equipment that accelerate the design procedure, be sure that design consistency and responsiveness, and create complicated layouts. Those options supplement the core design machine, making complicated websites more straightforward to construct and handle.

Module Teams

Module Teams act as new div boxes. You’ll be able to workforce more than one modules within a column right into a unmarried unit. Practice backgrounds, borders, shadows, spacing, or every other design settings to all of the workforce without delay. As soon as styled, save the Module Staff on your Divi Library or Divi Cloud for reuse throughout pages or tasks, treating it like a customized reusable part.

Layers View

The Layers View serves because the redesigned command heart on your web page construction. It shows your entire hierarchy of sections, rows, columns, modules, and teams in a collapsible tree view. This makes complicated nesting simple to control, is helping you briefly find and make a selection any component (even deeply nested ones), and gives drag-and-drop reordering correct within the sidebar. Labeling your layers here’s a good way to stick arranged all through a fancy construct.

Show Order

The Show Order box offers you exact regulate over visible order. You’ll be able to reorder columns, teams, or particular person modules on smaller monitors with out affecting the desktop structure. That is particularly helpful for responsive designs the place you need necessary content material to look first on cell or pill.

Loop Builder

The Loop Builder brings dynamic content material to lifestyles. Design a single-item structure as soon as (the use of any mixture of modules, teams, Flexbox, Grid, or Block layouts), then follow it dynamically to weblog posts, WooCommerce merchandise, portfolios, customized submit varieties, or any queryable content material. Set filters, queries, limits, ordering, pagination, or even conditional visibility, all within the Visible Builder.

Inspector

The Inspector is a centralized panel that offers you a handy guide a rough evaluate of all settings utilized in a decided on component (like a bit) and its kids (rows, columns, and modules). It allows you to set up genre, content material, and preset settings in a single position. As an alternative of digging via more than one tabs, you’ll edit settings immediately within the Inspector panel. You’ll be able to simply exchange colours, fonts, textual content, pictures, and extra with a few clicks.

To find And Change

The To find and Change characteristic allows you to right away replace values throughout your web page or web site. Click on a module’s settings to open the device, then change static values, variables, kinds, spacing, or content material inside a centered scope. That is particularly to hand for adopting Design Variables throughout older layouts or making bulk adjustments with out handbook repetition.

Customizable Responsive Breakpoints

Customizable Responsive Breakpoints make bigger past the normal 3 (desktop, pill, telephone) to seven editable issues: Telephone, Telephone Huge, Pill, Pill Huge, Desktop, Widescreen, and Extremely Huge. You’ll be able to modify each and every breakpoint’s width globally within the Sitewide Responsive Breakpoints modal and allow or disable them as wanted (Desktop is at all times energetic).

The brand new Responsive Editor panel supplies side-by-side previews and changes throughout each software dimension on the module degree. Modify any design or content material box in a single cross with no need to toggle via each and every breakpoint in my opinion.

Divi 5 Canvases

The Divi 5 Canvases characteristic supplies indifferent workspaces for developing off-canvas components like pop-ups, slide-in menus, mega menus, or staging layouts with out cluttering your primary web page.

Design them one at a time, then use the Canvas Portal Module to inject the canvas content material exactly the place wanted in your frontend structure. This assists in keeping your primary builder blank whilst enabling dynamic, position-relative off-canvas options.

Those equipment make complicated design really feel easy and stay the entirety simple to control. Along side Design Variables, Presets, and versatile layouts, they can help you create skilled websites quicker and with much less effort.

Environment Up The Divi 5 Design Device

The Divi 5 Design Device freebie is a complete starter equipment that offers you an absolutely pre-configured basis straight away. It bundles more than one JSON recordsdata masking each layer of Divi 5’s design machine, together with Divi Theme Customizer settings, Design Variables, masses of Part and Possibility Staff Presets, Theme Builder templates, and a Divi Library assortment with 350+ particular person sections and layouts, plus 24 web page layouts.

If in case you have no longer downloaded it but, take hold of the freebie right here first: Divi 5 Release Reward: Design Device.

Import those recordsdata within the advisable order beneath to keep away from conflicts and construct scalable websites right away:

Import Divi Theme Customizer Settings

With Divi 5 downloaded and put in, head on your WordPress dashboard and click on Divi > Theme Customizer.

When the Customizer a lot, click on the import/export button within the top-left nook.

Load the Divi-5-Release-Freebie_Theme-Customizer.json record and click on the Import Divi Customizer Settings button.

This imports world typography, colours, and different site-wide defaults from the freebie, setting up a constant base layer.

Import Design Variables

Subsequent, you’ll import the Design Variables related to the Divi 5 Design Device. The freebie features a complete set of name colours with relative colours, typography variables with min() and clamp(), plus textual content, symbol, and URL variables. Those shape the basis of your design machine and will also be modified with a few clicks.

To import the JSON record, open any web page within the Visible Builder. Within the left sidebar, click on the Variable Supervisor icon.

Click on the import/export icon on the height left of the Variables panel.

Make a selection the Import tab, find the Divi-5-Release-Freebie_Global-Variables.json record in your pc, and click on Import Variables.

As soon as imported, click on Save Variables to lead them to straight away to be had in your web site.

Import Presets

Subsequent, we’ll import the entire Presets related to the Divi 5 Design Device freebie. Within the Visible Builder, click on the Preset Supervisor icon.

Click on the import/export icon, make a selection the Import tab, and make a choice the Divi-5-Release-Freebie_Presets.json record in your pc. Click on Import Presets to load them into your Divi web site.

As soon as imported, you’ll have get right of entry to to masses of Part Presets for modules and Possibility Staff Presets for particular person design settings, like borders, typography, and spacing.

Import Theme Builder Templates

The freebie comprises templates for an international header and footer, posts, tasks, class pages, creator pages, seek effects, a 404 web page, and WooCommerce templates (when acceptable).

Move to Divi > Theme Builder and find the import/export icon.

Make a selection the Import tab, find the Divi-5-Release-Freebie_Theme-Builder-Templates.json record in your pc, and cargo it into the Import & Export Templates modal. Make sure that you permit Import Presets unchecked, because you’ve already imported the presets within the earlier step. This is helping save you replica preset imports.

As soon as the record is loaded, click on Import Divi Theme Builder Templates.

Make sure you save the templates by way of clicking the Save Adjustments button.

Import Divi Library Pieces

Finally, the Divi 5 Design Device comprises 350+ sections and layouts, in addition to 24 full-page layouts. You’ll be able to import grouped phase layouts, particular person sections, and entire web page layouts relying in your workflow.

Navigate to Divi > Divi Library and find the import/export icon.

To import grouped phase layouts, make a choice the Divi-5-Release-Freebie_All-Sections_Layouts.json record. In case you want uploading particular person sections as an alternative, make a choice Divi-5-Release-Freebie_All-Person-Sections.json.

To import the web page layouts related to the freebie, make a selection the Divi-5-Release-Freebie_Pages.json record. After making a diffusion, stay Import Presets unchecked and click on the Import Divi Builder Layouts button.

How To Means New Builds In Divi 5

Divi 5’s no-code design machine shines brightest while you apply a planned, repeatable workflow for brand spanking new tasks. This streamlined means is constructed round Variables as the basis, Presets for reusable styling, versatile layouts for construction, and sensible equipment for iteration. This means allows you to create constant, high-performance websites briefly and successfully.

With the imported Divi 5 Design Device freebie already in position, you don’t wish to construct the entirety from scratch. As an alternative, center of attention on sensible utility: pull from the premade components, follow your branding, and let Design Variables maintain the heavy lifting.

Apply the stairs beneath to show a clean canvas right into a reside web site successfully.

Development A Design Device

The important thing to scalable Divi 5 websites is development from the bottom up in a selected series: Design Variables first, then Possibility Staff Presets, and in spite of everything Part Presets. This order guarantees each genre cascades successfully — replace a unmarried Variable, and your whole web site refreshes right away.

1. Get started with Variables

Open the Variable Supervisor from the Visible Builder’s left sidebar icon, then make bigger the related tab.

Browse the Design Device freebie’s pre-configured number of number one, secondary, and accessory colours (with HSL-based family members for sun shades/tints), clamp()-powered typography sizes, constant spacing numbers, textual content variables (corporate identify, cope with, and many others.), symbol variables (emblems, icons), and URL variables (social hyperlinks).

Including your individual variables is straightforward. As an example, let’s say you need to create a brand new variable for the meta textual content in a weblog loop. Open the Variable Supervisor and make bigger the Numbers tab. Scroll to find the + Upload World Quantity button.

Give it a Identify, comparable to Meta Textual content, and assign 13px because the Price. Click on Save Variables so as to add it to the Variable Supervisor.

To use the brand new variable, make a selection the Textual content module that incorporates the meta textual content. Within the Design tab, make bigger the Textual content choice workforce. Hover above the Textual content Textual content Dimension box to expose the Dynamic Content material icon.

Make a selection the Meta Textual content variable to use it on the sphere.

Divi 5 will follow the brand new variable to each suitable Textual content module within the loop structure the place you utilize it.

2. Create Possibility Staff Presets

Possibility Staff Presets assist you to save explicit genre teams, comparable to a typography set or a border genre, and follow them to any module that incorporates that workforce.

To create a brand new Possibility Staff Preset, open the settings for any module at the web page. Navigate to the Design tab (or the Content material tab for such things as backgrounds) and to find the precise genre workforce you need to assign a preset. As an example, we’ll genre a button in a CTA module and assign an Possibility Staff Preset to it so the ones kinds will also be carried out in every other module with a Button choice workforce.

Within the CTA’s Design tab, make bigger the Button menu and allow Use Customized Types For Button.

Taste the button alternatively you favor, the use of present Design Variables.

To create the OGP, click on the Assign Preset icon within the Button choice workforce.

Make a selection New Preset From Present Types.

Give the brand new OGP a Identify and click on Save Preset to create it. Adjustments made to the preset are later up to date in each example that makes use of it.

3. Create Part Presets With Possibility Staff Presets Embedded

In Divi 5, you’ll nest your OGPs within an Part Preset. This creates an impressive hierarchy for keeping up kinds. In case you exchange an OGP later, each Part Preset the use of it updates mechanically.

You’ll be able to use the Preset Supervisor’s clear out and seek equipment to browse the Design Device freebie’s in depth number of Possibility Staff Presets for Typography (frame/headings with variable fonts/sizes), Spacing (constant padding/margins the use of quantity variables), Borders (radius/width/shade from variables), Shadows (cushy/refined with HSL family members), Backgrounds, Buttons, and extra.

You’ll be able to create new Part Presets in a couple of techniques: by way of styling a component and the use of the Assign Preset icon to create one, or by way of developing one immediately within the Preset Supervisor.

Let’s create a brand new Icon Part Preset for an icon and nest some Possibility Staff Presets inside it. This assists in keeping the entirety constant and simple to control must making a decision to make design adjustments one day.

Open the Preset Supervisor and use the filtering characteristic to seek for Icon components.

Within the Icon dropdown menu, find the + Upload New Preset button and click on it so as to add a brand new preset.

This may occasionally release the Preset Preview window, the place you’ll create and edit your preset. Use the Content material and Design tab settings to genre the module as you want, upload any Possibility Staff Presets you need to incorporate, after which click on Save Preset so as to add it to the Preset Supervisor.

To use it, make a selection an Icon module at the web page, click on the Assign Preset icon within the top-right nook of the module’s settings, and make a selection the brand new preset. The preset applies right away, pulling in related Variables and Possibility Staff Presets assigned to it.

Construct The Construction

Together with your design machine in position, transfer into development your layouts. That is the place you’ll leverage Divi 5’s new options to create a high-performance construction.

Select Your Structure Taste

Get started with sections and rows the use of Divi’s Structure Taste choices: Flexbox or CSS Grid. Flexbox is perfect for many layouts, permitting you to make use of horizontal and vertical gaps to create completely uniform spacing between modules with out handbook margins. For extra complicated, asymmetrical designs, CSS Grid allows you to regulate rows and columns concurrently inside a unmarried container.

Make the most of Premade Sections And Modules

To get began briefly, load one of the vital 350+ sections to be had within the Divi 5 Design Device freebie.

Upload modules and follow Presets for immediate styling.

As your web page grows, use the Layers View to stick arranged. Labeling your layers right here turns the panel right into a searchable listing of your whole web page hierarchy.

Complex Parts And Dynamic Content material

To succeed in extra complicated layouts, use Module Teams and Nested Rows. Those will let you position modules and rows inside modules and/or rows, offering larger structure flexibility whilst keeping up a blank Record Object Style (DOM) construction.

Use Canvases to create pop-ups, mega menus, and different off-canvas content material, conserving your Primary Canvas clutter-free. Pair those with the Canvas Portal Module to inject your off-canvas content material precisely the place it’s wanted.

Mix Canvases with Interactions to release pop-ups on a time prolong or create further interactions for mouseover results, together with scale, translate, and zoom.

Use the Loop Builder to design a single-item structure and repeat it for dynamic content material comparable to posts, merchandise, portfolios, or different repeatable content material.

In the end, be sure you’re the use of Semantic Parts to outline key landmarks for assistive tech. Assigning tags comparable to primary, nav, or footer immediately within the module settings improves each search engine marketing and accessibility.

Customise And Revise Types

As soon as your construction is in position, Divi 5’s sensible equipment assist you to refine and varnish your web site with precision.

Layer Diversifications With Stacked Presets

As an alternative of constructing dozens of distinctive Part Presets, use Stacked Presets for diversifications. As an example, follow a base number one button preset, then stack a secondary preset on height. This modular means assists in keeping your design blank and your site-wide updates easy.

Make Focused Refinements With The Inspector

Don’t waste time looking via design settings. The Inspector panel acts as a centralized command heart, appearing you each environment that has been changed from the default. You’ll be able to establish and tweak kinds for a component and all its kids from this unmarried view, considerably dashing up the revision procedure. The Inspector may be a useful tool for changing Divi Fast Websites or Structure Packs from Block to Flex.

World Potency With To find And Change

The To find and Change characteristic is a handy gizmo for bulk updates. If making a decision to transport from a static spacing price to a brand new Design Variable, use this device to change values throughout all of the web page right away.

Grasp Responsive Design

Use the Responsive Editor to view and modify your design throughout seven customized breakpoints side-by-side. This guarantees your fluid typography, spacing, and different design settings scale completely from the smallest telephone to ultra-wide desktops while not having to toggle perspectives repeatedly.

Take a look at And Safely Preview

Use the Preset Preview throughout the Preset Supervisor to check world adjustments. This lets you visually verify how a typography or shade exchange will glance sooner than it propagates throughout your whole web site, making sure your revisions by no means result in sudden design breaks.

Optimize And Release

Ahead of you hit submit, run via this ultimate tick list to make sure your new construct is speedy, available, and waiting for long term expansion.

Set World Defaults

If there may be an Part Preset you’ve used all over the challenge, click on the famous person icon within the Preset Supervisor. This units it because the World Default, making sure any new pages you upload to the web site one day apply your design machine mechanically.

Carry out An Accessibility Move

Test your Semantic Parts within the Complex Tab > HTML. Be certain that your number one navigation is categorised nav and your primary content material is categorised primary. Those small tweaks make a significant distinction for display screen readers and seek engine scores.

Export Your Design Device

The actual energy of Divi 5 lies in its portability. Export your Design Variables and Presets as JSON recordsdata. You currently have a customized logo equipment that you’ll import into your subsequent challenge to jumpstart your construct procedure in seconds.

Obtain The Divi 5 Design Device Freebie

To peer all of Divi 5’s options operating in combination in an actual, ready-to-use setup, obtain our unfastened Divi 5 Design Device. It comprises a big number of importable JSON recordsdata, together with premade phase layouts, world Design Variables, web page layouts, masses of Part and Possibility Staff Presets, Theme Builder templates, and non-compulsory Theme Customizer settings. The program offers you the entirety you wish to have to get began with Divi 5 and is helping you know how the entire workflow connects.

Obtain the Information

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:sooner than { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@media most effective display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}

Obtain For Loose

Sign up for the Divi E-newsletter and we can e-mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus heaps of different wonderful and unfastened Divi sources, guidelines and methods. Apply alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely kind on your e-mail cope with beneath and click on obtain to get right of entry to the structure pack.

You could have effectively subscribed. Please test your e-mail cope with to verify your subscription and get get right of entry to to unfastened weekly Divi structure packs!

Get started Development Internet sites With Divi 5 These days!

Divi 5‘s Design Device transforms new builds into environment friendly, constant, and arranged processes. Variables give you the basis, whilst presets ship reusable, modular parts that scale simply.

Obtain Divi 5 as of late, experiment with the Visible Builder, and construct your framework for long-term scalability. Use the Divi 5 Design Device freebie to kickstart tasks briefly and acquire a greater working out of the way it all comes in combination.

Obtain Divi 5 Be informed Extra About Divi 5

The submit Mastering Divi 5’s Design Device: How To Means New Builds seemed first on Sublime Subject matters Weblog.

Divi 5 Public Beta 9 Free up Notes

Nick Roach — Tue, 17 Feb 2026 12:00:00 +0000

The Divi 5 Public Beta is to be had nowadays. In the event you favor the revel in to Divi 4, it’s able to be used. In the event you use Divi 5, you’ll understand an replace notification for Public Beta 9. We free up new Divi 5 variations each two weeks, and every one improves upon the ultimate.

In the event you haven’t attempted Divi 5 but, give it a check and tell us what you assume.

What’s New In Public Beta 9?

We carried out 119 worm fixes and enhancements and launched two new options: the Command Heart and new Menu Modules, Menu Looping, and Interactions.

The legitimate free up date for Divi 5 is set for February twenty sixth. Till then, we’ll proceed to deal with the comments of our beta testers, solving insects and making small enhancements with every replace.

In my spare time, I’ve additionally been holding the ball rolling for your maximum asked options. If you wish to get an early inside of scoop, I frequently submit growth reviews within the Divi Theme Customers Fb staff. Sign up for us!

New Menu Modules, Menu Looping, and Interactions

We launched New Menu Modules, Menu Looping, and Interactions in Public Beta 8.3. 🎉

Those new options, together with Divi 5’s broader programs like canvases and semantic components, all come in combination to provide the freedom to construct any form of menu, together with mega menus, slide-in menus, and extra.

We aren’t completed including extra menu options. We’re including them piece by way of piece, and every piece unlocks a large vary of latest probabilities.

The Command Heart

We launched The Command Heart in Public Beta 9. 🎉

Mastering it looks like unlocking a superpower, giving the time period’ energy consumer’ true that means. You’ll briefly execute instructions akin to including components, navigating your website online, leaping to express settings, opening panels, and extra.

Fixes & Enhancements

Here’s a record of all fixes and enhancements integrated on this replace.

Added new Command Heart.
Fastened damaged kinds at the first web page load when Crucial CSS was once disabled, which befell on some hosts because of PHP stats cache.
Got rid of the previous international fonts editor in want of the brand new fonts staff within the variable supervisor.
Added new Transfer movements to correct click on and keyboard shortcuts (transfer up, down, most sensible, and backside).
Added new Reduce instructions to correct click on and keyboard shortcuts (minimize, minimize guardian, minimize kids).
Added new cmd+a shortcut to choose all components inside of a container.
Fastened a subject matter the place newly stored library pieces didn’t seem within the library panel till Visible Builder was once reloaded.
Fastened Responsive Editor reset conduct for deliberately empty responsive content material values and ensured resets inherit the most recent larger-breakpoint price.
Fastened scroll results configured in Part Presets or Choice Staff Presets no longer being visual within the Part Settings Panel till manually toggled.
Fastened PHP caution when viewing 404 pages with Theme Builder templates that experience disabled header or footer layouts.
Fastened preset visibility toggles so disabled breakpoints may also be unchecked with out the use of reset.
Fastened responsive column construction can’t be set from Module Choices.
Fastened Module Choices’ Alternate Column Construction modal displays all choices on non-desktop breakpoints regardless row’s format sort.
The ‘Alternate Column Construction ‘modal within the Fastened Module Choices Alternate Column Construction displays an fallacious affirmation pop-up when Module Settings is open for any module.
Fastened Module Choices’ Alternate Column Construction modal doesn’t correctly revert column construction when canceling adjustments from Module Settings.
Fastened damaged module settings panel when the recently edited module settings are a toddler of an international phase/row + being got rid of.
Fastened the fallacious affirmation pop-up that incorrectly seems on recently edited module settings that could be a baby of an international phase/row when including a brand new module inside of the similar international phase/row.
Fastened the fallacious affirmation pop-up that looks at the recently edited module, which is inside of an international phase/row when a module inside of some other international phase/row is got rid of.
Fastened keyboard shortcuts within the Lend a hand modal exhibiting fallacious modifier key labels on Home windows. Meta key shortcuts now as it should be display “Ctrl” on Home windows whilst conserving “⌘ cmd” show on macOS.
Fastened customized D4 library modules no longer rendering after switching to D5.
Fastened Divi Carousel Maker column defaults no longer loading in Divi 5 shortcode compatibility.
Fastened a subject matter the place international library pieces may well be inserted into an international library template, permitting nested international components.
Fastened the Social Media Apply module customized CSS no longer making use of in Visible Builder and Frontend by way of aligning selector implementations throughout TypeScript and PHP.
Fastened Weblog Module format migration when Grid format is about by the use of module preset, making sure presets with Grid format as it should be migrate to show as a grid as an alternative of full-width.
Fastened place choices no longer inheriting as it should be on pill and get in touch with breakpoints after Divi 4 to Divi 5 migration, inflicting components to lose their supposed positioning beneath 980px.
Fastened instance module conversion outlines lacking from construct metadata, which brought about D4 modules to load as shortcode modules in D5.
Fastened background mix mode no longer operating when parallax impact is enabled with background symbol and colour or gradient. The mix mode now as it should be applies to the parallax background part in each Visible Builder and frontend, and the background symbol and mix mode are correctly rendered at the wrapper part for cellular instrument reinforce.
Fastened docked module settings header clicks, inflicting the panel to fade when docked to the left sidebar.
Fastened Touch Shape box margin-bottom spacing no longer making use of at the frontend when the use of flex format.
Fastened baby module preset genre attributes (like background colour) no longer overriding guardian preset kids attributes when each guardian and baby modules have presets carried out.
Added complete documentation tutorials for changing Divi 4 presets to Divi 5 and enforcing complex preset options, enabling third-party builders to completely migrate their modules to Divi 5.
Up to date documentation to give an explanation for wrapper hook reactivity and a child-module subscription development.
Fastened the heading module no longer having the ability to use possibility staff presets from different modules’ name textual content possibility teams.
Fastened a frontend factor the place invalid hash hyperlinks like ## may cause jQuery selector mistakes when modules had been clicked.
Fastened international modules being stripped from the web page all the way through D5 Readiness migration.
Fastened font-size values with out devices (e.g., “30” as an alternative of “30px”) in migrated Divi 4 layouts now render as it should be with right kind CSS devices.
Fastened the empty Parts possibility staff showing when enhancing part presets for structural modules (Phase, Row, Column, Staff). Parts teams used for structural baby modules are actually correctly hidden all the way through preset enhancing, whilst Parts teams with fields (Weblog, Gallery, and many others.) and different teams with fields (Visibility, Place, Scroll Results) stay visual and practical.
Up to date preset attributes for Parts staff fields in WooCommerce modules (Cart Merchandise, Checkout Knowledge, Product Pictures, Product Meta) from preset: ‘content material’ to preset: [‘html’] to make sure right kind preset capability.
Added 3 new Modules: Hyperlink, Dropdopwn, and Ahead of/After Symbol Slider.
Lowered the Interplay script length by way of doing away with lodash dependencies.
Added new breakpoint interplay triggers.
Added new selector-based interplay goals.
Added new menu loop question sort.
Added multi-selection reinforce to the divi/make a selection box, together with up to date typing and UI conduct.
Fastened the Visible Builder Web page Bar name for Theme Builder layouts so it displays the template identify and format sort.
Fastened Hero Module “Make Fullscreen” possibility no longer resetting peak in Visible Builder preview when disabled.
Fastened a subject matter the place the MapContainer box element would crash with a TypeError when utilized in third occasion extension modules.
Fastened darkish mode choice no longer persisting at the Theme Builder major web page after web page refresh. The Theme Builder control interface now as it should be lots and applies the stored darkish mode choice on web page load.
Added inside documentation information for DeepHive human interplay patterns, protecting @point out laws, repair activity workflows, and HITL processes.
Fastened Theme Builder template import, doing away with backslashes from Customized CSS get away sequences.
Fastened nested modules no longer being known as international when added inside of international modules.
Fastened affirmation popups showing unnecessarily when including nested modules from international module settings.
Added defaultOpen assets to module possibility teams, permitting teams to be open by way of default when module settings first load whilst ultimate collapsible.
Fastened a subject matter the place the Social Media Apply module incorrectly carried out the clearfix CSS magnificence when the use of Flex or Grid layouts. The clearfix magnificence is now carried out handiest when the use of Block format, getting rid of the desire for !essential declarations in customized CSS for Flex and Grid layouts.
Fastened unit picker dropdowns overflowing the viewport by way of constraining peak and enabling inside scrolling.
Fastened loop content material no longer exhibiting at the frontend when loop-enabled modules seem after disabled loops or different content material on huge pages.
Fastened deadly error when uploading Divi Library layouts containing third-party shortcodes (e.g., WooCommerce) by way of including defensive dealing with for non-array shortcode outputs within the import pipeline.
Fastened loop excerpts, together with Put up Name output when no guide excerpt is about.
Fastened the Social Media Apply module’s particular person icon font-size override no longer operating when the guardian icon length was once set.
Fastened the canvas z-index box no longer being stored when clicking the save button prior to blur validation completes. Added z-index box to canvas settings modal to keep watch over canvas stacking order, with right kind state control to make sure values are all the time captured as it should be.
Fastened nested international modules in imported Divi Library layouts no longer being editable by way of changing them to their exact module sorts all the way through import.
Fastened textual content shadow no longer showing on cellular breakpoint when handiest colour is overridden, and pill breakpoint is lacking. Cell breakpoint now as it should be inherits the manner assets from the desktop and generates CSS with the supposed colour.
Fastened a subject matter the place the Responsive Editor closed when converting heading codecs or including hyperlinks within the Visible Tab.
Fastened the Staff Carousel module hyperlinks opening two times when the Loop possibility is enabled, and the hyperlink goal is about to open in a brand new tab.
Fastened possibility staff preset background colours no longer rendering as it should be in Visible Builder for baby modules (slides). Choice staff preset genre attributes are actually correctly integrated in baby module rendering, making sure preset colours are detected and displayed as it should be in VB preview.
Up to date roadmap documentation knowledge with the most recent GitHub problems knowledge.
Fastened nested modules throughout the Blurb module, inheriting undesirable textual content alignment from the Blurb container’s alignment settings.
Fastened Slider and Fullwidth Slider preset background colours no longer showing in native module settings.
Fastened: staff preset CSS no longer printing within the builder when lazy-loaded.
Overhauled the Divi CSS document gadget to mark recordsdata a stale slightly than deleting them, permitting pages cached by way of efficiency plugins to reference previous CSS recordsdata when getting out of sync with Divi.
Fastened preset CSS order printing too overdue on the second one web page load on index pages that used Theme Builder templates, inflicting kinds to wreck because of other CSS precedence.
Added reinforce for automated cache clearing for added cache plugins, together with Flyingpress, Nitropack, Tremendous Web page Cache, SpeedyCache, WP Compress, Swift Efficiency, and the Cloudflare WordPress Plugin.
Fastened Google Fonts changing into dequeued on WooCommerce product class templates after the second one web page load.
Fastened the Divi module and have caches no longer clearing as it should be for taxonomy pages when saving a person Theme Builder format.
Fastened the default Divi theme header no longer shrinking on scroll on non-singular pages.
Fastened lacking flex column categories on staff modules when decided on by the use of the Design > Sizing choices.
Fastened the gallery module lacking grid CSS when run in backward compatibility mode.
Got rid of pointless animation script dependency from circle counter and quantity counter modules.
Fastened block weblog CSS compiled when legacy weblog attributes had been detected.
Fastened factor the place dynamic CSS recordsdata (vital CSS, deferred CSS) weren’t regenerating after cache clearing, making sure stale CSS is correctly refreshed when posts are stored or cache is cleared.
Fastened slider and slide modules dropping textual content alignment after migrating from Divi 4 to Divi 5 when the use of parent-to-child inheritance for textual content orientation settings.
Fastened fallacious submenu dropdown positioning after migration by way of restoring Divi 4 conduct for nested submenus and correctly dealing with first-level submenu overflow detection.
Fastened related SVG pictures disappearing when hyperlink URLs are resolved from dynamic content material.
Fastened kinds no longer exhibiting after web page refresh when modules use Situation Choices by way of making sure modules all the time sign in their kinds prior to checking show prerequisites.
Fastened spacing between Touch Shape possibility labels and hyperlinks for checkbox and radio fields.
Fastened dynamic web page hyperlinks breaking when the related web page slug is modified. Hyperlinks now retailer submit IDs as an alternative of slugs, making sure they continue to be legitimate even after slug adjustments.
Fastened factor the place growing a brand new Choice Staff preset from module settings didn’t robotically open the preset enhancing panel.
Fastened PHP warnings displayed at the frontend when date/time prerequisites evaluation to false by way of updating warfare detection to make use of the right kind Divi 5 box identify.
Fastened Theme Customizer fonts no longer loading at the frontend in Divi 5 when the use of “Supply Sans Professional” or different renamed Google Fonts.
Fastened the Hero Scroll Down icon reset so it now not resets comparable fields or displays incorrectly.
Fastened international module cases conserving international standing when inserted inside of different international modules.
Up to date conversion define documentation to incorporate the childrenName assets requirement for parent-child module conversion, fighting baby modules from being misplaced all the way through Divi 4 to Divi 5 conversion.
Fastened parallax hover backgrounds in order that they display on hover and now not divulge pictures underneath clear hover states.
Fastened Visible Builder crash when Responsive Editor modal was once restored from workspace state with out required box attributes, now appearing “No box is chosen” message as an alternative of crashing the applying.
Fastened third-party builders being not able to make use of customized onChangeCallback callbacks for web page settings fields. Customized callbacks now absolutely substitute default conduct (matching module settings development), and defaultValue validation now lets in empty strings.
Fastened nested Put up Carousel modules no longer rendering till a resize in accordion, toggle, and slider boxes.
Fastened the Code module content material box so it calls for just one click on to turn on enhancing. The editor now turns on when soaring over the textarea, permitting quick typing at the first click on.
Fastened right-click possibility menus that exceeded the viewport peak by way of making tall lists scrollable and holding submenus available.
Fastened preset-derived border labels within the Inspector appearing object-style paths as an alternative of pleasant titles.
Fastened Theme Builder archive pages dropping Loop Builder kinds and Google Fonts after repeated refreshes.
Fastened Heading Textual content preset font sizes appearing computed defaults throughout heading ranges.
Fastened customized CSS selector suffix dealing with so commas inside of: is() lists now not break up module selectors.
Fastened PHP deprecation warnings when the use of WP Smush 3.16.1+ by way of updating to make use of the brand new hook identify whilst keeping up compatibility with older Smush variations.
Added lazy loading to the preliminary builder render to fortify load occasions.
Fastened undesirable backside spacing showing on unmarried submit article components in Visible Builder.
Fastened a deadly error when seek effects templates used dynamic writer content material and no effects had been discovered.
Added divi_off_canvas_should_load filter out hook to permit third-party plugins to sign in Off Canvas CPT on their pages.
Fastened preset dropdown in Interplay Builder no longer remaining after deciding on a preset or clicking outdoor the dropdown.
Fastened format jumps going on when sticky components turn on in Theme Builder headers containing Off Canvas modules. The repair improves precision for all sticky behaviors by way of making sure every sticky part handiest impacts its personal guardian part.
Fastened Web page Supervisor no longer updating instantly when the web page name is modified within the Web page Settings modal. Name adjustments now mirror in an instant in Web page Supervisor with out requiring a save or web page refresh.
Fastened conditional common sense fields rendering as undeniable textual content inputs in D4 shortcode modules, permitting right kind rule-based conditional show configuration with box/situation/price selectors and upload/take away row capability.
Fastened background pictures loading on pill and get in touch with, even if explicitly got rid of, with handiest the desktop symbol set.
Fastened web page settings, customized CSS sanitization so fashionable serve as values, URLs, and formatting persist after save.
Fastened nested disabled modules changing into just about invisible when a couple of guardian modules had been disabled on other gadgets by way of making use of opacity styling handiest to the topmost disabled module in every ancestor chain.
Added hook reinforce for customized situation choices in Conditional Show, enabling third-party plugins to sign in absolutely practical customized prerequisites with initialization, settings UI, tooltips, and backend analysis common sense.
Fastened default preset styling all the way through D4→D5 migration by way of conserving _initial as default on contemporary websites and remapping handiest when D5 defaults exist already.
Up to date job documentation and Visible Builder translations for factor 47938.
Fastened Divi Library format enhancing so the primary header presentations whilst holding Reside Preview hidden.
Fastened Blurb module symbol width migration factor the place SVG pictures with most sensible placement had been incorrectly focused and full-width as an alternative of left-aligned at customized width. Additionally mounted aspect-ratio distortion in pictures with proportion widths by way of the use of max-width as an alternative of width for proportion values.

Bounce Into Divi 5 As of late

The Divi 5 Public Beta is to be had nowadays. Give it a check out, and tell us what you assume! The legitimate free up date has been set, however there’s nonetheless time to leap in early and get your footing.

In the event you discover a worm, record it to our group, and we’ll repair it. We’ll proceed to paintings aggressively so as to add new options and cope with comments.

Keep tuned for a brand new model of Divi 5 each two weeks.

The submit Divi 5 Public Beta 9 Free up Notes seemed first on Sublime Topics Weblog.

👉 20 Merchandise In The Divi Market With Superb Reductions Proper Now

Donjete Vuniqi — Sun, 07 Dec 2025 12:00:00 +0000

Our Cyber Monday Sale is nearly over, however you continue to have time to grasp the 12 months’s inner most reductions on Divi Memberships, Divi-powered merchandise, and services and products. As an example, the Divi Market gives financial savings of as much as 80% off top rate plugins, kid issues, structure packs, and hand-picked bundles.

That is your remaining probability to replenish on Divi Market merchandise at costs that gained’t be to be had once more till subsequent 12 months.

The Greatest Reductions Of The 12 months

Throughout the Divi Cyber Monday sale, you’ll get the most productive costs of the 12 months on Divi and its whole ecosystem of goods. Check out one of the vital headline offers:

🎉 Get Divi Professional for 80% Off — Our greatest Cyber Monday be offering! Unencumber Divi, Divi 5, Divi Sprint, Divi AI, Divi Cloud, Divi VIP, Divi Groups, and a Divi Market credit score in a single package deal.
🎉 Repackage Your Subscriptions For Large Financial savings — Present participants can repackage their present subscriptions right into a Divi Professional package deal to cut back prices and free up extra services and products.
🎉 Get Divi AI for as much as 70% Off — Divi AI generates content material, code, and pictures without delay within the builder.
🎉 Get Divi Cloud for 44% Off — Divi Cloud allows you to save and reuse layouts, templates, and snippets throughout your whole tasks.
🎉 Get Divi Groups for 44% Off — Divi Groups makes it simple to collaborate with teammates and shoppers the use of shared get admission to and controlled roles.
🎉 Get Divi VIP for 44% Off — Divi VIP gives precedence 24/7 beef up plus additional financial savings within the Divi Market.
🎉 Save as much as 70% on Divi Market Merchandise — Pick out up standard Divi Market pieces at steep Cyber Monday reductions.

Get Header Structure Pack

Merchandise In The Divi Market With Superb Reductions Proper Now

We’ve hand-picked 20 of the most well liked, highest-rated merchandise within the Market which might be lately on sale. Whether or not you wish to have a kid theme, modules, ecommerce beef up, or weblog layouts, those are the inner most reductions you’ll see all 12 months.

Many merchandise have dropped to below $10 (some even below $2!). Those costs disappear when the sale clock hits 0, so scroll down and grasp the entirety you wish to have prior to the sale is over!

1. Avanti

👉 80% OFF

Avanti is a multipurpose Divi Kid Theme with 60+ ready-to-use pages protecting 9 niches and entire WooCommerce beef up. With customized slide-ins, two professionally designed turn field modules, and 5 prebuilt headers. It additionally contains greater than 30 design parts that can be utilized anyplace to your web site. The only-click demo import instrument guarantees fast setup, permitting you to construct your web site in a couple of clicks.

Limitless site utilization, 1 12 months of precedence beef up and updates from the developer, plus a 30-day money-back ensure. Now simplest $7 (common $35) throughout the Divi Cyber Monday Sale — grasp it prior to the deal ends.

Get Avanti as of late for ~~$35~~ $7 🤯

Get Avanti

2. Header Structure Pack

👉 80% OFF

The Header Structure Pack gives over 260 customizable headers, giving your site an impressive first influence. The pack gives types for any undertaking, from fundamental to complex layouts optimized for Woo consumers with distinctive cellular designs. You’ll be able to additionally free up tough navigation choices just like the full-screen overlay menu, slide-in menus, and complex mega menus.

With seamless integration into the Theme Builder, you’ll succeed in the pro glance and optimized person enjoy you wish to have, straight away.

Get Header Structure Pack as of late for $9 $1.80 🤯

3. Running a blog Toolkit

👉 80% OFF

The Divi Running a blog Toolkit makes your content material stand out and takes your weblog to the following point. This pack gives 50+ distinctive, customizable weblog and publish templates to create a pro search for your web site. The equipment options 12 grid designs, 8 sidebar templates, 8 checklist layouts, and four full-width templates to grasp consideration.

In the event you’re searching for a brand new search for your weblog, the Running a blog Toolkit is a smart position to start out.

Get Running a blog Toolkit as of late for $9 $1.80 🤯

Get Running a blog Toolkit

4. Clara

👉 80% OFF

Clara is a minimalist kid theme designed so as to add sophistication and magnificence on your Divi web site. It’s splendid for portfolios, blogs, companies, or creators in search of a female, chic glance. At its core, Clara strips away litter for a sophisticated aesthetic. Fluid typography, white area, refined animations, and responsive layouts be certain your content material shines with out distraction.

Clara allows freelancers and companies to construct blank, gorgeous web sites for portfolios and shoppers comfortably.

Get Clara as of late for ~~$35~~ $7 🤯

Get Clara

5. Divi Pricing Desk Pack With Toggle Choice

👉 80% OFF

Divi Pricing Desk Pack With Toggle Choice is a smart addition for Divi’s integrated Pricing Tables module, turning in complex layouts, interactive toggles, and seamless customization to construct compelling pricing showcases. The module gives 20 pre-built types, all of which can be absolutely responsive and customizable, with a devoted toggle choice that may be enabled or disabled to compare your personal tastes.

Snatch this module throughout our Cyber Monday sale for an enormous 80% cut price off the common value.

Get Divi Pricing Desk Pack With Toggle Choice as of late for ~~$9.99~~ $2 🤯

Get Divi Pricing Desk Pack With Toggle Choice

6. DiviFlash

👉 60% OFF

DiviFlash is the tough all-in-one plugin that lets you construct surprising, extremely purposeful websites sooner and with unrivaled ingenious freedom. This unmarried, complete package deal packs the entirety you wish to have to make bigger your design chances, together with over 65 leading edge modules, 50+ structure packs, 20+ very important extensions, and 800+ segment layouts. Unencumber complex options like animated headings, interactive symbol hotspots, and flexible carousel modules for posts and merchandise.

The integrated extensions—such because the intuitive Pop-up Maker, customized Login Customizer, and SVG document beef up — permit you to streamline your workflow and actually do extra with Divi.

Get DiviFlash as of late for ~~$89~~ $35.60🤯

Get DiviFlash

7. Divi Footers Pack

👉 50% OFF

The Divi Footers Pack is the very important structure assortment for development polished, official footers to your web site. Footers are vital for navigation, search engine marketing, and conversions; this pack guarantees yours are all the time functioning at their absolute best. This tough structure pack will give you 80+ trendy, attention-grabbing footer designs, totaling over 160 other footer layouts when together with variants. Each and every design is absolutely responsive and integrates seamlessly with Divi’s Theme Builder for hassle-free customization.

Prevent losing time development footers from scratch and get started impressing your target audience with fine quality footers, all whilst saving 50% off the common value.

Get Divi Footers Pack as of late for ~~$19~~ $9.50 🤯

Get Divi Footers Pack

8. Woo Very important

👉 50% OFF

Woo Very important bridges Divi’s design prowess with WooCommerce’s tough ecommerce engine, permitting creators to construct high-converting on-line retail outlets. This top rate extension delivers an intensive number of purpose-built modules, ready-to-use segment layouts, and full-page templates—all absolutely editable within Divi’s intuitive Visible Builder. From attention-grabbing dynamic product grids and carousels to sophisticated add-to-cart buttons, quick-view pop-ups, wishlist integration, and complex layered navigation, each part is designed to fortify the buying groceries enjoy and force gross sales.

Whether or not you’re launching a boutique storefront or a large-scale mega-store, Woo Very important hurries up workflows and unleashes unending creativity. Designers and builders can now change into same old WooCommerce websites into polished, brand-aligned retail outlets that glance and carry out like customized builds.

Get Woo Very important as of late for ~~$79~~ $39.50 🤯

Get Woo Very important

9. Divi Carousel Module 3.0

👉 50% OFF

Divi Carousel Module 3.0 delivers a flexible, high-performance carousel extension that permits customers to create dynamic, attention-grabbing content material presentations. This module lets you show off testimonials, portfolios, symbol galleries, or product showcases in clean, responsive sliders inside the Visible Builder. It options autoplay controls with adjustable speeds, lazy loading for speedy functionality, and versatile layouts supporting more than one columns, arrows, dots, and overlay textual content, in conjunction with complex filters for seamless integration with WooCommerce.

Whether or not you’re a blogger highlighting reader tales, an company showcasing shopper wins, or an ecommerce professional rotating featured merchandise, this module transforms static pages into interactive presentations.

Get Divi Carousel Module 3.0 as of late for ~~$29~~ $14.50 🤯

Get Divi Carousel Module 3.0

10. Divi Gallery Prolonged

👉 50% OFF

Divi Gallery Prolonged is without equal enhancement for Divi’s integrated Gallery module, unlocking complex layouts, filtering, and show choices to create symbol showcases in mins. It gives a number of types, together with Masonry, Justified, Carousel, Video, and Dynamic, all of which can be absolutely responsive for flawless viewing on any display screen measurement. Without difficulty arrange pictures into classes, making sure intuitive navigation for guests. Customise each element the use of the Visible Builder, together with overlay results, lightbox integrations, and exact controls for pagination, spacing, borders, and extra.

Divi Gallery Prolonged is absolutely appropriate with Divi 4 and future-proof for Divi 5, permitting you to change into static symbol galleries into interactive, conversion-driving property that shine.

Get Divi Gallery Prolonged as of late for ~~$29~~ $14.50 🤯

Get Divi Gallery Prolonged

11. Divi Dressmaker Pack

👉 50% OFF

The Divi Dressmaker Pack is a complete package deal that includes over 720 pre-built layouts that let Divi customers to construct official web sites with out ranging from scratch. It spans niches like ingenious companies, tech startups, and way of life blogs. Each and every design is absolutely customizable the use of the Visible Builder. The pack contains dozens of commonplace sections — comparable to hero, provider, CTA, touch, and testimonial — plus Theme Builder templates for constant site-wide design, protecting headers, footers, 404 pages, and posts. It additionally gives complete WooCommerce beef up with templates for product, store, cart, and checkout pages.

If you wish to have a versatile structure pack for more than one undertaking sorts, the Divi Dressmaker Pack is a wonderful selection.

Get Divi Dressmaker Pack as of late for ~~$19~~ $9.50 🤯

Get Divi Dressmaker Pack

12. Divi Plus

👉 50% OFF

Divi Plus is the top rate multipurpose plugin created to extend your web site’s capability and look with over 100 new modules, 5 extensions, and just about 1000 sections and templates. This selection-rich plugin unlocks chances for each builders and customers, offering extremely customizable answers for development Divi web sites. You achieve get admission to to a library of assets, together with over 150 kid issues and pre-built web sites.

The module set contains tough gear for WooCommerce, like Product Carousels and Product Accordions, along design boosters like Wavy Gallery, Break up Symbol, and Scrolling Zoom Gallery. In the event you’re searching for an impressive, all-purpose toolset for Divi, grasp Divi Plus as of late.

Get Divi Plus as of late for ~~$79~~ $39.50 🤯

Get Divi Plus

13. Divi Toolbox

👉 45% OFF

Divi Toolbox is without equal settings toolkit for Divi, turning in complex results and site-wide improvements throughout the intuitive WordPress Customizer. You’ll be able to create surprising customized login pages in mins. Upload animated customized pre-loaders, pop-ups, and particle backgrounds with only a few clicks. Change into headers with sticky conduct, clean hover animations, shrink-on-scroll results, and overlapping emblems. Construct spectacular footers the use of expose animations, customized styling, and swish back-to-top buttons.

There also are cellular settings to fortify the glance of hamburger menus, in conjunction with parallax scrolling, responsive breakpoints, and touch-friendly controls that glance flawless on each software. Bloggers may even love Divi Toolbox, with simple tweaking of archive and class pages, 9 weblog checklist structure sorts, and a customizable sidebar.

Absolutely appropriate with Divi 4 and future-proof for Divi 5, Divi Toolbox allows you to push Divi additional than ever prior to — all with out customized coding.

Get Divi Toolbox as of late for ~~$89~~ $48.95 🤯

Get Divi Toolbox

14. Divi Very important

👉 40% OFF

Divi Very important is without equal energy pack for Divi creators, boasting an expansive arsenal of over 64 top rate modules, 14+ extensions, 650+ premade segment layouts, 40+ starter templates, and eight+ complete site templates. It contains options like 3-d turn bins, parallax timelines, brand carousels, symbol results, dynamic touch bureaucracy, and extra, for final creativity. From pop-up developers to testimonial sliders, each element is streamlined for velocity, cellular responsiveness, and boundless customization.

Universally appropriate with Divi 4 and Divi 5, it maintains a mild footprint for optimum functionality throughout limitless web sites. It’s very best for freelancers and companies, enabling them to cut back building time, fortify person interplay, and free up design attainable comfortably.

Get Divi Very important as of late for ~~$79~~ $47.40 🤯

Get Divi Very important

15. Divi Weblog Extras

👉 40% OFF

Divi Weblog Extras is without equal glow-up for Divi’s Weblog module, unlocking complex layouts, filtering, and customization choices to change into peculiar weblog feeds into enticing content material presentations. Dive into 10 structure types, together with Field Prolonged, Grid Prolonged, Block Prolonged, Masonry, Vintage, Complete-width, Slider, Record, Vertical, and extra. Streamline navigation with class filtering, including customizable classes, and more than one sorting choices. Built-in without delay into the Visible Builder, customers can customise each part by means of including overlay hover results, lightbox previews, slider results, and extra.

Divi Weblog Extras helps a number of content material sorts, together with posts, taxonomies, customized publish sorts, seek effects, and similar posts, making it a flexible choice for exhibiting key knowledge throughout portfolios, information websites, or way of life content material to your Divi site. It contains over 50 pre-built weblog web page layouts for fast inspiration, raising your web site with easy interactivity.

Get Divi Weblog Extras as of late for ~~$49~~ $24.50 🤯

Get Divi Weblog Extras

16. Divi Loop Extender

👉 35% OFF

The Divi Loop Extender plugin provides complex sorting, filtering, and dating controls without delay within the Visible Builder. Type your loops precisely the best way you need with multi-level ordering. Mix meta keys, ACF fields, and WooCommerce information (together with costs, inventory ranges, and product attributes) to create the easiest collection each time. Clear out posts with precision the use of creator, publish standing, customized taxonomies, or versatile date levels powered by means of ACF date/time fields. Want to display simplest destiny occasions or conceal drafts from the entrance finish? It’s only a few clicks. Show similar content material without difficulty. Hyperlink posts via easy classes and tags, or use ACF publish object and dating fields to construct sensible Comparable Merchandise, Crew Participants, or You Would possibly Additionally Like sections that replace mechanically.

Divi Loop Extender provides you with the lacking information superpowers whilst holding the entirety 100% visible. Construct sooner, extra versatile, and higher-performing Divi web sites with out ever leaving the Visible Builder.

Get Divi Loop Extender as of late for ~~$25~~ $16.25 🤯

Get Divi Loop Extender

17. Divi Touch Shape Helper

👉 30% OFF

Divi Touch Shape Helper is a strong extension that provides over 115 top rate options without delay into your local Divi touch bureaucracy, remodeling them right into a professional-grade answer. It supplies very important capability, comparable to saving entries without delay to the database, making sure you by no means leave out a lead. Set up user-uploaded recordsdata with the devoted Document Add box, whole with choices for measurement limits and document kind restrictions. The Date & Time Picker permits for advanced scheduling or even gives ICS Calendar syncing with Google and Outlook.

The plugin additionally features a suite of junk mail coverage options, together with invisible honeypot, key phrase blacklists, and Google reCAPTCHA integration. From affirmation emails and SMTP settings to virtual signatures, customized dynamic merge tags, and exporting entries to CSV, this instrument fills each purposeful hole.

Get Divi Touch Shape Helper as of late for ~~$36~~ $25.20 🤯

Get Divi Touch Shape Helper

18. Desk Maker

👉 30% OFF

Desk Maker is the definitive Divi extension that transforms desk introduction from a chore into a unbroken design enjoy without delay within the Visible Builder. This tough module provides you with whole keep an eye on over your desk’s glance and construction. Taste each unmarried phase, from content material and columns to headers and footers, right down to particular person cells. Make your information pop with various content material, because the module helps textual content, icons, buttons, and pictures without delay inside of any mobile.

Desk Maker lets you put into effect complex options, comparable to column and row spanning for intricate layouts, or customise widths and heights as wanted. For lengthy tables, permit the ‘Scrolling with Sticky Headers’ technique to stay column titles visual always. Desk Maker is responsive, too, permitting you to show your tables on small units the use of the accordion view to avoid wasting display screen area.

Get Desk Maker as of late for ~~$39~~ $27.30 🤯

Get Desk Maker

19. Divi MadMenu

👉 25% OFF

Divi MadMenu is without equal menu builder for Divi, permitting you to create absolutely responsive navigation headers with flexibility. Leverage the Visible Builder to design mega menus, sticky headers, multi-level drop-downs, pop-ups, slide-in menus, and extra that captivate customers from the beginning. Choose from 13 ready-to-use demo layouts or construct from scratch, then fine-tune each side with responsive controls for alignment, visibility, ordering, and breakpoints throughout units.

Divi MadMenu gives two modules for Divi, permitting you to keep an eye on each design side of your menus. Each and every part is absolutely customizable with design choices for desktop menus, cellular menus, emblems, seek, cart, and CTA buttons. Combine seamlessly with WooCommerce for AJAX cart updates, are living seek, and dynamic content material. Upload login/logout toggles for customers or incorporate vertical menus for distinctive layouts.

Absolutely appropriate with Divi 4 and 5, Divi MadMenu unlocks unending ingenious attainable, remodeling peculiar menus into enticing options with a couple of clicks.

Get Divi MadMenu as of late for ~~$49~~ $36.75 🤯

Get Divi MadMenu

20. DiviMenus

👉 25% OFF

The DiviMenus plugin transforms the best way you manner site navigation, letting you construct customized, interactive menus past same old Divi headers. The extension integrates without delay into the Visible Builder, permitting you to design menus, grids, pop-ups, and content material hotspots comfortably. DiviMenus supplies two specialised modules — DiviMenus and DiviMenus Flex — to create round, horizontal, slide-in, or vertical menus with icons, pictures, or textual content and assign more than one hyperlink sorts to them. Those hyperlink sorts are the real energy of the plugin, enabling you to open same old URLs, cause any Divi Library structure, or use the display hyperlink kind to toggle the visibility of any part at the web page.

Whether or not you’re growing advanced mega menus, symbol hotspots, or easy social sharing buttons, DiviMenus provides you with whole design freedom to create just about any form of menu you need.

Get DiviMenus as of late for ~~$49~~ $36.75 🤯

Get DiviMenus

All Merchandise At A Look

I do know that was once so much to soak up, so right here’s a easy desk with each and every product, its value, and an instantaneous hyperlink to shop for.

	Product	Description	Common Worth	Sale Worth
1	Avanti	A multipurpose Divi kid theme that includes 60+ pages, 9 niches, and WooCommerce integration.	~~$35~~	$7 (80% Off)
2	Header Structure Pack	260+ absolutely customizable header and menu layouts for Divi, together with mega and slide-in choices.	$9	$1.80 (80% Off)
3	Running a blog Toolkit	50+ distinctive weblog and publish layouts for Divi, providing grid, sidebar, and fullwidth choices.	$9	$1.80 (80% Off)
4	Clara	Female Divi kid theme with 16+ web page designs for contemporary manufacturers and artistic execs.	~~$35~~	$7 (80% Off)
5	Divi Pricing Desk Pack With Toggle Choice	20 predesigned, mobile-friendly pricing tables for Divi, that includes an invaluable value toggle choice.	~~$9.99~~	$2 (80% Off)
6	DiviFlash	All-in-one Divi plugin providing 65+ modules and 20+ extensions for complete site building.	~~$89~~	$35.60 (60% Off)
7	Divi Footers Pack	80+ trendy and wonderfully designed footer layouts, simply built-in the use of Divi’s Theme Builder.	~~$19~~	$9.50 (50% Off)
8	Woo Very important	All-in-one Divi WooCommerce answer with tough modules and extensions like Wishlist and Fast View.	~~$79~~	$39.50 (50% Off)
9	Divi Carousel Module 3.0	Tough Divi carousel plugin growing surprising, customizable sliders for emblems, testimonials, pictures, and content material.	~~$29~~	$14.50 (50% Off)
10	Divi Gallery Prolonged	Complex gallery plugin with 5 modules for growing masonry, justified, dynamic, and video galleries.	~~$29~~	$14.50 (50% Off)
11	Divi Plus	Whole design package deal with over 720 distinctive, trendy design parts for all of a sudden development official Divi web sites.	~~$79~~	$39.50 (50% Off)
12	Divi Dressmaker Pack	Top rate multipurpose plugin including 100+ modules and extensions, plus 150+ unfastened kid issues for Divi.	~~$19~~	$9.50 (50% Off)
13	Divi Toolbox	Tough extension for site-wide customizations, complex cellular menus, weblog layouts, and footer results with out coding.	~~$89~~	$48.95 (45% Off)
14	Divi Very important	Characteristic-rich plugin with 64+ modules and 14+ extensions for growing surprising, interactive, and purposeful Divi web sites.	~~$79~~	$47.40 (40% Off)
15	Divi Weblog Extras	Tough weblog structure plugin that includes 10 distinctive layouts and filtering for horny, custom designed Divi archive pages.	~~$49~~	$24.50 (40% Off)
16	Divi Loop Extender	Extends Divi 5 Loop Builder with complex sorting, filtering, and dating good judgment for content material.	~~$25~~	$16.25 (35% Off)
17	Divi Touch Shape Helper	Upgrades Divi Touch Shape with 115+ options together with document uploads, signatures, junk mail coverage, and database entries.	~~$36~~	$25.20 (30% Off)
18	Desk Maker	Creates gorgeous, responsive Divi tables that includes row/column spanning, buttons, icons, and cellular accordion view.	~~$39~~	$27.30 (30% Off)
19	Divi MadMenu	Versatile and robust Divi extension for growing customized headers, slide-in, and full-screen menus.	~~$49~~	$36.75 (25% Off)
20	DiviMenus	Without equal menu builder for growing popups, content material toggles, mega menus, and extremely enticing interactive pieces.	~~$49~~	$36.75 (25% Off)

Final Likelihood To Get 80% Off!

As we shine the highlight on 20 standout Divi Market merchandise, starting from tough modules like Divi Very important and Divi Plus to flexible kid issues like Avanti, they provide implausible price for Divi customers. They allow customers to increase capability, streamline workflows, and construct websites with out ranging from scratch, all whilst keeping up contemporary and conversion-focused designs.

Timing couldn’t be higher with the Cyber Monday Sale in complete swing, slashing as much as 80% off Divi Professional, Divi AI, Divi Cloud, Divi Groups, Divi VIP, and a treasure trove of particular person Divi Market merchandise. You’ll be able to additionally revel in massive financial savings of as much as 70% off Divi Market Bundles, together with the Module Package deal, Ecommerce Package deal, Kid Subject matters Package deal, Advertising and marketing Package deal, and Weblog Package deal.

Head to the Divi Market prior to they’re long gone!

The publish 👉 20 Merchandise In The Divi Market With Superb Reductions Proper Now gave the impression first on Sublime Subject matters Weblog.

🎁 Take hold of The Restricted-Time Divi Cyber Monday Bundles: $1,944 Financial savings

Deanna McLean — Tue, 02 Dec 2025 15:13:00 +0000

The Divi Cyber Monday Sale is on now — the easiest second to seize massive financial savings with our unique Cyber Monday Bundles packed filled with top class Divi Market merchandise.

From surprising layouts and robust plugins to kid issues and extensions that take your websites to the following point, we’ve curated bundles for each roughly venture and funds. With mixed reductions of 70% off every package (and much more for Divi VIP participants) and over $1,944 in overall financial savings in the event you seize all 5, those limited-time collections are the neatest technique to supercharge your Divi toolbox this Cyber Monday.

Divi customers can save 70% with our Divi Market Product Bundles
New customers can save as much as 80% with the Divi Professional Package deal
Current customers can save as much as 80% with our All Get right of entry to Package deal

Get the Cyber Monday Module Package deal

Our Unique Divi Market Bundles (70% Off)

As a part of our Cyber Monday Sale, we’ve put in combination 5 unique Divi Market Bundles constructed to open up new chances to your Divi tasks. Each and every one is fascinated about a key space that can assist you design quicker, smarter, and with extra ingenious freedom. Whether or not you need to energy up your web pages with complicated modules, free up state-of-the-art options, or get speedy get right of entry to to loads of top class layouts, that is your second to take your Divi workflow to the following point.

You’re getting a large 70% off the common worth of each package. Those hand-picked collections are crafted to maximise your toolkit and make your design procedure smoother than ever — however best whilst Cyber Monday lasts.

Take Me To The Bundles

1. Cyber Monday Module Package deal (70% Off)

The Cyber Monday Module Package deal is without equal toolkit for boosting Divi websites with dynamic, interactive parts that make each venture pop. This unique assortment packs 17 merchandise from the Divi Market, that specialize in navigation, galleries, content material shows, and extra that can assist you construct enticing web pages quicker than ever. Whether or not you’re construction ecommerce retail outlets, portfolios, or user-focused options like countdown timers, those gear free up never-ending ingenious chances with out the effort.

Create mega menus, hover results, and sooner than and after sliders, and extra, that mix seamlessly with Divi to spice up your workflow and wow your target market. All the way through our Cyber Monday Sale, save an ideal 70% off the common worth. Top off now and turn into your Divi tasks sooner than the sale ends.

What’s Incorporated In The Cyber Monday Module Package deal

	Product	What You Get	Common Worth	Package deal Worth (70% OFF)
1	Woo Make bigger	10+ modules, 6 extensions, and 5 format packs for Woo	~~$79~~	✔️
2	Ideally suited Mega Menu	Create mega menus for Divi with hover results, icons, and extra	~~$39~~	✔️
3	Earlier than After Slider And Symbol Accordion	Earlier than & after symbol slider and accordion modules for Divi	$9	✔️
4	Complex Divi Tabs Module	A module that permits you to make extra elaborate tabs with Divi	~~$29~~	✔️
5	Divi Desk Of Contents Maker	Build up clarity with a devoted TOC module	~~$18~~	✔️
6	Login Module Professional	Customise your WordPress login display	~~$22~~	✔️
7	Divi Timer Professional	A devoted countdown timer module that expands the local Divi module	~~$25~~	✔️
8	Divi MadMenu	2 menu modules, 7 header parts, and unfastened demos for Divi	~~$49~~	✔️
9	Divi Gallery Prolonged	Create more than a few forms of galleries for Divi	~~$29~~	✔️
10	Divi Symbol Hover	250+ symbol hover results for Divi	~~$49~~	✔️
11	Masonry Gallery	Create masonry galleries with filtering for Divi	~~$25~~	✔️
12	Divi Crucial	60+ modules, 14+ extensions, and 700+ layouts for Divi	~~$79~~	✔️
13	Divi Carousel Module 3.0	Carousel module with 6+ layouts, coverflow, and common results for Divi	~~$29~~	✔️
14	Divi Content material Toggle	A devoted toggle module to toggle textual content, Divi library pieces, and photographs	~~$19~~	✔️
15	Divi Occasions Calendar	Modules to create distinctive occasions pages with the Occasions Calendar in Divi	~~$54~~	✔️
16	Desk Maker	Create enticing tables with a devoted desk module for Divi	~~$39~~	✔️
17	DiviMenus	Devoted menu module for growing lightboxes, modals, and extra in Divi	~~$49~~	✔️
🎁	Cyber Monday Module Package deal	90+ Divi modules, dozens of layouts, and 10+ extensions	~~$642~~	$192.60

This package unlocks ingenious chances with over 90 Divi modules and loads of pre-made sections. Make a choice from a number of mega menu modules, desk of content material modules, symbol gallery modules, and extra, to make your Divi tasks stand out.

One of the vital module varieties you’ll get:

Filterable Galleries
Mega Menus
WooCommerce modules
Earlier than & After Sliders
Masonry Galleries
Carousel Modules
Symbol Hover Results
Desk of Contents Modules
And lots of extra!

Get the Module Package deal lately for ~~$642~~ $192.60 🤯

Get the Kid Theme Package deal

2. Cyber Monday Kid Theme Package deal (70% Off)

The Cyber Monday Kid Theme Package deal is your fast-track to stunning, niche-perfect Divi websites that release nearly straight away. This unique package options 11 top class kid issues from the Divi Market, every fitted to particular industries and vibes to spice up your tasks with ready-made taste. Whether or not you’re spinning up a weblog, on-line direction web site, or spotlighting your portfolio, those issues ship pixel-perfect designs that adapt without difficulty for your imaginative and prescient.

Hand-selected for varied wishes, from training and retail to ingenious companies, this package is to be had for a extremely discounted worth throughout our Cyber Monday Sale.

What’s Incorporated In The Kid Theme Package deal

	Product	What You Get	Common Worth	Package deal Worth (70% OFF)
1	Weblog & Mag Theme – Float	Kid theme with 7 house web page layouts, 2 publish templates, and inner web page layouts	~~$49~~	✔️
2	Divi eLearn Package deal	An LMS theme for Divi that helps a number of LMS plugins and Woo	~~$99~~	✔️
3	Molti LMS for LearnDash	LMS kid theme with 70+ pages, 10 header designs, and extra	~~$35~~	✔️
4	Clara	Sublime kid theme fitted to photographers, coaches, bloggers, and freelancers	~~$35~~	✔️
5	Artist Theme (Ecommerce)	An ecommerce kid theme appropriate for artists, photographers, illustrators, and different creatives	~~$70~~	✔️
6	Divi Search engine optimisation Company Theme	A Divichild theme designed for Search engine optimization	~~$29.99~~	✔️
7	Titan	A kid theme with 30+ pages for Divi	~~$25~~	✔️
8	Molti Ecommerce	Kid theme with 25+ pages, 10 header designs, 10 footer designs, and 80+ module designs	~~$35~~	✔️
9	Imaginative and prescient	Kid theme with 20+ pages, designed for ingenious execs	~~$25~~	✔️
10	Molti	Kid theme with 22+ pages, 6 headers and footers, and 70+ part designs	~~$25~~	✔️
11	Avanti	A kid theme with 60+ pages and 30+ parts preferrred for more than one niches	~~$35~~	✔️
🎁	Cyber Monday Kid Theme Package deal	90+ Divi modules, dozens of layouts, and 10+ extensions	~~$462.99~~	$138.90

The Cyber Monday Kid Theme Package deal is filled with issues appropriate for a wide variety of web pages, preferrred for LearnDash, TutorLMS, WooCommerce, and extra, making this package vital for freelancers having a look to spin up stunning websites temporarily.

With the Kid Theme Package deal, you’ll get:

WooCommerce Kid Topics
LMS Kid Topics
Multi-Objective Kid Topics
Sublime Kid Topics
Search engine optimization Kid Topics
Weblog/Mag Kid Topics
And a lot more!

Get the Kid Theme Package deal lately for ~~$462.99~~ $138.90🤯

Get the Advertising Package deal

3. Cyber Monday Advertising Package deal (70% Off)

The Cyber Monday Advertising Package deal is preferrred for riding conversions and fascinating audiences throughout Divi tasks with pro-level engagement gear. This package rounds up 18 crucial merchandise from the Divi Market, fascinated about producing leads, growing promotions, and showcasing interactive content material to amp up your virtual technique. Whether or not you’re teasing product launches, grabbing consideration with alert bars and popups, or guiding possibilities via multi-step paperwork, those belongings flip browsers into patrons with aptitude.

This package is thoroughly put in combination to gasoline enlargement, giving entrepreneurs an edge over the contest.

What’s Incorporated In The Advertising Package deal

	Product	What You Get	Common Worth	Package deal Worth (70% OFF)
1	Alert Bars	Alert Bar module for growing high-converting notifications in Divi	~~$49~~	✔️
2	Earlier than After Slider And Symbol Accordion	Divi plugins with a Earlier than and After symbol module and Accordion module	$9	✔️
3	Divi Pricing Desk Pack With Toggle Possibility	20+ pricing toggles for Divi	~~$9.99~~	✔️
4	Search engine optimization Advertising Company Divi Format	Search engine optimization advertising and marketing company format, together with header and footer	~~$9.99~~	✔️
5	Divi Touch Shape Helper	Touch shape plugin with 115+ options that spice up Divi’s integrated touch shape module	~~$36~~	✔️
6	Divi Hotspot	Divi module for including tooltips to Divi pictures	~~$14~~	✔️
7	Divi Multi Step Paperwork Plugin For Touch Shape 7	Create multi-step paperwork for Touch Shape 7 in Divi	~~$29~~	✔️
8	Divi Social Plus	Plugin for strengthening on-line presence via embedding dynamic social content material into Divi	~~$49~~	✔️
9	Imaginative and prescient	Multipurpose Divi Kid Theme for growing a certified web site	~~$25~~	✔️
10	Divi Timer Professional	Distinctive advertising and marketing countdown timer module with options like auto-restart and evergreen timers	~~$25~~	✔️
11	Divi Social Sharing Button Maker	Extremely-customizable social sharing buttons module for posts and Theme Builder templates	~~$18~~	✔️
12	Touchdown Pages for Divi	Format pack of 70+ high-converting, premade Divi touchdown pages	~~$19~~	✔️
13	Divi ConKit Professional	A complete conversion package plugin for Divi, together with touch paperwork and modules	~~$59~~	✔️
14	Cover & Display Professional	Plugin to keep an eye on the visibility of Divi parts according to stipulations like agenda, person function, and geolocation	~~$39~~	✔️
15	Divi Gravity Paperwork	Gravity Shape Module allows you to embed and elegance gravity paperwork in Divi’s visible builder	~~$69~~	✔️
16	Divi Below Building	Plugin for simply growing skilled beneath building, upkeep, and coming quickly pages	$9	✔️
17	Divi Content material Toggle	Module to show any content material compactly and interactively, frequently used for pricing tables or comparability	~~$19~~	✔️
18	Divi Overlays Popups	The Final Divi Popup Builder for growing popups, complete display overlays, and modals the use of the Divi Builder	~~$79~~	✔️
🎁	Cyber Monday Advertising Package deal	18 Top class Divi Plugins and Format Packs fascinated about Conversion, Paperwork, and Advertising	~~$566.98~~	$170.10

This package gives 18 extensions designed to point up your WordPress advertising and marketing web site.

One of the vital advertising and marketing merchandise you’ll get:

Touch Shape Boosting Modules
Content material Toggles
Popup Makers
Display/Cover Content material
Countdown Timers
Social Sharing Buttons
Touchdown Pages
Symbol Hotspots
And a lot more!

Get the Advertising Package deal lately for ~~$566.98~~ $170.10 🤯

Get the Ecommerce Package deal

4. Cyber Monday Ecommerce Package deal (70% Off)

The Ecommerce Package deal is your powerhouse for remodeling Divi right into a revenue-generating gadget, entire with WooCommerce merchandise and shop-ready layouts that convert clicks into gross sales. This unique package delivers 16 merchandise from the Market, zeroed in on cart integrations, product showcases, and buyer buying groceries trips to construct high-performing on-line retail outlets in some distance much less time. Whether or not you’re customizing account pages, increasing Woo with grid perspectives, or construction polished product pages, those gear make ecommerce retail outlets extra impactful with out the tech complications.

This package has the entirety from mini carts to tooltips to kid issues, making it the easiest resolution for customers having a look to construct environment friendly Divi retail outlets. Get this implausible package now, sooner than time runs out.

What’s Incorporated In The Cyber Monday Ecommerce Package deal

	Product	What You Get	Common Worth	Package deal Worth (70% OFF)
1	Divi My Account Web page	Customise and elegance the WooCommerce “My Account” web page with Divi	~~$59~~	✔️
2	Woo Make bigger	Final WooCommerce resolution for Divi, streamlining retailer capability	~~$79~~	✔️
3	Divi Woo Professional	Trendy store format pack for Divi and WooCommerce ecommerce retail outlets	$9	✔️
4	WooCommerce Grid	Grid layouts to customise Divi store pages the use of WooCommerce	$9	✔️
5	DiviCommerce	250+ Divi ecommerce template layouts for what you are promoting	~~$15.99~~	✔️
6	Woo Crucial	All-in-one Divi WooCommerce resolution with 10+ tough modules	~~$79~~	✔️
7	Woo Layouts	Inventive layouts to customise all Divi WooCommerce retailer pages	$9	✔️
8	Divi Hotspots Plus	Spotlight particular symbol spaces interactively the use of animated hotspots and tooltips	~~$15~~	✔️
9	Ideally suited Retailer	Top class Divi kid theme for WooCommerce ecommerce retail outlets.	~~$29~~	✔️
10	Divi Swift Ajax Mini Cart	Provides a customizable AJAX mini cart to Divi and WooCommerce	~~$19~~	✔️
11	Divi Social Sharing Button Maker	Whole, feature-rich WooCommerce resolution with many integrated modules.	~~$18~~	✔️
12	Titan	Function-rich WooCommerce kid theme for any form of store	~~$25~~	✔️
13	Molti Ecommerce	Trendy, multipurpose Divi kid theme for industry and ecommerce	~~$35~~	✔️
14	DiviCommerce	Ecommerce Divi kid theme for construction fashionable WooCommerce retail outlets	~~$25~~	✔️
15	Divi Menu Cart	Transfer and customise the WooCommerce cart icon in Divi menus	~~$12~~	✔️
16	Cover & Display PRO	Keep an eye on content material visibility according to person, function, agenda, and geolocation	~~$39~~	✔️
🎁	Cyber Monday Ecommerce Package deal	16 extensions, layouts, and kid issues for ecommerce	~~$592.99~~	$177.90

The Cyber Monday Ecommerce Package deal is the easiest resolution for Divi customers who wish to create stunning, efficient buying groceries studies for shoppers or consumers, in a fragment of the time.

One of the vital merchandise you’ll get come with:

Customizable Account Pages
WooCommerce Kid Topics
Ajax Mini Carts
Cover/Display Content material
WooCommerce Layouts
And a lot more!

Get the Ecommerce Package deal lately for ~~$592.99~~ $177.90🤯

Get the Weblog Package deal

5. Cyber Monday Weblog Package deal (70% Off)

The Cyber Monday Weblog Package deal is without equal assortment for any individual waiting to show their Divi website right into a reader-loving weblog. This unique package brings 18 top class merchandise from the Divi Market, hand-selected to hide each perspective of recent running a blog — from kid issues to complicated publish modules — that stay guests scrolling, sharing, and coming again for extra.

Standout kid issues like Float, NeoBlogger, and Blogy will let you release your weblog temporarily and successfully whilst different gear on this package will let you create fast publish and archive templates. For higher clarity, merchandise like Desk of Contents Maker make it simple for readers to navigate lengthy shape content material. With this package, there are never-ending tactics to craft blank, Search engine optimization-friendly blogs that glance polished {and professional}.

What’s Incorporated In The Weblog Package deal

	Product	What You Get	Common Worth	Package deal Worth (70% OFF)
1	Weblog & Mag Theme – Float	A top class Divi kid theme designed for growing skilled and fashionable weblog and mag web pages, that includes a swish design and more than one publish layouts	~~$49~~	✔️
2	Divi Weblog Extremely	A Divi plugin that extends the default Weblog Module with 10 new surprising weblog layouts and robust customization choices to make your weblog stand out	~~$29~~	✔️
3	Running a blog Toolkit	A collection of high-converting, skilled weblog publish layouts for Divi to assist create stunning and attractive weblog content material temporarily	$9	✔️
4	NeoBlogger	A modern, minimalist weblog kid theme for Divi that specializes in clarity and a blank aesthetic for more than a few weblog niches	~~$59~~	✔️
5	Divi Desk of Contents Maker	A Divi plugin that routinely generates a clickable and customizable Desk of Contents to your posts and pages according to heading tags	~~$18~~	✔️
6	Weblog Layouts	A number of distinctive and classy weblog publish layouts and weblog module designs to toughen the classy of your Divi weblog segment	$9	✔️
7	Weblog Layouts	A plugin providing 10+ surprising weblog publish and archive web page layouts for Divi, enabling you to provide your content material in distinctive and attractive tactics	~~$30~~	✔️
8	Divi Swift Ajax Product Seek	A plugin that provides immediate, real-time AJAX seek capability in particular for WooCommerce merchandise, bettering the buying groceries enjoy in your Divi website	~~$19~~	✔️
9	Divi Instagram Feed	A top class Divi module for exhibiting stunning, customizable feeds from more than one Instagram accounts at once in your web site	~~$39~~	✔️
10	Whole Divi Weblog Toolkit	A complete package that includes more than one fashionable and blank layouts for weblog posts, classes, and creator pages	~~$9.99~~	✔️
11	Divi Social Plus	A powerful social media integration instrument for Divi, offering extremely customizable icons, observe buttons, and social sharing options with more than a few placement choices	~~$49~~	✔️
12	iJOO – Complex Weblog/Mag Module	A complicated module for Divi that gives tough options and customized layouts for construction refined weblog, mag, and information web pages	~~$49~~	✔️
13	Divi Social Sharing Buttons Maker	A light-weight and robust plugin for including extremely customizable social sharing buttons to Divi weblog posts, with beef up for more than a few placements like inline and floating	~~$18~~	✔️
14	Divi Weblog Module Pack	A number of professionally designed weblog publish and archive web page layouts for Divi, providing numerous kinds to fit any weblog area of interest	~~$9.99~~	✔️
15	Divi Weblog Professional	A complete weblog design gadget for Divi, together with more than one templates for unmarried posts, archives, and weblog modules, fascinated about higher efficiency and clarity.	~~$39~~	✔️
16	Blogy	A Divi kid theme in particular designed for bloggers, that includes a blank, fashionable, and attractive design with more than one homepage and weblog publish layouts	$9	✔️
17	Divi Put up Prolonged	A Divi module that complements the default Put up Module, making an allowance for extra complicated show of weblog posts with distinctive styling and filtering choices	~~$19~~	✔️
18	Divi Weblog Extras	A well-liked Divi plugin providing 8 fashionable weblog layouts (Grid, Masonry, and so on.) and intensive customization choices for pro weblog pages	~~$49~~	✔️
🎁	Cyber Monday Weblog Package deal	18 extensions, layouts, and kid issues for bloggers	~~$512.98~~	$153.90

The Cyber Monday Weblog Package deal gives a big number of modules, extensions, layouts, and kid issues designed to come up with just about limitless choices to your WordPress weblog.

The extensions, kid issues, and layouts you’ll get:

Social Sharing Buttons
Massive Weblog Module Packs
Masses of Weblog Web page Layouts
Instagram Feeds
Weblog-Centered Kid Topics
And a lot more!

Get the Weblog Package deal lately for ~~$512.98~~ $153.90🤯

Get Divi Professional at 80% Off

Get Extra Market Reductions with Divi Professional and Divi VIP

Nonetheless trying to find even larger financial savings? We’ve were given two extra tips up our sleeve. Each and every Divi VIP member will get an extra 10% off the entirety within the Divi Market (sure, together with those bundles). Stack that on best and also you’re having a look at a large 70% off + some other 10% VIP cut price.

Get Divi VIP at 44% Off

Divi Professional participants (that’s the total VIP remedy: Divi AI, Divi Cloud, Divi Theme + Plugins, Divi VIP, and Divi Sprint all incorporated) additionally ranking a candy $50 Market credit score on us with each acquire.

Lock In The Maximum Financial savings With Divi Professional Package deal (80% Off)

We’ve already teased some of the sweets Market consumers free up with Divi Professional, however agree with us—there’s an entire lot extra magic within the complete Divi Professional bundle price speaking about. This package is straight-up saving company house owners, freelancers, and companies a ton of money and time. Logo new to the Divi staff? Break this hyperlink for the very best cut price you’ll to find any place.

Get Divi Professional at 80% Off

Financial savings Of Divi Professional vs. Purchasing Each and every In my view

On occasion, it’s onerous to know the entire financial savings to be had with Divi merchandise throughout a large gross sales tournament like this one. We’ve made it easy beneath.

Product	Standard Worth (In keeping with 12 months)	All the way through Black Friday (In keeping with 12 months)
Divi	$89	~~$67~~
Divi AI	$288	~~$92~~
Divi Cloud	$96	~~$54~~
Divi VIP	$96	~~$54~~
Divi Groups	$96	~~$54~~
Divi Professional (Contains All Merchandise Above)	$888.00	$176.00

With this package, you’ll save $142 when put next to shopping for every product one after the other at their present discounted charges — and $712 off the common particular person costs (this 12 months by myself). That places the total Divi Professional suite to your arms for a fragment of what it could most often value. Plus, you’ll get a $50 credit score for the Divi Market incorporated along with your acquire.

Get Divi Professional Package deal

Divi Carrier Bundles For Current Customers (As much as 80% Off)

Already a Divi member (annual or lifetime)? You’re nonetheless in at the Cyber Monday love. Current customers can seize the similar killer Divi Professional deal proper inside of your Participants House. Simply head to the Gives tab — the All Get right of entry to Package deal is sitting proper on the best, unlocking each Divi Professional carrier with financial savings as much as 80%.

If you make a decision that you simply don’t want the entirety in Divi Professional however nonetheless wish to get monetary savings with a package, go searching, and also you’ll to find more than a few mixtures of your favourite Divi products and services that you’ll package in combination.

See All Divi Package deal Gives

Package deal	Divi Professional Products and services	Black Friday Sale Cut price	Standard Worth (in keeping with 12 months)	Black Friday Sale Worth (in keeping with 12 months)	Overall Financial savings
1	Divi Cloud, Divi Groups, Divi VIP, Divi AI, Topics & Plugins, DonDivi	80% off	$888	$176	$712
2	Divi Cloud, Divi Groups, Divi VIP, Divi AI, DonDivi	79% off	$749	$160	$589
3	Divi Cloud, Divi Groups, Divi AI, Topics & Plugins, DonDivi	77% off	$742	$168	$574
4	Divi Cloud, Divi VIP, Divi AI, Topics & Plugins, DonDivi	77% off	$742	$168	$574
5	Divi Groups, Divi VIP, Divi AI, Topics & Plugins, DonDivi	77% off	$742	$168	$574
6	Divi Cloud, Divi Groups, Divi AI, DonDivi	78% off	$653	$141	$512
7	Divi Cloud, Divi VIP, Divi AI, DonDivi	78% off	$653	$141	$512
8	Divi Groups, Divi VIP, Divi AI, DonDivi	78% off	$653	$141	$512
9	Divi Cloud, Divi AI, Topics & Plugins, DonDivi	77% off	$646	$150	$496
10	Divi Groups, Divi AI, Topics & Plugins, DonDivi	77% off	$646	$150	$496
11	Divi VIP, Divi AI, Topics & Plugins, DonDivi	77% off	$646	$150	$496
12	Divi Cloud, Divi AI, DonDivi	80% off	$557	$112	$445
13	Divi Groups, Divi AI, DonDivi	80% off	$557	$112	$445
14	Divi VIP, Divi AI, DonDivi	80% off	$557	$112	$445
15	Divi AI, Topics & Plugins, DonDivi	78% off	$550	$122	$428
16	Divi Cloud, Divi Groups, Divi VIP, Topics & Plugins, DonDivi	72% off	$550	$152	$398
17	Divi Cloud, Divi Groups, Divi VIP, DonDivi	75% off	$461	$117	$344
18	Divi Cloud, Divi Groups, Topics & Plugins, DonDivi	72% off	$454	$127	$327
19	Divi Cloud, Divi VIP, Topics & Plugins, DonDivi	72% off	$454	$127	$327
20	Divi Groups, Divi VIP, Topics & Plugins, DonDivi	72% off	$454	$127	$327
21	Divi Cloud, Divi Groups, DonDivi	76% off	$365	$88	$277
22	Divi Cloud, Divi VIP, DonDivi	76% off	$365	$88	$277
23	Divi Groups, Divi VIP, DonDivi	76% off	$365	$88	$277
24	Divi Cloud, Topics & Plugins, DonDivi	72% off	$358	$99	$259
25	Divi Groups, Topics & Plugins, DonDivi	72% off	$358	$99	$259
26	Divi VIP, Topics & Plugins, DonDivi	72% off	$358	$99	$259

See All Divi Package deal Gives

Don’t Wait, The Divi Cyber Monday Sale Is Reside!

The clock is ticking as our Cyber Monday Sale is in complete swing. As you’re already mindful, we provide implausible financial savings on all our bundles, together with offers on Divi Market Bundles and our Divi merchandise. Don’t fail to notice this chance to take hold of those improbable offers whilst they ultimate.

The publish 🎁 Take hold of The Restricted-Time Divi Cyber Monday Bundles: $1,944 Financial savings seemed first on Sublime Topics Weblog.

Obtain Divi 5 Be informed Extra About Divi 5

How To Use CSS Grid In WordPress

Aayush — Sun, 26 Oct 2025 12:00:00 +0000

CSS Grid provides you with two-dimensional regulate so you’ll position pieces precisely the place they belong, as a substitute of combating stacks and columns. It’s like giving your web page a easy map the place you’ll drop facets into transparent spots and let the grid maintain the structure.

On this put up, you’ll learn to use grids in WordPress and why Divi 5 makes the method visible, rapid, and versatile. In a position to construct layouts that really feel designed, no longer simply stacked? Let’s dive in.

What Is CSS Grid Precisely

CSS Grid is a structure device for arranging content material on internet pages the use of rows and columns concurrently. You might want to all the time construct those layouts through nesting bins and the use of floats or different workarounds, however Grid makes the method cleaner and more uncomplicated.

You practice Grid to a container, and it divides the distance into rows and columns. The container turns into a grid, and its direct youngsters turn into grid pieces that sit down within the cells.

You regulate the scale of each and every row and column. Cause them to all of the identical dimension. Or make some larger than others. Combine fastened sizes with versatile ones.

You put up the construction as soon as on your CSS. Then you definately position pieces the place you wish to have them. No wish to stack bins within bins anymore.

Including A Grid To WordPress

CSS Grid became internet layouts into one thing you have to design as a substitute of hacking in combination. WordPress now helps grids, as do the preferred WordPress web page developers. Figuring out your choices is helping you select the best way for what you’re construction. Let’s discover:

The usage of Gutenberg

WordPress features a Grid block (a variation of the Crew block). You’ll be able to insert it with /grid or by the use of the block inserter.

The Grid gives two modes. Auto calculates columns from a minimal column width you place. Guide makes use of a hard and fast column depend and allows you to position blocks in particular cells.

Controls reside within the block sidebar. Make a choice a method, set column depend or minimal width, and modify row/column gaps. Pieces can span more than one cells (e.g., a header throughout 3 columns with playing cards underneath). Blocks within the grid get measurement controls. Make a choice any block, open Dimensions, and set what number of columns/rows it spans. On-canvas handles additionally help you resize through dragging.

Why Gutenberg Isn’t Preferrred For Making Grids

Nice for easy layouts, however there are limits. There’s no local UI for various column counts in keeping with breakpoint, and fine-tuning cellular spacing regularly calls for customized CSS.

Guide mode makes use of a hard and fast column depend, so stacking/wrapping isn’t computerized. When you use Guide, believe two or 3 columns or transfer to Auto for smaller displays. Some controls are simple to leave out, and the minimum-width slider might exchange gadgets as you modify it.

When columns cave in, content material doesn’t all the time fill to be had area, which is able to depart gaps at positive sizes. Blending Auto with fastened column settings will also be complicated, and a few blocks don’t all the time resize reliably. There are not any particular row-height controls within the elementary UI, and there’s no UI for grid-template-areas within the Grid block.

The usage of In style Web page Developers

Elementor and Bricks Builder sit down on the best of the WordPress web page builder marketplace. They’ve constructed huge person bases and get common updates. When those gear added CSS Grid make stronger, it gave the look of the solution everybody sought after. Let’s see how that in truth performs out.

The usage of Elementor

Elementor added Grid Boxes in fresh updates. You turn on the function via Settings, then choose Grid when including a brand new container.

The interface means that you can set column and row counts, modify gaps, and different elementary settings. By means of default, each and every grid cellular holds one widget; to put more than one pieces in a cellular, nest a Container within it.

The usage of Bricks

Bricks Builder helps CSS Grid as neatly. Make a choice any part (phase, container, block, or div), open its settings, and alter the Show assets to grid. That part turns into your grid container.

You outline construction via grid-template-columns and grid-template-rows fields the use of usual CSS values. Sort “1fr 1fr 1fr” for 3 equivalent columns or “200px 1fr 2fr” to combine fastened and versatile sizing. Hole controls maintain spacing between cells.

Grid pieces get Grid Column and Grid Row controls for exact positioning the use of CSS grid line numbers. Auto-placement settings decide how pieces go with the flow whilst you don’t specify positions manually.

The place Those Choices Vary (and Their Limits)

Each developers way CSS Grid inside of their present frameworks, which impacts the way you construct positive patterns.

Elementor’s Grid Container treats each and every cellular as a unmarried part. If you wish to have more than one pieces in a single cellular, you’ll nest a Container within that cellular to carry them. This works, nevertheless it provides an additional layer to regulate in additional advanced layouts.

To put more than one widgets in one grid cellular in Elementor, upload a nested Container within that cellular.

For extra complicated preparations, exact spanning, responsive tweaks in keeping with breakpoint, you should still succeed in for some customized CSS in Elementor.

Bricks means that you can convert any phase/container/block/div to a Grid through surroundings Show to grid, then outline construction with usual CSS homes (grid-template-columns/rows, gaps, and line-based placement). It really works neatly, nevertheless it assumes some familiarity with CSS Grid terminology and values.

How Divi 5 Handles CSS Grid

1000’s of WordPress websites run on Divi presently. It really works as each a theme and a visible web page builder, designed for somebody who needs a qualified website online however doesn’t need to write code or care for WordPress’s awkward block editor.

Divi 5 takes issues to a brand new stage. As an alternative of patching up the outdated device, we began contemporary. All of the theme is now powered through fashionable internet requirements, which means that you recuperate pace and extra regulate over your designs.

Shortcodes are out. Blocks, Grids, and Flexbox are in. This transfer approach your pages best load what they want, so the whole thing runs quicker. Your web page remains cleaner, too. Plus, those structure methods put you in command of spacing, alignment, and the way the whole thing suits in combination. Development sophisticated layouts turns into so much more straightforward this manner.

You maintain the whole thing on the container stage. Select what number of columns and rows you wish to have. Set their sizes. Area them out then again you want. Then drop your content material in, and it fills the grid in keeping with your setup. You’ll be able to create just about any structure this manner.

What’s New In Divi 5?

The Grid device represents only one piece of what makes Divi 5 other. We rebuilt all of the platform from scratch, which means that you get enhancements around the board that have an effect on how you’re employed each unmarried day.

Right here’s what else modified:

The Inspector aggregates all colours, fonts, sizes, photographs, and presets from any part and its youngsters into one panel. Click on a bit, see each colour used during, then exchange them all of sudden. Proper-click the rest and choose Investigate cross-check to open it.
Customized Attributes upload any HTML characteristic to facets and sub-elements. You’ll be able to now come with alt textual content, identify tags, rel attributes, aria-labels, and accessibility markers with out touching code.
Loop Builder pulls content material from any put up sort dynamically. Works with WooCommerce merchandise, ACF fields, customized put up sorts, and repeater fields. You’ll be able to loop the rest, no longer simply predefined loop modules, and nest loops within different loops.
WooCommerce Modules come with many product-focused modules for customized product pages and class grids. Cart and checkout modules also are to be had.
Relative Colours and HSL make colour control mathematical. Set a base colour, then create lighter and darker variants that modify routinely. The HSL sliders regulate hue, saturation, and lightness independently for exact colour relationships throughout your web page.
Integrated Interactions maintain popups, mouse results, scroll animations, and toggle switches with out plugins.

Past Those, High quality Of Lifestyles Enhancements Come with:

Responsive Editor displays how settings behave throughout other display screen sizes, hover states, and sticky positioning. Transfer between states with out opening separate controls.
Seven Responsive Breakpoints exchange the outdated three-breakpoint device. Set customized values for each and every one or use defaults. Layouts adapt to telephones, capsules, and desktop screens with out media queries.
Design Variables retailer colours, fonts, spacing values, photographs, and textual content as soon as. When a variable is modified, each part the use of it updates routinely.
Nested Rows stack rows within different rows as deep as wanted for advanced mag layouts or portfolio grids.
Complex Gadgets paintings via visible controls. Sort clamp(), calc(), min(), or max() values with out a stylesheet.

And a lot more. We can be introducing extra options within the coming weeks. For now, let’s see how you’ll construct Grids the use of Divi 5 and why it makes it higher than the choices we mentioned:

Development A Grid In Divi 5

Development a grid typically approach wrestling with settings you don’t perceive or accepting a template that just about works. Divi 5 provides you with each pace and precision. Right here’s the way to arrange a grid that in truth does what you wish to have.

Beginning With Grid Templates

Divi 5 contains ready-made grid templates. Simply click on at the plus icon, browse in the course of the visible previews, and select one.

It applies immediately. Drop modules in, and so they comply with the development routinely for the reason that grid lives on the container stage.

You’ll be able to switch templates anytime or transfer to guide controls for customized paintings.

You’ll be able to additionally convert present layouts to Grids. Select a Segment, Row, Column, or Module Crew within the Visible Builder. Open its settings and pass to the Design tab. Search for Format close to the highest and click on the Format Taste dropdown. Make a choice Grid.

Controlling Grid Construction

You’ll be able to regulate the respiring room between your grid pieces, with Horizontal Gaps surroundings the space between columns and Vertical Gaps dealing with the distance between rows.

Each fields settle for usual gadgets like fastened pixel values when you wish to have actual spacing, relative gadgets like rem or em that scale together with your typography, or share values that reply to container width.

Design Variables make spacing control more straightforward throughout all your web page through letting you save usual hole values as Quantity Variables. Then, click on the dynamic content material icon in both hole box to make a choice your stored variable.

Replace the variable as soon as, and each grid the use of it adjustments routinely without having to trace down particular person settings.

Subsequent up, Column Width determines how broad each and every vertical monitor turns into.

Equivalent Width splits area frivolously throughout all tracks. Equivalent Minimal Width units a ground worth however shall we columns develop when area lets in.

Likewise, Equivalent Mounted Width locks the whole thing on the actual pixel size. Auto Width sizes tracks in keeping with their content material, so a column with a big symbol will get extra space than one with brief textual content.

Guide Width means that you can sort customized patterns like “3fr 3fr 2fr” or combine gadgets like “300px 1fr 1fr”. fr in CSS Grid means that you can inform the browser how a lot area each and every row or column will have to take. As an example, 1fr and 2fr imply the second one column will get two times as a lot area as the primary.

When you select your width mode, the Collection of Columns tells the grid what number of tracks to construct. Pieces fill throughout one row, then wrap down to begin the following.

Cave in Empty Columns cleans up dynamic layouts. Empty columns disappear routinely, and the grid shifts the whole thing over and closes the gaps.

Adjusting Grid Conduct

Your grid wishes to evolve when content material doesn’t fit the construction you’ve arrange. Perhaps you outlined 3 columns, however an merchandise leads to a fourth spot, or your rows want other top remedies. Those settings maintain the ones eventualities and regulate how pieces go with the flow in the course of the grid.

Grid Auto Columns and Grid Auto Rows decide the scale of overflow tracks when pieces land past your outlined columns or rows. Use 200px, 1fr, or auto.

Row Heights gives 4 choices: Auto adjusts to content material, Equivalent makes them uniform, Minimal units a baseline, and Mounted locks them at a worth.

Collection of Rows and Grid Auto Rows just do what their Column opposite numbers do, however for rows.

Grid Route determines how pieces go with the flow. Row mode works horizontally, then down for many layouts. Column mode stacks vertically, then strikes proper for timelines or vertical lists.

Grid Density controls whether or not pieces shuffle to fill gaps. Dense mode packs them tight, and auto mode maintains file order.

When you’ve constructed your grid construction, you want to put the whole thing. Justify Content material strikes your grid horizontally: Get started, Middle, Finish, Area Between, Area Round, or Area Lightly.

Align Pieces controls vertical positioning: best, center, backside, or stretched. Justify Pieces works horizontally: left, middle, proper, or stretched. Align Content material positions the grid vertically when more space exists.

Atmosphere Up Offsets

Grids fill pieces so as through default. First merchandise lands within the first cellular, 2nd merchandise in the second one cellular, and so forth. Grid Offset Laws ruin pieces out of that computerized go with the flow and help you regulate particular person pieces manually.

You select which pieces to focus on, make a selection what assets to use, after which set the price.

Goal choices come with First Merchandise, Ultimate Merchandise, Even Pieces, Extraordinary Pieces, or patterns like Each 3rd Merchandise. You’ll be able to additionally write customized nth-child selectors for advanced patterns.

When you’ve picked your goal, choose the valuables. Column Span and Row Span regulate merchandise dimension through making them stretch throughout more than one cells. Column Get started, Column Finish, Row Get started, and Row Finish regulate exact positioning through pinning pieces to precise grid traces.

Transferring Pieces Across the Grid

You’ll be able to rearrange grid pieces through dragging them round within the Visible Builder. Open the Content material tab, seize an merchandise, and drop it in a brand new spot. The grid updates instantly.

You’ll be able to click on the breakpoint icons to set other desktop, pill, and cellular sequences.

Maximum grid settings modify in keeping with gadget, too. Column Width will also be 4 equivalent columns on desktop, two on pill, and one on cellular. The responsive controls additionally settle for device-specific values for the selection of Columns, Row Heights, and alignment choices.

Growing Presets

When you construct a grid construction that works neatly, you’ll need to use it once more on different pages. Presets help you save and practice your grid configuration anywhere you want that very same structure.

Divi 5 gives Possibility Crew Presets to seize particular surroundings teams, like spacing or column configuration. Click on the preset icon subsequent to any surroundings workforce, give it a transparent title, and put it aside.

On every occasion you wish to have to use the similar settings to a Grid, you’ll get admission to your preset through clicking at the identical icon and settling on the preset you created.

Those presets replace globally. Regulate a preset as soon as, and each part the use of it adjustments routinely. You’ll be able to nonetheless modify particular person cases with out breaking the unique preset.

Check out Divi 5’s Grid Format Machine Nowadays

CSS Grid works another way throughout WordPress gear. Gutenberg provides you with the fundamentals however sends you to customized CSS for actual regulate. Elementor and Bricks upload bins and uncooked code when layouts get advanced.

Divi 5 provides you with visible templates, drag-and-drop, and responsive controls that seem the place wanted. The time saving displays up whilst you save a grid construction as an Possibility Crew Preset, attach choices to Design Variables, and watch your spacing replace throughout 50 pages concurrently when made. You construct a design device as a substitute of copying settings between tasks.

Obtain Divi 5 and construct grids that paintings the way in which you suppose they will have to!

The put up How To Use CSS Grid In WordPress gave the impression first on Chic Topics Weblog.

Obtain Divi 5 Be told Extra About Divi 5

How To Create A Distinctive Header Menu With Divi 5’s Flexbox Structure Gadget

Christopher Morris — Sun, 19 Oct 2025 16:00:00 +0000

Customized headers set your website online aside, particularly when hundreds of thousands of alternative web pages are constructed with the similar WordPress theme or template. This instructional demonstrates find out how to create a customized header in Divi 5. You’ll obtain this header and 19 others if you happen to’d like to check or use them by yourself builds.

In a different way, this submit supplies a step by step information on find out how to use Divi’s Flexbox format machine to construct this format.

How To Create A Web page Header With Divi’s Flexbox

This is the important thing concept. A flex format has two ranges of keep watch over:

Dad or mum packing containers outline path, gaps, wrapping, and alignment for the entire format.
Kid pieces outline whether or not they develop, shrink, or produce other sizing choices.

Dad or mum controls reside beneath Design > Structure. Kid sizing lives beneath Design > Sizing. Get the dad or mum proper first. Then dial in layouts with child-level choices.

Now, for the joys phase: let’s recreate this format, step-by-step.

Step 1. Construct The Construction

When development a piece format, step one is to resolve the construction. With out realizing (or understanding the construction), you are going to have a difficult time getting issues to come back in combination. With follow, this turns into kind of second-nature.

To recreate this heading, there are a couple of ranges of construction to notice. First is the best layers: a Segment, with a Row, and two Columns in that row (we’ll fear about format specifics later, however notice the construction now.

Within that moment column, we see two nested rows. The primary row holds one column for the menu and every other column for the social icons.

There’s every other row with a unmarried column that holds the Seek and Button Modules.

Now that we perceive the construction, we will create a clean web page with the wanted uncooked components. Upload a Segment for your header template. Upload an offset Row construction with two columns.

Open the Row, cross to Design > Structure, and set the flex Horizontal Hole to 2% and the Vertical Hole to 8px. The entirety else will have to retain default settings.

To additional flesh out the construction, we can upload two Nested Rows within column 2.

At this level, we can end including the wanted columns and modules. Nested row 1 will get two columns, and nested row 2 will get simply the only.

With the construction in position, we will now get started fine-tuning the format the use of Flexbox controls at each and every point.

I’ve styled each and every of my modules in order that we will center of attention only on development this the use of Flex. Obtain the format from the connected submit above if you need the precise types.

Step 2. Dimension Column One For The Emblem

Make a selection Column 1. Open Design > Sizing. Make sure that Column Elegance displays No Column Elegance. Cross to the second one column, and set the column elegance to Fullwidth.

Step 3. Column Two Structure Settings

Make a selection Column 2. Open Design > Structure. Ascertain the Horizontal Hole displays 30px, and the Vertical Hole displays 8px. Stay the Structure Route as vertical stack and Justify Content material on the default. Finally, set Align Pieces to Middle at the cross-axis.

Step 4. Within First Nested Row, Regulate Sizing For Columns

Make a selection Column 1 within Nested Row #1. Open Design > Sizing. Select Develop To Fill and alter Column Elegance to No Column Elegance. Make a selection Column 2 and open Design > Sizing to set column elegance to No Column Elegance and ensure most effective Shrink to Are compatible is chosen. This may increasingly make the primary column with the menu take lots of the area, pushing the social icons to the proper.

Step 5. Configure The Application Row’s Column Structure

Within Nested Row #2, to find its most effective Column and open Design > Structure. Set Horizontal Hole to 8px and set the Structure Route to Row. You’ll additionally set Align Pieces to Middle.

Step 6. Make The Seek Module Soak up Unfastened House

There are 3 modules within this software row. Open the Seek module. Cross to Design > Sizing and set it to Develop To Fill. Depart each Buttons on the default measurement. The Seek will now extend to fill the unused width within the column.

Step 7. Completing Types

Open Nested Row #2 and provides it a background coloration of #9bd252. Then open Border types so as to add rounded corners with clamp(20px, 3vw, 65px). Finally, upload 8px padding round each side.

To taste the Seek Module like our instance, set the Placeholder Textual content to #ffffff, the Fields Textual content Colour to #ffffff, and set the Button and Border Colour to #9BD252. Moreover, give it a Border Radius of 100vh.

Then give it a “Seek Weblog” placeholder and toggle off the Display Button.

We’ll vertically middle the brand via going to its dad or mum column and atmosphere Justify Content material to Middle.

Step 8. End With A Responsive Go

Transfer to Pill view the use of the Most sensible Menu Bar. In case you don’t like how the hamburger menu isn’t at the proper facet, you’ll be able to reorder the modules for higher waft.

Then, we will resize the columns and regulate which column will get to Develop to Fill. Transfer to pill, make the column with the social icons Develop to Fill, and regulate the Column Elegance to No Column Elegance. Then, cross to the column with the Menu Module, flip off Develop to Fill, and set it to No Column Elegance as smartly.

Finally, there’s a large number of paintings to do on the cellular breakpoint. Make the primary nested row have a Structure Route of Row Opposite (if it isn’t already) and make sure it’s set to No Wrap.

Then, we can once more regulate the column sizes to set them each to No Column Elegance and to have most effective the column with the social icons Develop to Fill.

We will have finished this step above if we had used the Responsive Editor, which is a great explanation why to grow to be aware of it. With it, you’ll be able to regulate the similar Design settings throughout a couple of breakpoints in one view.

In the end, we’ll spoil the software nested row into two flex rows via permitting it to Wrap. Then, make the hunt Module a Width of 100%. In case you desire, you’ll be able to Justify Content material to the Middle.

Obtain 20 Flexbox Headers For Divi 5

Get all 20 Flexbox headers without cost, together with each Default and Prestyled variations. Each and every header is able to import into your Divi Library and use within the Theme Builder. Simply obtain and get started development.

Obtain the Information

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media most effective display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can e-mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative wonderful and unfastened Divi assets, pointers and methods. Observe alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely kind on your e-mail deal with beneath and click on obtain to get entry to the format pack.

You could have effectively subscribed. Please test your e-mail deal with to verify your subscription and get get entry to to unfastened weekly Divi format packs!

Construct Your Flexbox Headers In Divi 5 Lately

Use this header as a place to begin in your experiments. Upload a sticky state for the desktop. Upload a press release strip above the principle row. Take a look at development this with a couple of packing containers via changing some Nested Rows and their columns with Teams.

Mastering Flexbox in Divi 5 takes some follow. There are conduct that you’d use in a Block format that aren’t highest practices in a Flex format. However you get a brand new universe of attainable when you’re making the transfer (if you end up able).

Flex is only one of dozens of latest options and enhancements that Divi 5 customers are the use of nowadays.

The submit How To Create A Distinctive Header Menu With Divi 5’s Flexbox Structure Gadget seemed first on Sublime Subject matters Weblog.

The Divi 5 Beta Has Arrived

Nick Roach — Fri, 17 Oct 2025 20:23:00 +0000

As of late, Divi 5 enters the Public Beta segment, the general segment ahead of its reputable unlock.

Divi 5 has been to be had for brand new internet sites for a while, however it was once lacking a couple of options that sure current internet sites couldn’t reside with out. The ones options are entire, that means websites can migrate all their legacy Divi 4 modules to the brand new gadget and have the benefit of the numerous new options we’ve added over the last 12 months.

Give it a take a look at, and tell us what you suppose. We’ll stay addressing your comments ahead of the reputable unlock.

Take a look at the next video to be informed extra. 👇

How To Use Divi 5

First, a PSA: As with all primary replace, particularly one involving bulk conversion, it’s essential that you simply check Divi 5 on a staging website online and again up your web page ahead of updating. With that caveat, let me display you find out how to get right of entry to the beta and replace your internet sites.

Downloading & Putting in Divi 5

You’ll obtain Divi 5 from the downloads web page within the individuals’ house.

You’ll set up Divi 5 by means of the Issues web page on your web page’s WordPress dashboard. Add it and substitute your current model of Divi.

Migrating Your Internet sites

Subsequent, head to the Divi 5 Migrator.

The migrator will scan your web page and come up with an summary of the content material that is able to be switched over. It’ll additionally assist you to know in case you are the usage of third-party modules from the Divi Market that aren’t ready for Divi 5.

You’ll continue with the migration despite the fact that your web page makes use of incompatible modules, however those modules gained’t be switched over and can run in backward compatibility mode. In case your web page is predicated closely on third-party modules that don’t seem to be in a position for Divi 5, it’s possible you’ll wish to stick to Divi 4 for now.

Migrating will convert each module for your web page to the local Divi 5 layout. It solely takes a second. As soon as entire, you’ll seek advice from your web page and leap into the new model of Divi! 🙌

Divi 5 Tutorials & Assist Articles

In case you are new to Divi 5, we’ve intensive documentation within the assist heart and lots of in-depth articles at the weblog and YouTube. Listed here are a couple of articles to get began with:

New Characteristic Tutorials

We’ve created an in-depth written instructional and video for each new Divi 5 function. There positive are a large number of them!

Assist Articles

We’ve additionally written intensive documentation about the whole thing in Divi 5. Listed here are some articles to get you began:

How To Record A Computer virus

Tell us should you understand any adjustments for your web page after the migration. There would possibly nonetheless be a couple of kinks to figure out.

If you happen to aren’t proud of the migration, you’ll repair the backup you made previous.

If you happen to neglected my recommendation and didn’t make a backup, 😡 you’ll repair your Divi 4 content material within the migrator. Earlier than migration, it saves a replica of all of your Divi 4 content material simply in case.

Repair it, then reinstall Divi 4.

Public Beta 0 Changelog

This model contains the next trojan horse fixes and enhancements added since Public Alpha 24:

Customized attributes added to presets will now merge with customized attributes set on the module point, as an alternative of being overwritten by means of module-level attributes.
When switching between modules, the settings panel will stay the energetic tab and possibility workforce open.
Added a make a choice menu to choose from often used attributes within the attributes possibility workforce.
Mounted carousel workforce buttons overlapping the upload module button.
When clicking at the layers within the layers panel, the canvas will not scroll to the component’s place if the component is already visual within the viewport.
Stepped forward the rate of including new modules to huge pages by means of over 50%.
Added new arrow key keyboard shortcuts for navigating between parts at the canvas.
Mounted Blurb module icon placement types that didn’t fit Divi 4 output after migration to Divi 5.
Mounted font taste resets now not overriding preset types after migrating from Divi 4 to Divi 5.
Mounted a subject the place the Menu module’s cell dropdown menu background colours disappeared after migrating Divi 4 layouts to Divi 5.
Mounted international sections, rows, and modules now not uploading appropriately when exporting and uploading layouts between websites.
Added International Modules with the Selective Sync function, enabling automated synchronization of reusable modules around the website online whilst permitting per-instance customization of explicit attributes. Incorporated seamless conversion of Divi 4 international modules with preserved selective sync configurations.
Mounted a deadly error that averted the Block Editor from loading when enhancing pages the usage of backward compatibility mode Theme Builder layouts.
Mounted ValueExpansionFunctionMap callbacks don’t seem to be triggering for third-party modules when shortcode attributes include line breaks.
Mounted Button module hover background colours now not overriding preset values when set to compare desktop background colours.
Mounted migrated Divi 4 layouts, incorrectly receiving automated hover/sticky transitions when no specific transition settings had been configured within the unique format.
Mounted button icon hover animation path in migrated D4 layouts to correctly animate left-to-right as an alternative of right-to-left, and restored icon spacing for customized icons.
Mounted Symbol module absolute positioning to permit intentional overflow widths when the person explicitly units the width price, whilst retaining the default max-width constraint for same old, completely placed pictures.
Mounted particular characters like copyright symbols (©) exhibiting as corrupted textual content (u00a9) after migrating from Divi 4 to Divi 5.
Mounted D4 to D5 migration now not retaining overflow-x and overflow-y characteristic values, inflicting sudden horizontal scrollbars on migrated layouts.
Mounted Pricing Desk module width and format problems when migrating D4 content material to D5 or uploading D4 layouts from Divi Library.
Mounted Weblog module migration factor the place “Posts For Present Web page” environment was once incorrectly set to disabled after migrating from Divi 4 to Divi 5.
Mounted Publish Name module textual content colours incorrectly inverting all through the Divi 4 to Divi 5 migration.
Mounted Weblog module field shadow making use of to wrong parts after D4 to D5 migration by means of including conditional selector good judgment that goals the module wrapper for full-width layouts and particular person posts for grid layouts.
Mounted background mix modes (distinction, multiply, display screen, and many others.) now not rendering appropriately after migrating D4 layouts to D5 when the background colour isn’t explicitly set.
Mounted WooCommerce Product Gallery grid format to conform to guardian column widths like Divi 4, resolving pictures stacking vertically in slender packing containers.
Mounted distinctiveness segment column rendering in backward compatibility mode.
Mounted the Name To Motion module button background colour now not exhibiting in Theme Builder and resolved the double-prefixing factor.
Mounted a subject the place environment an opacity price within the colour picker after which coming into a CSS variable would take away the opacity price when urgent Input.
Up to date Divi 5 to make use of a separate translation textual content area (et_builder_5) to verify right kind localization with out conflicts with Divi 4 translations.
Up to date .po recordsdata to incorporate Divi 5’s newly presented translatable strings.
Added a command to replace localization for D5 at the Divi Construct procedure motion.
Mounted wrong component positioning on capsule and contact breakpoints when converting from focused absolute to non-centered relative positioning.
Mounted wrong component positioning when converting Place and Offset Beginning settings between responsive breakpoints.
Mounted background picture place and horizontal/vertical offset now not running for customized breakpoints (UltraWide, WideScreen, TabletWide, PhoneWide) in each Visible Builder and Frontend.
Mounted the Divi 4 to Divi 5 migration in order that it preserves sticky settings for youngster modules positioned within sticky Sections.
Mounted FontAwesome icons now not exhibiting appropriately as arrow icons in Crew Carousel modules.
Mounted the Shortcode module showing as an alternative of the usual segment when growing new pages in VB.
Mounted Button modules and different Divi modules failing emigrate from Divi 4 to Divi 5 when third-party plugin attributes had been provide by means of including an extensibility clear out for plugin builders to check in legacy attributes.
Mounted Button Module and customized attributes outputting empty HTML attributes that are supposed to be overlooked for cleaner, extra available markup.
Mounted Possibility Crew Presets now not being imported all through JSON format import in Divi 5.
Mounted CSS clamp, min, and max purposes to just accept values with out areas after commas and mechanically layout spacing for consistency.
Mounted intermittent WooCommerce check screw ups by means of introducing specialised base categories that correctly isolate REST context and consultation state between exams.
Mounted WooCommerce Checkout Further Information Module placeholder textual content colour now not making use of in Visible Builder and Frontend.
Mounted WooCommerce Checkout Knowledge module margin and padding settings now not making use of in Visible Builder because of a lacking CSS technology configuration.
Mounted the WooCommerce Checkout Cost Information module background video now not protecting all of the module at the frontend.
Mounted WooCommerce Checkout Cost Information module margin values making use of within the module container as an alternative of out of doors.
Mounted WooCommerce Checkout Cost Information module lacking default padding (Divi 4 parity).
Mounted WooCommerce Product Gallery line-height choices now not making use of appropriately in Visible Builder and Frontend for Name, Caption, and Pagination parts.
Mounted the Static Module Abstract box now not exhibiting at the frontend to compare the Visible Builder output.
Mounted D4 layouts imported via Divi Library that don’t seem to be being migrated to D5 layout.
Mounted WooCommerce checkout validation mistakes seem throughout all checkout modules as an alternative of solely of their related ones. Optimized checkout and cart module rendering by means of fighting pointless template rendering when modules must now not show.
Mounted Electronic mail Optin module background colour migration when “Use Background Colour” toggle is off.
Mounted Weblog Module to appropriately show all posts on archive pages, together with the newest put up, when the usage of Theme Builder templates.
Mounted Touch Shape box IDs being incorrectly changed when cloning a complete shape, which broke customized Message Patterns that depend on constant box IDs throughout more than one bureaucracy.
Mounted Germanized for WooCommerce plugin content material showing outdoor module packing containers in Divi 5 by means of imposing right kind hook relocation for blocks and shortcodes.
Mounted Divi Timeline Structure migration failing with “Legacy Modules Detected: et_pb_blurb” error by means of including lacking D4 listing styling attributes to the legacy attributes listing.
Mounted Loop Builder the usage of WordPress studying settings as a fallback as an alternative of the configured default posts in step with web page price.
Mounted module presets now not migrating from Divi 4 to Divi 5 after the usage of “Repair Divi 4 Content material” within the Divi 5 Migrator.
Mounted Toggle modules from Divi 4 now not migrating correctly to Divi 5 and exhibiting backward compatibility warnings.
Mounted WooCommerce checkout and cart pages appearing clean content material when opening Visible Builder with out saving.
Mounted the WooCommerce Product Name module heading point environment that’s not making use of at the frontend.
Mounted D5 migration gadget to correctly convert presets from more than one D4 format imports as an alternative of skipping next migrations.
Mounted Weblog module Possibility Crew Presets for Name Textual content and Meta Textual content, the place just one preset was once making use of whilst keeping up preset categories de-duplication good judgment.
Up to date roadmap documentation with the most recent knowledge from GitHub (179 primary roadmap pieces, 201 developer roadmap pieces).
Added enhance for conditional box visibility and ultimate question keep an eye on in Loop Builder, enabling third-party builders to create complicated Loop extensions with customized fields that reply to loop settings and question changes that persist via context processing.
Mounted sortable listing fields (checkbox choices, radio choices, make a choice choices) rendering as simple textual content inputs in Touch Box and Signup Customized Box modules, permitting right kind listing control with drag/drop reordering, merchandise movements, and worth patience.
Mounted Visible Builder clear out hover reset
filters now mechanically reset on hover to verify module choices stay available when filters are carried out.
Mounted sticky clear out results and different sticky state attributes now not migrating appropriately from Divi 4 to Divi 5 when carried out to youngster parts of sticky-positioned packing containers.
Mounted parallax background rendering to compare Divi 4 habits when gradient overlay is enabled on Convention Match Touchdown Web page layouts, and resolved segment peak discrepancies by means of correcting background magnificence good judgment in Countdown Timer and Signup modules.
Mounted customized button icons to correctly inherit font-size from their guardian button as an alternative of the usage of hard-coded values.
Mounted module hyperlinks now not running when third-party DiviExtension plugins (Divi Perfect, Divi Pixel, and many others.) are energetic.
Mounted 404 web page footer format problems brought about by means of lacking CSS regulations when the usage of Theme Builder templates.
Mounted the slider module’s identify textual content now not converting factor for the Telephone Huge responsive breakpoint.
Mounted Weblog module column format adjustments all through migration from Divi 4 to Divi 5.
Mounted Textual content modules from the Robotics Touchdown Web page and Center Japanese Eating place Touchdown Web page failing emigrate from Divi 4 to Divi 5 because of corrupted font length attributes.
Mounted sticky parts that don’t handle their width and max-width dimensions when coming into the sticky state because of CSS specificity.
Mounted factor the place customers may just manually input invalid values outdoor the 1-10 vary in Crew Carousel “slides to turn” and “slides to scroll” settings.
Mounted gradient forestall share values don’t seem to be displayed when soaring within the background gradient settings.
Added vw and vh viewport devices enhance to the Letter Spacing box for responsive typography.
Mounted WooCommerce Product Upsell module incorrectly exhibiting responsive controls for Product Depend, Column Structure, Order, and Product Offset Quantity fields in VB, which might be deliberately desktop-only to compare D4 habits and WooCommerce’s server-side rendering structure.
Mounted Dynamic Content material picture fields now not exhibiting appropriately when the usage of the ACF Symbol go back layout.
Added complete Divi Market compatibility labeling instructional to assist third-party builders correctly configure D4/D5 product compatibility settings.
Mounted Touch Shape conditional good judgment regulations now not running appropriately when uploading D4 layouts into D5.
Mounted D4 to D5 knowledge conversion for third-party customized modules by means of imposing an automatic conversion define construct gadget.
Enhanced Module Visibility Supervisor by means of changing localStorage with WordPress REST API patience and refactored React elements for stepped forward reliability.
Mounted Divi 5 checkout modules to show suitable warnings on non-checkout pages.
Mounted WooCommerce Checkout Cost module background types overflowing outdoor border radius obstacles and corrected AGMS border selector utilization.
Mounted Theme Builder compatibility factor with the LearnDash plugin that brought about deadly mistakes.
Mounted WooCommerce Product Gallery picture border radius and identify textual content styling now not running correctly.
Mounted lacking WooCommerce checkout fee module warnings that alert customers when required billing or transport modules don’t seem to be on checkout pages.
Mounted WooCommerce Checkout Cost Module preview now not exhibiting in Theme Builder Visible Builder.
Mounted CSS magnificence numbering factor the place categories began with random numbers as an alternative of 0 in WordPress 6.8 and later variations. Added inner-content rendering API and stepped forward parsing delegation for higher WordPress compatibility.
Enhanced D4→D5 conversion lets in Pop-ups for Divi attributes to be safely neglected when pop-ups are disabled, in order that sections with disabled pop-ups shall be switched over to local D5 modules as an alternative of shortcode modules (backward compatibility mode).
Mounted gradient colours now not migrating appropriately from Divi 4 to Divi 5, fighting RGBA gradient stops from being changed with 100% in background-image CSS.
Mounted WooCommerce checkout web page appearing replica content material at the order affirmation web page when the usage of Visible Builder or Theme Builder for checkout templates.
Up to date dynamic module instructional with complete plugin setup steering, fastened compatibility problems, and optimized workflow for builders finishing static and dynamic module tutorials.
Mounted Menu module background colour now not retaining the module background all through D4 to D5 migration.
Mounted Woo Breadcrumbs module hyperlink textual content colour now not carried out after D4 to D5 migration because of a lacking vital CSS flag.
Mounted lacking WooCommerce cart-totals script inflicting 404 mistakes in Visible Builder by means of updating webpack configuration to correctly uncover and assemble scripts from nested module directories.
Mounted the Individual module customized CSS fields now not making use of in Visible Builder.
Mounted sticky state types being at all times energetic within the Visible Builder when the WordPress admin bar is enabled.
Mounted the Map Module crashing the Visible Builder when last the Responsive Editor with a configured Map Middle Cope with.
Mounted Code Module shortcodes and HTML content material incorrectly appearing CSS validation mistakes within the Inspector modal.
Mounted a lately presented regression in D4 to D5 conversion, the place third-party legacy shortcode modules had been rendered as empty placeholders as an alternative of exhibiting their content material.
Mounted Loop Builder sticky posts being neglected by means of default when the usage of non-date ordering choices.
Mounted unintended stripping of customized touch shape fields added by means of third-party plugins whilst retaining conditional good judgment placeholder removing.
Mounted button possibility workforce presets now not running at the entrance finish.
Mounted the Inspector now not detecting workforce presets if it didn’t additionally hit upon a module preset inside the inspected house.
A brand new inspector was once added to hit upon and bulk edit crucial attributes.
Mounted sticky component anchor scroll positioning to forget about sticky offsets when sticky positioning is disabled.
Mounted dropdown menus in Theme Builder headers getting hidden at the back of sections with box-shadow carried out.
Mounted cell menu accessibility factor on 404 pages when the usage of the Menu Module in Theme Builder International Headers.
Mounted Textual content Module textual content alignment now not running on customized breakpoints (tablet-wide, phone-wide) because of CSS specificity conflicts.
Mounted D5 format import crash when international colour definitions are lacking from imported format recordsdata.
Mounted ACF box price show problems in Loop Builder the place True/False fields, Person fields, and different box sorts weren’t exhibiting appropriately.
Mounted Possibility workforce preset defaults incorrectly, overriding customized presets when including new modules in Visible Builder and front-end rendering.
Mounted Visible Builder crash when deleting possibility workforce presets lately utilized by modules at the web page.
Mounted trojan horse with Woo Realize place if the Theme Builder format has the Woo Realize module.
Mounted background video, masks, and development capability within the Bar Counter module with right kind parent-child inheritance.
Mounted dynamic content material capability breaking when international modules exist within Loop Builder sections.
Enhanced D5 migrator with new capability to hit upon and convert shortcode modules that acquire D5 enhance after preliminary web page conversion, enabling already-converted posts to have the benefit of ongoing D5 ecosystem evolution.
Mounted Textual content modules with hover-only content material disappear after preliminary hover interplay as an alternative of last visual.
Mounted WooCommerce Gutenberg checkout box settings now not saving when the Divi theme is energetic by means of making sure checkout box settings are correctly registered within the WordPress REST API.
Mounted Meta Question button alignment in Loop Builder.
Mounted grid format column prohibit to enhance as much as 12 columns when switching from different format sorts.
Mounted customized teams now not rendering in customized panels inside of Divi 5 module settings.
Mounted block format column construction modal now not responding to column construction adjustments in Divi 5 Visible Builder.
Mounted WooCommerce Checkout Delivery module margin and padding spacing choices now not making use of visible results within the Visible Builder.
Mounted the “Use The Divi Builder” button, which incorrectly seems in Vintage Editor for disabled put up sorts.
Mounted Shape Realize textual content alignment controls now not running within the WooCommerce Checkout Cost module.
Mounted Shape Realize Textual content Shadow types now not running within the WooCommerce Checkout Cost Information module.
Optimized module registration efficiency by means of decreasing JSON document operations and imposing clever caching for module metadata, conversion outlines, and default attributes.
Mounted WooCommerce Product Photographs gallery thumbnails don’t appreciate the border radius when CSS variables are used as an alternative of pixel values.
Mounted Seek Module “Exclude Classes” dropdown appearing empty as an alternative of website online classes.
Mounted WooCommerce Checkout Order Main points module check snapshots.
Mounted WooCommerce Checkout Delivery Module preview show in Theme Builder Visible Builder.
Mounted international variables and international colours being double-serialized within the database.
Mounted portability import getting caught at 99% because of undefined international colour gadgets.
Up to date check snapshots for WooCommerce Checkout Cost Information module to compare present styling implementation.

We’re On The House Stretch

Creating Divi 5 has been reasonably a adventure; now, we’re at the house stretch.

Our objective is to make it reputable ahead of the tip of the 12 months, and if now not, quickly after. Our number one center of attention shall be solving the migration insects you document and some other essential problems. You’ll additionally be expecting a couple of wonder options ahead of the tip of the 12 months.

This isn’t the tip; quickly, the true amusing starts!

Have You Attempted The Inspector?

For those who neglected it, we lately launched the Inspector for Divi 5. It was once impressed by means of a an identical gadget in Figma, and is now to be had for Divi, aside from even higher. Check up on a component to get an summary of its maximum crucial attributes, together with all youngster parts. Then, temporarily exchange colours, fonts, sizes, content material, and presets throughout the whole thing. It’s an enormous time saver.

Watch this video for the entire main points. 👇

Extra Divi 5 Updates Are On The Means

2025 is the 12 months of Divi 5. The tedious paintings is at the back of us. We constructed the super-fast basis, and now it’s time for Divi to make its comeback.

If you happen to’re right here for the Divi comeback, do us an enormous choose and tell us by means of liking this video and leaving a remark. It way so much to us to look you cheering Divi on, and it’s crucial to feed the set of rules and unfold the phrase.

Don’t fail to remember to observe us on YouTube and subscribe to the Divi e-newsletter so that you by no means pass over an replace. I’ll see you quickly for some other Divi 5 function announcement, which I promise shall be appropriate across the nook. 😁

The put up The Divi 5 Beta Has Arrived seemed first on Sublime Issues Weblog.