Replacing iImages in Image Modules

Replacing an image in a standard Image Module is the most common task in Divi. Unlike backgrounds, which sit behind your content, the Image Module is a piece of content itself.

Here is the step-by-step process:

Step-by-Step Guide

1. Enable the Visual Builder

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

2. Locate the Image Module (The Gray Box)

Hover your mouse over the image you want to change. A Gray menu box will appear specifically for that module.

3. Open Image Settings

Click the Gear Icon (⚙) in the gray menu box. This opens the Image Settings panel.

4. Replace the Image

• In the Content tab, you will see an Image section at the very top.

• Click on the existing image thumbnail (or the trash can icon to clear it first).

• The WordPress Media Library will open.

• Upload a new file from your computer or Select an existing one from the library.

• Click the "Upload an Image" button in the bottom right corner.

5. Add "Alt Text" for SEO (Crucial Step)

While still in the Image Settings:

• Scroll down to the Advanced tab.

• Open the Attributes dropdown.

• Enter a descriptive sentence in the Image Alternative Text box.

  Why? This helps Google understand what the image is and allows screen readers to describe it to visually impaired visitors.

6. Adjust Image Alignment (Optional)

If your image looks too small or is off-center:

• Go to the Design tab.

• Open the Alignment section.

• Choose Left, Center, or Right alignment.

7. Save Your Changes

• Click the Green Checkmark (✓) at the bottom of the Image Settings panel.

• Click the Purple "..." button at the bottom center of the screen and hit the Green "Save" button to make the change live.

A Note on Image Sizes

Before you upload, try to ensure your image isn't massive (e.g., 5MB+). Large images slow down your site significantly.

• Full-width images: ~1920px wide.

• Standard module images: ~800px to 1200px wide.