Skip to main content

Find and Replace Attributes in Divi 5 Visual Builder

Learn how to find and replace attributes in Divi 5 Visual Builder to quickly update design values across your layouts.

Updated yesterday

Find and Replace in Divi 5 lets you swap one value for another across a module, section, or entire page.

You pick a value in a field, choose where you want to search, and Divi updates every matching instance in one go.

It is ideal for cleaning up static colors and fonts, updating spacing, or migrating old designs into Divi 5's variable and preset system.

Instead of manually editing every module, you change one field and let Divi do the repetitive work.

Before you start

Make sure:

  • You are editing a page or template in the Divi 5 Visual Builder.

  • You know which value you want to replace (for example, a color, font size, or spacing value).

  • You have a rough idea of how wide the change should be: one module, a section, or the whole page.

⚠︎ Note: Find and Replace works on individual fields inside element settings. It is not a global theme-wide search; it focuses on the current page or template you are editing.

How to open Find and Replace

  1. Open the element settings modal window by clicking on the element itself or by clicking on the Gear icon.

  2. Locate the field that holds the value you want to change (for example, a background color or text size).

  3. Either:

    • Right-click on the field, or

    • Click the three-dot icon next to the field label

  4. Choose Find & Replace from the contextual menu.

Divi opens the Find and Replace modal with:

  • Source Element: This will already be prefilled with the element name from where you have opened the Find and Replace.

  • Find Value: This will already be prefilled with the value from the option used to initiate the Find and Replace.

  • Replace Value: Enter the new value you want to replace with the found value.

  • Find and Replace in Location: Choose where the find and replace should happen:

    • Entire page: Will search for the value in the Find Value field and replace it with the value from the Replace Value field on the entire page.

    • Current Element: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only inside the current selected element.

    • Current Element & Children: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only inside the current selected element and its nested elements.

    • Current Element & Descendants: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only inside the current selected element and all its descendants.

    • Parent Column: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only on other elements that are in the same column as the selected element.

    • Parent Row: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only on other elements that are in the same row as the selected element.

    • Parent Section: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only on other elements that are in the same section as the selected element.

  • Find And Replace In Element Type:

    • All Elements: Will search for the value in the Find Value field and replace it with the value from the Replace Value field on all other elements regarless of their type.

    • All Modules: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only on other elements that are in the same section as the selected element.

    • All Containers: Will search for the value in the Find Value field and replace it with the value from the Replace Value field on all types of containers: Columns, Rows, Sections, Groups, etc.

    • Column: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only in Columns.

    • Row: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only in Rows.

    • Section: Will search for the value in the Find Value field and replace it with the value from the Replace Value field only in Sections.

  • Only Replace Identical Fields: By default, Find and Replace will replace every instance of the value inside the chosen location and allowed element types.

    Sometimes that is too broad. The Only Replace Identical Fields tightens things up:

    • When disabled, Divi replaces any field that matches the value (for example, every 10px anywhere in the scope).

    • When enabled, Divi only replaces fields of the same type as the source field (for example, only border radius fields, not padding or margins that also use 10px).

⚠︎ Note: Use the Only Replace Identical Fields when:

  • You want to replace the same value that appears in many field types

  • You want to avoid accidentally changing unrelated things.

Running a Find and Replace

Basic workflow:

  1. Open the element settings and choose the field you want to replace the value of other fields.

  2. Open Find & Replace from that field.

  3. Check Source Element and Find Value are what you expect.

  4. Enter your Replace Value.

  5. Choose a Location that matches how broad you want to go.

  6. Optionally choose an Element Type filter.

  7. Decide whether to enable Only Replace Identical Fields.

  8. Click the Find And Replace button.

Divi then updates all matching fields. You can use undo or the History panel if you do not like the result.

What you can replace with Find and Replace

Find and Replace works on most numeric and color-based design values as well as other field types. Typical things you will replace:

  • Colors (hex, RGB, HSL, variables)

  • Font sizes, line heights, letter spacing

  • Spacing values (margin, padding, gap)

  • Border radius, border widths, and shadow sizes

  • Other numeric values inside field options

Using Find and Replace with variables and presets

Divi 5 encourages variable-based and preset-based design. Find and Replace helps you move existing pages into that system.

Typical pattern:

  • You define a design variable for a heading font or primary color.

  • On older pages, you still have static fonts or colors applied directly in many modules.

  • Use Find & Replace to search for the old static value and replace it with the global variable of your choice.

This lets you quickly:

  • Swap static fonts for variable-powered fonts.

  • Swap hard-coded colors for global color variables.

  • Clean up leftover static values after extending presets and attributes.

Once most values come from variables and presets, future design changes become much easier.

Find and Replace vs other tools

Divi 5 has three big "cleanup" helpers that work together:

  • Style Inspector – shows you what you have, where values are used, and helps you swap static values for variables and presets.

  • Find and Replace – swaps specific values across a chosen scope when you already know what value you want to change.

  • Extend Attributes – pushes all attributes from one element to others at once, great for syncing whole components.

Quick rule of thumb:

  • Use Inspector to discover issues.

  • Use Find and Replace to fix repeated specific values.

  • Use Extend Attributes to roll out broader design changes from one "source" element.

Practical examples

Here are a few concrete ways you might use Find and Replace in Divi 5.

Example 1: Update a color across a page

You decide your accent color should change from #ff6600 to #ff3366.

  1. Open any element using #ff6600.

  2. Open its background or text color field.

  3. Open Find & Replace.

  4. Confirm the Find Value is #ff6600.

  5. Set Replace Value to #ff3366 (or to a color variable representing the new accent).

  6. Set Location to This Page.

  7. Optionally restrict Element Type if needed.

  8. Click Find And Replace.

Your new color now replaces the old one everywhere in that page scope.

Example 2: Fix inconsistent border radius

You want all elements on a page to use a 20px border radius, but some are still 10px.

  1. Open an element that uses a 10px border radius.

  2. Open the Border Radius field (in the Design Tab → Border) and launch Find & Replace.

  3. Find Value: 10px

  4. Replace Value: 20px

  5. Location: maybe Parent Section or Entire Page.

  6. Turn on Only Replace Identical Fields so you do not touch margins or padding that also use 10px.

  7. Run Find and Replace.

Now border radii match, but the other 10px values stay as they were.

Example 3: Adjust spacing on a layout

Your vertical spacing feels too tight at 24px, and you want to bump everything in a section to 32px.

  1. Pick a module inside that section that uses a 24px bottom margin or padding.

  2. Open that Spacing option group (in the Design Tab→Spacing → Padding field) and start Find & Replace.

  3. Find Value: 24px

  4. Replace Value: 32px

  5. Location: Parent Section.

  6. Optionally enable Only Replace Identical Fields to target only the spacing field type you started from.

  7. Run the replacement and preview.

Tips and best practices

A few habits will keep Find and Replace safe and effective:

  • Start small with Location: test on an element or section before running page-wide changes.

  • Use Only Replace Identical Fields when dealing with common values to avoid touching unrelated fields.

  • Combine it with Style Inspector: inspect first, then use Find and Replace to fix repeated values.

  • Use undo and History if a replacement feels too aggressive.

  • After big changes, scan the page at different breakpoints to confirm everything still looks right.

Once you get comfortable with Find and Replace in Divi 5 Visual Builder, you will rely on it any time you need to clean up old values, roll out new design decisions, or migrate older layouts into your newer variable and preset system.

Did this answer your question?