Design methods reduce down the repeated paintings in web page design. They provide you with a predefined set of design selections for colour palettes, spacing scales, typography, and extra. Divi 5 presented Design Variables in April 2025, letting you outline those values globally.

For those who’re a internet dressmaker otherwise you run more than one websites, you understand the ache of putting in place the fundamentals for each new challenge. Design Variables shine much more when you’ll reuse them throughout websites.

So, we recently introduced import and export for Presets and Design Variables, making it simple to switch your design machine between websites in mins. Arrange your design machine as soon as, then use it throughout each challenge. Right here’s the way it works.

What Are Design Variables In Divi 5?

Design Variables retailer reusable values that you’ll practice throughout your whole website online. They’re shortcuts for design selections you are making many times. Set up the entirety in the course of the Variable Supervisor in Divi’s left sidebar whilst the usage of the Visible Builder.

Click on the icon, upload your values, title them obviously, and get started making use of them to modules and presets. Divi 5 helps six sorts:

Subscribe To Our Youtube Channel

• Colours allow you to outline your logo palette and practice the ones sun shades constantly throughout your web page. Colours additionally make stronger relative colors and HSL.
• Fonts save your typography possible choices so you’ll reuse heading types or frame textual content settings straight away.
• Numbers retailer sizing selections, comparable to border radius, padding, and line top.
• Photographs come with routine visuals comparable to trademarks or background graphics.
• Textual content saves content material that looks in more than one puts, comparable to corporate addresses or taglines.
• Hyperlinks stay significant URLs in a position to make use of.

To make use of them, click on the variables icon within any supported box, then make a choice the variable you wish to have to use.

Whilst you replace a variable, the entirety the usage of it updates throughout your website online mechanically. There’s no want to seek thru person pages or monitor down every incidence.

How Uploading And Exporting Design Variables Is helping

Design Variables paintings smartly on a unmarried website online, however maximum designers and businesses run more than one tasks immediately. Rebuilding colours, fonts, spacing, and routine content material from scratch each time wastes hours.

Divi 5 permits you to export all Design Variables on a website online right into a unmarried JSON report, then import that report into every other Divi 5 challenge. It advantages everybody:

• Companies stay logo homes constant throughout websites.
• Freelancers drop a starter framework into each new consumer challenge and customise from there.
• Groups can percentage a variable set so new contributors can get started construction with out recreating values that exist already.

Not unusual Use Circumstances

The desk under breaks down not unusual situations the place uploading and exporting Design Variables saves actual time. Every one suits a distinct workflow, so that you’ll most probably see yours right here:

Use Case	Who It is For	How It Is helping
Company starter kits	Companies with a regular design framework	Export your base variables as soon as and import them into each new consumer challenge as a kick off point
Emblem consistency throughout more than one websites	Companies with a number of internet homes beneath one logo	Proportion one JSON report throughout all websites so colours, fonts, and spacing keep aligned far and wide
Shopper handoff	Freelancers handing over completed websites	Export the whole variable set and come with it to your deliverables so shoppers or long run builders can recreate the machine on every other website online if wanted
Group onboarding	Design groups bringing on new contributors	New designers import the report and get started construction with the suitable values as a substitute of surroundings them up manually
Design machine backup	Somebody who desires to give protection to their setup	Export your variables as a security internet sooner than making massive adjustments, so you’ll repair them if one thing is going unsuitable
Group sharing	Designers who percentage assets or promote starter kits	Package deal your variable set as a downloadable report others can import into their very own Divi 5 tasks

Some of these come down to 1 factor: now not doing the similar setup paintings two times. Whether or not you’re handing off a challenge, onboarding a teammate, or protective your individual paintings, the JSON export provides your design machine a existence past a unmarried website online.

How To Export Design Variables

Open the Visible Builder and click on the Variable Supervisor icon within the left sidebar.

You’ll see the import/export icon on the most sensible of the panel.

Within the export tab, you’ll see a box in your export filename. Give it one thing descriptive like “ClientName Variables” or “Company Starter Package” so you’ll acknowledge it later.

If you title it, Divi 5 applications each Design Variable to your website online right into a unmarried JSON report. Colours, fonts, numbers, pictures, textual content, and hyperlinks are all bundled in combination. Click on the export button, and your browser downloads the report.

