If you’re a web designer or manage multiple sites, you know the pain of setting up the foundation for each new project. Design variables are even more effective when you can reuse them across sites.
That’s why we recently introduced import and export for presets and design variables, making it easy to transfer your design system between sites in minutes. Set up your design system once and then use it for every project. Here’s how it works.
What are design variables in Divi 5?
Design variables store reusable values that you can apply across your site. They are shortcuts for design decisions you make repeatedly. Manage everything through the Variable Manager in Divi’s left sidebar while using the Visual Builder.
Click the icon, add your values, give them a clear name and start applying them to modules and presets. Divi 5 supports six types:
Subscribe to our YouTube channel
- To colour lets you define your brand palette and apply these shades consistently across your website. Colors also support relative colors and HSL.
- Fonts save your typography choices so you can instantly reuse heading styles or body text settings.
- Numbers store store size decisions such as border radius, padding, and line height.
- Images contain recurring images such as logos or background images.
- Text stores content that appears in multiple places, such as company addresses or slogan.
- Links keep meaningful URLs ready to use.
To use them, click the variables icon in a supported field and then choose the variable you want to apply.
When you update a variable, everything that uses it is automatically updated on your site. There’s no need to search through individual pages or track down every event.
How importing and exporting design variables helps
Design variables work well on one site, but most designers and agencies handle multiple projects at once. Rebuilding colors, fonts, spacing, and recurring content takes hours each time.
Divi 5 allows you to export all design variables on a site into a single JSON file and then import that file into another Divi 5 project. It benefits everyone:
- Agencies keep brand attributes consistent across sites.
- Freelancers drop a starter framework into each new client project and customize from there.
- Teams can share a variable set so that new members can start building without recreating values that already exist.
Common usage scenarios
The table below lists common scenarios where importing and exporting design variables saves real time. Each suits a different workflow, so you’ll probably see yours here:
Most of these boil down to one thing: not doing the same installation work twice. Whether you’re transferring a project, hiring a teammate, or protecting your own work, JSON export gives your design system life beyond a single site.
Export design variables
Open the Visual Builder and click the Variable Manager icon in the left sidebar.
You’ll see the import/export icon at the top of the panel.
On the Export tab, you will see a field for your export file name. Give it something descriptive, like “ClientName Variables” or “Agency Starter Kit,” so you can identify it later.
Once you name it, Divi 5 wraps every design variable on your site into a single JSON file. Colors, fonts, numbers, images, text and links are all bundled together. Click the export button and your browser will download the file.
This exported JSON file works with any other Divi 5 site. You can place it in a test environment, a customer project, or a teammate’s local installation. The file contains your entire variable set, so the receiving site gets your entire design system in a single upload.
Get the most out of your exported files
Clear variable names make a big difference when someone else opens your JSON file. A variable called “Blue” tells the next person nothing. Blue can be the header background, a button fill, or a border color. But “Header BG” or “Dark Background” takes the guesswork out of it.
Same with numbers. “Card Radius” is immediately clear. “Ray 1” forces one to apply it just to find out what it does. A few minutes of name cleaning before exporting will save everyone else time later.
The downloaded JSON file will not reflect any changes you make after exporting. Adding a date to your filenames helps. Something like “Design Kit – February 2026” makes it easy to distinguish versions if you have multiple saved.
Exports can also serve as a backup. Before you change a site’s color palette or swap a distance scale, a quick export saves the current state. If the new direction doesn’t work, you can import the old file and restore everything quickly.
Divi 5’s Preset Manager has its own separate import and export. The Preset Manager and Variable Manager handle the exports separately. That means you typically get two JSON files: one for presets and one for design variables. Together they form your complete design system and make each system easier to manage.
Import design variables
Importing design variables uses the same import/export panel as exporting, but you switch to the Import tab and upload a JSON file. Open the Visual Builder and go to Variables Manager in the left sidebar. Click the import/export icon at the top of the panel and navigate to the import tab.
Once you upload it, Divi will load every variable from that file to your current site. Colors, fonts, numbers, images, text and links all come through at once.
Prepare your site before importing variables
A clean import starts with a clean Variable Manager. Before you load a JSON file from another project, take a few minutes to review what’s already on your site.
If your site already has variables set up, check your Variables Manager after importing and clean up anything you don’t need, such as duplicates, placeholders, or test values. You can also rename variables to keep your set consistent and easy to understand.
Scroll through each of the six variable types and delete anything you created during testing but never actually applied.
Also plan to clean up after importing. A full design system JSON may contain values that don’t apply to your site. For example, a specific address or phone number saved as a text variable is something you may want to delete or replace once the import is complete.
Use imported variables with your existing content
Design variables work best if you link them to your presets. After importing, connect your new variables to the Option Group Presets and Element Presets.
For example, you can set a color variable as the background color in a button preset. Or apply a number variable to your border radius for all map modules. This is how you go from a set of variables to a working design system.
Both Variable Management and Preset Management support import and export. That means you can move variables and presets together as a portable kit. Import both onto a new site and your design framework will be ready to use without having to build it from scratch.
What if your site already contains content and that content still uses static values instead of the variables you just imported? Divi 5 gives you three tools to make the transition faster.
With Find and Replace, you can right-click a field, swap a static color or font for a variable, and make that change across the entire page in seconds.
Extend Attributes takes the style of an element you’ve already linked to your variables and copies it to other elements across a row, section, or entire page.
The Inspector gives you an overview of every color, font, and preset in a selection. You can see at a glance static values that still need to be switched.
Put all three together and a freshly imported set of variables becomes a working design system for your entire site. Here’s a quick overview of the differences between all three features and when you can use them.
Get to know design variables in Divi 5 today!
The hardest part of building a design system is doing it multiple times. Divi 5 makes that easier by letting you package your colors, fonts, spacing, and content variables into a JSON file that you can reuse.
Build the system once, export it, and every site afterward starts with your foundation already in place.
#Import #export #design #variables #Divi