Changing Colours & Backgrounds in Divi

With Divi, you can quickly update colours and backgrounds to match your brand or freshen up the look of your website.

Step 1 – Enable the Visual Builder

Go to the page you want to edit and click Enable Visual Builder in the WordPress admin bar.

Step 2 – Open Section, Row, or Module Settings

Hover over the area you want to edit.

• Blue outline = Section

• Green outline = Row

• Grey outline = Module
  Click the gear icon to open its settings.

Step 3 – Go to the Background Options

In the Content tab, find the Background section.
Here you can:

• Choose a solid colour.

• Apply a gradient.

• Upload a background image.

• Add a background video.

Step 4 – Adjust Colours

Click the color picker to select a new color.
You can also paste in your brand’s hex code (e.g. #1A73E8).

Step 5 – Save Your Changes

Click the green checkmark to confirm your background or colour change, then click Save (bottom-right purple circle).

Step 6 – Preview Your Page

Click Exit Visual Builder to check how the new color or background looks live.

Additional Notes

• Use gradients for smooth color blends.

• Background images should be optimised for web (see [Optimising Images for Web]).

• Keep accessibility in mind — ensure text has enough contrast against background colours.