This exported JSON report works with every other Divi 5 website online. You’ll drop it right into a staging setting, a shopper challenge, or a teammate’s native setup. The report incorporates your complete variable set, so the receiving website online will get your whole design machine in one add.

Getting The Maximum Out Of Your Exported Information

Transparent variable names make a large distinction when any individual else opens your JSON report. A variable known as “Blue” tells the following individual not anything. Blue might be the header background, a button fill, or a border colour. However “Header BG” or “Darkish Background” eliminates the guessing.

Identical factor with numbers. “Card Radius” is apparent instantly. “Radius 1” forces any individual to use it simply to determine what it does. A couple of mins of naming cleanup sooner than you export saves everybody else time later.

The downloaded JSON report gained’t replicate any adjustments you are making after exporting. Including a date for your filenames is helping. One thing like “Design Package – February 2026” makes it simple to inform variations aside while you’ve were given a number of stored.

Exports can double as backups, too. Ahead of you overhaul a website online’s colour palette or change out a spacing scale, a snappy export saves the present state. If the brand new path doesn’t determine, you’ll import the outdated report and repair the entirety temporarily.

Divi 5’s Preset Supervisor has its personal separate import and export. The Preset Supervisor and Variable Supervisor care for exports one by one. That suggests you’ll in most cases finally end up with two JSON information: one for presets and one for Design Variables. In combination, they make up your complete design machine and stay every machine more uncomplicated to control.

How To Import Design Variables

Uploading Design Variables makes use of the similar import/export panel as exporting, however you’ll transfer to the Import tab and add a JSON report. Open the Visible Builder and head to the Variable Supervisor within the left sidebar. Click on the import/export icon on the most sensible of the panel, and navigate to the import tab.

If you add it, Divi lots each variable from that report into your present website online. Colours, fonts, numbers, pictures, textual content, and hyperlinks all come thru in a single cross.

Making ready Your Web site Ahead of Uploading Variables

A blank import begins with a blank Variable Supervisor. Ahead of you load a JSON report from every other challenge, take a couple of mins to study what’s already to your website online.

In case your website online already has variables arrange, overview your Variable Supervisor after import and blank up anything else you don’t want, like duplicates, placeholders, or take a look at values. You’ll additionally rename variables to stay your set constant and simple to know.

Scroll thru every of the six variable sorts and take away anything else you created all over checking out however by no means if truth be told carried out.

Additionally, plan for cleanup after import. A complete design machine JSON would possibly come with values that don’t practice for your website online. A particular boulevard cope with or telephone quantity stored as a textual content variable, as an example, is one thing you could need to delete or substitute as soon as the import finishes.

The usage of Imported Variables With Your Present Content material

Design Variables paintings easiest while you tie them into your presets. After uploading, plug your new variables into the Option Group Presets and Element Presets.

You must set a colour variable because the background colour in a Button preset, as an example. Or practice a host variable for your border radius throughout all card modules. That’s the way you cross from a suite of variables to a running design machine.

Each the Variable Supervisor and Preset Supervisor make stronger import and export. That suggests you’ll transfer variables and presets in combination as a conveyable equipment. Import each on a brand new website online, and your design framework is able to cross with out rebuilding from scratch.

What in case your website online already has content material, and that content material nonetheless makes use of static values as a substitute of the variables you simply imported? Divi 5 will provide you with 3 gear to modify over quicker.

Find and Replace permits you to right-click any box, change a static colour or font for a variable, and push that adjust throughout all of the web page in seconds.

Extend Attributes takes styling from one part you’ve already hooked up for your variables and copies it to different parts throughout a row, segment, or complete web page.

The Inspector will provide you with a hen’s eye view of each colour, font, and preset in a diffusion. You’ll spot static values that also want switching at a look.

Put all 3 in combination, and a freshly imported set of variables turns into a running design machine throughout your website online. Right here’s a quick rundown of the diversities between all 3 options and when to make use of them.

Get Acquainted With Design Variables In Divi 5 Lately!

The toughest a part of construction a design machine is doing it greater than as soon as. Divi 5 makes that more uncomplicated via letting you bundle your colours, fonts, spacing, and content material variables right into a JSON report you’ll reuse.

Construct the machine as soon as, export it, and each website online after that begins together with your basis already in position.

The submit How To Import & Export Design Variables In Divi 5 gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more