Design methods lower 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.
In the event you’re a internet dressmaker otherwise you run more than one websites, you already know the ache of putting in the fundamentals for each new mission. Design Variables shine much more when you’ll be able to reuse them throughout websites.
So, we just lately presented 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 mission. Right here’s the way it works.
Contents
What Are Design Variables In Divi 5?
Design Variables retailer reusable values that you’ll be able to observe throughout your whole website online. They’re shortcuts for design selections you are making many times. Organize the entirety in the course of the Variable Supervisor in Divi’s left sidebar whilst the use of the Visible Builder.
Click on the icon, upload your values, identify them obviously, and get started making use of them to modules and presets. Divi 5 helps six sorts:
Subscribe To Our Youtube Channel
- Colours permit you to outline your logo palette and observe the ones sunglasses persistently throughout your web page. Colours additionally make stronger relative colours and HSL.
- Fonts save your typography alternatives so you’ll be able to reuse heading types or frame textual content settings straight away.
- Numbers retailer sizing selections, corresponding to border radius, padding, and line peak.
- Pictures come with routine visuals corresponding to trademarks or background graphics.
- Textual content saves content material that looks in more than one puts, corresponding 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 inside of any supported box, then make a selection the variable you need to use.
Whilst you replace a variable, the entirety the use of it updates throughout your website online mechanically. There’s no want to seek via person pages or observe down each and every incidence.
How Uploading And Exporting Design Variables Is helping
Design Variables paintings smartly on a unmarried website online, however maximum designers and companies run more than one tasks directly. 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 document, then import that document into every other Divi 5 mission. It advantages everybody:
- Companies stay logo houses constant throughout websites.
- Freelancers drop a starter framework into each new consumer mission and customise from there.
- Groups can percentage a variable set so new contributors can get started development with out recreating values that exist already.
Not unusual Use Instances
The desk under breaks down not unusual eventualities 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 mission as a place to begin |
| Logo consistency throughout more than one websites | Companies with a number of internet houses beneath one logo | Percentage one JSON document throughout all websites so colours, fonts, and spacing keep aligned all over |
| Consumer handoff | Freelancers turning in completed websites | Export the entire variable set and come with it on your deliverables so purchasers 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 document and get started development with the best values as an alternative of environment them up manually |
| Design machine backup | Somebody who needs to offer protection to their setup | Export your variables as a security web earlier than making huge adjustments, so you’ll be able to repair them if one thing is going mistaken |
| Group sharing | Designers who percentage assets or promote starter kits | Bundle your variable set as a downloadable document others can import into their very own Divi 5 tasks |
These kinds of come down to 1 factor: no longer doing the similar setup paintings two times. Whether or not you’re handing off a mission, onboarding a teammate, or protective your individual paintings, the JSON export provides your design machine a lifestyles 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 best of the panel.
Within the export tab, you’ll see a box to your export filename. Give it one thing descriptive like “ClientName Variables” or “Company Starter Package” so you’ll be able to acknowledge it later.
When you identify it, Divi 5 programs each Design Variable for your website online right into a unmarried JSON document. Colours, fonts, numbers, photographs, textual content, and hyperlinks are all bundled in combination. Click on the export button, and your browser downloads the document.
This exported JSON document works with some other Divi 5 website online. You’ll drop it right into a staging setting, a consumer mission, or a teammate’s native setup. The document comprises 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 person else opens your JSON document. A variable referred to 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” gets rid of the guessing.
Identical factor with numbers. “Card Radius” is apparent straight away. “Radius 1” forces any person to use it simply to determine what it does. A couple of mins of naming cleanup earlier than you export saves everybody else time later.
The downloaded JSON document received’t replicate any adjustments you are making after exporting. Including a date in your filenames is helping. One thing like “Design Package – February 2026” makes it simple to inform variations aside whilst 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 switch out a spacing scale, a snappy export saves the present state. If the brand new course doesn’t determine, you’ll be able to import the outdated document 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 at a time. That suggests you’ll normally 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 each and 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 document. Open the Visible Builder and head to the Variable Supervisor within the left sidebar. Click on the import/export icon on the best of the panel, and navigate to the import tab.
When you add it, Divi so much each variable from that document into your present website online. Colours, fonts, numbers, photographs, textual content, and hyperlinks all come via in a single cross.
Getting ready Your Web site Ahead of Uploading Variables
A blank import begins with a blank Variable Supervisor. Ahead of you load a JSON document from every other mission, take a couple of mins to study what’s already for your website online.
In case your website online already has variables arrange, overview your Variable Supervisor after import and blank up the rest you don’t want, like duplicates, placeholders, or check values. You’ll additionally rename variables to stay your set constant and simple to grasp.
Scroll via each and every of the six variable sorts and take away the rest you created all the way through checking out however by no means in fact implemented.
Additionally, plan for cleanup after import. A complete design machine JSON may come with values that don’t observe in your website online. A particular boulevard cope with or telephone quantity stored as a textual content variable, for instance, is one thing chances are you’ll need to delete or substitute as soon as the import finishes.
The usage of Imported Variables With Your Present Content material
Design Variables paintings absolute best whilst you tie them into your presets. After uploading, plug your new variables into the Possibility Staff Presets and Component Presets.
You want to set a colour variable because the background colour in a Button preset, for instance. Or observe a host variable in your border radius throughout all card modules. That’s the way you cross from a collection of variables to a running design machine.
Each the Variable Supervisor and Preset Supervisor make stronger import and export. That suggests you’ll be able to transfer variables and presets in combination as a transportable 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 an alternative of the variables you simply imported? Divi 5 offers you 3 gear to change over sooner.
In finding and Substitute permits you to right-click any box, switch a static colour or font for a variable, and push that adjust throughout all the web page in seconds.
Lengthen Attributes takes styling from one part you’ve already attached in your variables and copies it to different components throughout a row, segment, or complete web page.
The Inspector offers you a fowl’s eye view of each colour, font, and preset in an expansion. 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 snappy rundown of the variations between all 3 options and when to make use of them.
Get Acquainted With Design Variables In Divi 5 These days!
The toughest a part of development a design machine is doing it greater than as soon as. Divi 5 makes that more uncomplicated by way of letting you bundle your colours, fonts, spacing, and content material variables right into a JSON document you’ll be able to reuse.
Construct the machine as soon as, export it, and each website online after that begins along with your basis already in position.
The publish How To Import & Export Design Variables In Divi 5 gave the impression first on Chic Subject matters Weblog.
WordPress Web Design