Rebranding your website doesn’t require a full rebuild, though it often feels that way. Fonts are stuck in separate parts, colors are spread across sections, and spacing is hidden in individual settings. And after updating the homepage, you find other pages needing the same changes. It’s the usual routine, but there’s a faster way.
With Extend Attributes in Divi 5, you can style a single element and instantly apply that look to every similar module across rows, sections, and even the entire page. Let’s walk through how to use it to rebrand a full website in minutes, not hours.
What Are Extend Attributes In Divi 5
Extend Attributes is a Divi 5 feature that lets you take the design of one module and apply it to other elements or modules around it. This means if you’ve styled a button, a heading, or a text block, you don’t have to recreate those styles from scratch, because you can just extend them to other elements.
Here’s how it works in practice. You start by editing any module in the Visual Builder. Then, instead of repeating those changes module by module, just right-click the module and choose Extend Attributes.
Divi will ask where you want those styles to go. Once you confirm, all the matching modules adopt the same styles. Extend Attributes doesn’t look for what matches, but copies the current look and applies it to your target of choice.
This makes it one of the fastest ways to roll out design changes without micromanaging each block. It helps you turn repetitive styling into a single action, no matter if you’re building from scratch or rebranding an entire layout.
How Extend Attributes Helps Rebrand A Website Faster
We’ll walk through how you can use Extend Attributes alone and also with Option Group Presets to speed up your website rebranding process.
Using Extend Attributes in Divi 5
The process is simple: style one module, right-click to choose Extend Attributes, and extend those design choices to every similar module, without opening a single setting panel twice. Let’s walk through it using a real example.
Say you want to rebrand all your call-to-action buttons. Start by styling one Button module inside the Visual Builder.
Once you’re done, right-click and select Extend Attributes. (We selected Extend Button Design Attributes since we only want to extend the styles, not the content. You’ll also notice many options, which help you micro-select specific properties.)
The Extend Attributes panel will open, and you can choose from several different options to decide how and where your design changes should be applied.
- (1) Extend From Element: The module you’re extending from, like Button in our case. This is automatically filled based on what you right-clicked.
- (2) Extend To Location: Choose how far the design should go. We’ve selected Entire Page since we want all the buttons from the page to change.
- (3) Extend To Element Type: Pick which module types should receive the new styles. For example, only Button modules or all similar modules.
- (4) Attribute Type To Extend: Specify what you want to copy. We chose Design attributes and left others out.
- (5) Option Group To Extend: Decide which option group(s) to apply: Text, Button, Border, Spacing, etc.
- (6) Modified Fields To Extend: You can also limit your selection to only one style property or choose All Modified Fields to extend all the changes you made.
After selecting your preferences, click Extend Attributes, and the new styles will be applied to all the other buttons on the page.
Did you notice how there was no need to search for matching values? That’s because Extend Attributes doesn’t care what the original styles were. It copies the current look from the selected module and pastes it directly onto every similar module in your chosen location.
This is what makes it so useful for layout packs and existing websites. Extend Attributes gives you total control with one styled module and one click, whether you’re adjusting font sizes, updating colors, or tweaking spacing.
Learn Everything About Extend Attributes
Using Option Group Presets With Extend Attributes
When you’re working on a website with multiple pages, it’s not enough to just copy styles visually. You want a system that sticks, and that’s where presets come in.
Presets let you save a group of styles inside any module and reuse them across your site. Combine that with Extend Attributes, and you have a fast, flexible way to rebrand not just one page, but your entire website. This combination also helps you future-proof your website, such that if you need to rebrand again, you can easily modify the presets and all modules where they’re used will also update.
Let’s go back to the button example to understand how this works.
We had styled one button with a brand new look. Now, instead of extending the settings as static values, we’ll save them as presets.
Here’s where Extend Attributes comes in. When you click on Extend Attributes, you’ll see the presets you saved appear. Select individually if you want to extend only selected presets, or choose the Extend Button Presets to carry over all.
When you extend, Divi doesn’t just copy the look; it applies your saved preset behind the scenes. So any other button it touches now uses the same preset.
Why add another step? This is where future-proofing your website benefits. Suppose in the next few months you decide to tweak your button style later. Would you want to extend the styles again? No, right?
Well, you don’t even have to because you only need to update the preset once. Since all your button modules were built with the same preset, every instance using it updates automatically.
Plus, once saved, Option Group Presets are available across other pages as well. So when you’re done rebranding your home page and move to others, you’ll just apply your saved presets and extend them in minutes.
That’s why using Option Group Presets with Extend Attributes is a more innovative way to rebrand. You get visual consistency and a system that’s easy to update without redoing your work.
Learn Everything About Option Group Presets
Want to try this yourself? You’ll need Divi 5, which brings Extend Attributes, Option Group Presets, and many more features into the new builder. It’s been redesigned from the ground up for speed, control, and a smoother design workflow.
How To Rebrand A Website With Extend Attributes
Now that you’ve seen how Extend Attributes works and how it pairs with Option Group Presets, it’s time to apply it to a real website.
For this walkthrough, we’ll use the AI Software Layout Pack. It’s a complete website with pages like Home, About, Contact, and Pricing. We’re not aiming for a complete overhaul here. It’s just a light rebrand, the kind we’d normally do in our monthly updates.
To start, look at the elements that define the visual identity of your site, such as buttons, headings, blurbs, and body text. These modules show up across multiple pages and carry most of the brand’s personality. Once you’ve restyled just a few of them, Extend Attributes lets you push those changes everywhere they appear.
Let’s walk through exactly what to update.
Visually Rebrand Key Modules Across the Layout
We’ll start with the homepage, since it sets the tone for the rest of the site. Most websites repeat the same design patterns across multiple pages, so once we update the homepage, you’ll have the foundation for everything else.
After scanning the layout, we’ve identified the most visible elements that shape the brand’s look and feel. These are buttons, headings, blurbs, body text, and images. Since we’ve already rebranded our buttons, we’ll start with headings.
Rebranding Heading Modules
First, customize any heading module to reflect your new branding. I’ll start with H4s.
Once you’re happy with the styling, right-click the module and choose Extend Attributes. Select the scope for the Entire Page and module type to Text. Apply the change to all H4 modules on the page.
Similarly, you’ll rebrand the H1, H2, and H4s to unify typography and give your site a consistent voice in just a few clicks without restyling each heading module manually.
Rebranding Body Text For Better Readability
Now let’s update the body text. Start by picking any Text module with a paragraph block. Customize to match your brand’s tone. When you’re satisfied with the changes, right-click the module and select Extend Attributes. Choose to apply the update across all Text modules on the page.
This gives your paragraphs a consistent style across the page in seconds and eliminates the need to edit each one individually.
Rebranding Blurb Borders
Next, I want to add a border to streamline all my Blurb Modules. So, I’ll style one column, then right-click the column in the row’s Design tab and select Copy Styles. Then, Paste Styles to the next column and so on.
You’ll notice that I changed the row’s layout to Flex and Divi automatically equalized the column heights, keeping the blurbs aligned no matter how much content they contain. This works because Divi now supports Flexbox features, which help you build responsive, intelligent layouts faster.
Rebrand Other Pages Using Saved Presets
Now that the homepage is updated, you don’t need to repeat the process from scratch. You can duplicate sections or rows into other pages, or, since you’ve saved your new styles as Option Group Presets, you’re already set.
Your saved presets will appear across all pages.
All you need to do is apply them where needed and use Extend Attributes to push the styles instantly. There are no manual edits and no repeated design work.
You can follow the same process to rebrand other pages on your website.
Extend Attributes gives you the flexibility to enjoy rebranding again. They’re great when you want to visually restyle modules across a page.
But if you need to swap a specific value, like a hex code, font size, or spacing unit, across different modules, you’ll want to try Find And Replace. It works especially well for layout packs that use hard-coded values. You can use Find And Replace to swap those with saved design variables to get more flexibility for future updates.
Pro Tip: Use Extend Attributes With Design Variables
Extend Attributes doesn’t just copy static styles; it can also carry over your saved Design Variables. For example, if you’ve assigned a heading font variable to one Text Module, you can extend that module’s settings to all other Text Modules on the page. Instead of each heading carrying hard-coded values, they all inherit the same variable.
This means future updates are even easier: adjust the variable once in the Variable Manager, and every extended module updates automatically. It’s a powerful way to combine Extend Attributes with Divi 5’s variable system for scalable, brand-wide control.
Extend Attributes Lets You Rebrand Without Rebuilding
Rebranding doesn’t have to mean rebuilding. With Extend Attributes, you style one module and apply that look to the rest, cutting hours of edits down to seconds.
Whether you’re working with a layout pack or updating a live site, Divi 5 gives you the fastest way to refresh your design without touching every single element.
Leave A Reply