Inserting or Replacing an Image on a Page

Once you’ve optimized and uploaded your image to the Media Library, the next step is getting it onto the page. This guide covers how to replace an existing image in BeaverBuilder.

📝 Before You Start: Your image should already be optimized (compressed and resized) and uploaded to the Media Library. See How to Optimize an Image Before Uploading and Using the Media Library for those steps.

Replacing an Image in BeaverBuilder

1. Open the page in BeaverBuilder.
2. Hover over the image you want to replace. A blue module outline appears.
3. Click the pencil icon (✎) on the image module.
4. In the settings panel on the left, click the current image thumbnail.
5. The Media Library opens. Click Upload Files to upload a new image, or click on an existing image in the library to select it.
6. Click Select (bottom right of the Media Library).
7. Back in the settings panel, update the Alt Text to describe the new image accurately.
8. Click Save at the bottom of the settings panel.
9. Click Done > Preview to check how the image looks on desktop and mobile.
10. If everything looks correct, click Done > Publish.

Adding an Image Inside a Text Block

If you need to insert an image within a paragraph of text (not into a dedicated image module):

1. Open the text module by clicking its pencil icon.
2. Place your cursor in the text where you want the image to appear.
3. Click the Insert Image button in the text editor toolbar (it looks like a small mountain/landscape icon).
4. Select your image from the Media Library.
5. Choose your alignment and click Insert into post.
6. Save the module and Publish the page.

⚠️ Warning: Do not drag a new Image Module from the content panel onto the page. This changes the page layout, which is an admin task. Only swap images inside existing modules.