An imported section rarely matches your brand on the first try. The headline is in someone else's font, the button is the wrong blue, and the spacing was tuned for a different page. You could fix it module by module, but Divi 5 gives you three tools that do most of the work in a few edits: Global Colors, design variables and presets. This guide shows how to rebrand a Divi 5 layout you have just imported with each one, and the one import behavior that can quietly undo your work.
If the layout is not in your Library yet, start with how to import a Divi 5 layout into your Divi Library.
Why a well-built layout is quick to rebrand
A section can store its colors in two ways. One is a hex code typed into every module: the button says #2563EB, the link says #2563EB, the icon says #2563EB. Changing the brand color then means finding every one of them. The other is a reference to a named global color: all three point at "Blue", and changing Blue once changes all three.
Layouts on Divi Design Kit are built the second way. Colors are global colors with plain names (Ink for headlines, Body for paragraph text, Muted for small print, Line for borders, plus accents), sizes that repeat across a section are number variables, and repeated styles such as headings and dark buttons are presets. The JSON file brings all of them along when you import it, so the levers are already in place.
Step 1: Change the colors in Global Colors
Open a page that uses the section in the Visual Builder, then open the Variable Manager and go to Colors. You will see the layout's colors by name next to any you already had.
Work from the most visible color down:
- The accent (the button and link color). Set it to your brand color and check that white text on it is still easy to read.
- Headline and text colors. Many brands use a warm or cool near-black rather than the neutral gray the layout ships with.
- Backgrounds and borders. Small shifts here make the section feel native to your site without anyone noticing why.
Every module that points at a color updates as you save, on this page and on every other page that uses the same global color. That reach is the point, and also the reason to read the color's name before you edit it: if your existing site already uses a color called Blue for something else, decide whether you want both to change.
Good to know Divi's four Customizer colors (primary, secondary, heading and body) are separate from the layout's global colors. Changing your Customizer primary color does not recolor an imported section, and importing a section never changes those four.
Step 2: Adjust sizes with design variables
The Variable Manager holds more than colors. Divi 5 stores numbers, text, images, links, fonts and gradients there as well. A layout uses number variables for values that repeat. In ours you will find names such as Space / Section (the top and bottom padding of a section, 80px on a wide screen and smaller on phones), Space / Section Large for roomier sections, and Radius / Control for the rounded corners on buttons and fields.
If your site uses tighter sections or squarer corners, change the variable instead of each module. Set Space / Section to the padding your other sections use, or Radius / Control to 0 for sharp buttons, and every module that refers to it follows.
Values that appear only once in a layout are usually set directly on the module, so a one-off spacing tweak still happens in the module's own settings.
Step 3: Restyle headings and buttons with presets
Fonts are where most imported sections give themselves away. How you change them depends on one choice you made during the import, the Import Presets checkbox:
- If you imported presets, the headline and the button are still linked to them. Open the Preset Manager, edit the heading preset's font family, size and weight once, and every heading using it follows. Do the same for the button preset.
- If you left it unchecked, the styles were written onto each module. Change the font on the module itself. If you have several imported sections, this is a good moment to create your own preset from one restyled heading and apply it to the others, so the next change is a single edit.
Our layouts set fonts by name, for example Inter or Plus Jakarta Sans, and Divi loads those Google Fonts automatically. Pick any font your site already uses and it will load the same way.
The import behavior that can undo your rebrand
How the import works When Divi imports a Library file, it merges the file's global colors and variables into your site by their internal ID. If an ID already exists, the value in the file wins.
Layouts from the same collection share their core palette. So if you change Blue to your brand orange and next month import another section that also uses Blue, Blue is orange no more: it is back to the original blue on every page that uses it. Nothing is broken, but it looks like your rebrand vanished.
Three ways to stay ahead of it:
- Import first, rebrand second. If you know which sections you need for a build, import them all, then do the color pass once.
- Write your values down. Keep the hex codes of every global color you changed in your project notes, so a reset is a two-minute fix.
- Check after each later import. Open the Variable Manager's Colors right after importing and correct anything that reverted before you leave the builder.
A short checklist for every imported section
- Import all the sections you need for the build.
- Set the accent, text, background and border colors in Global Colors.
- Match the padding and radius variables to the rest of your site.
- Set heading and button fonts through presets, or on the modules if you skipped presets.
- Replace the copy and images with your own.
- Look at the section at phone width before you publish. Font changes affect line breaks more than anything else.
Want something to practice on? Call to action sections are small enough to rebrand in a few minutes, and the pricing tables show how far a single accent color carries. The full library has every layout, and each one is free.