Swapping Out an Image
How to click an existing image module, replace the image, and adjust alt text.
Replacing an image on a page is one of the most common updates you’ll make. This guide walks you through how to swap an image inside an existing BeaverBuilder image module.
⚠️ Before You Start: Make sure your replacement image has been optimized and compressed before uploading. Uploading a large unoptimized photo will slow down the page. See How to Optimize an Image Before Uploading for instructions.
Steps to Replace an Image
- Open the page in BeaverBuilder.
- Hover over the image you want to replace. A blue outline appears around the image module.
- Click the pencil icon (✎) on the image module. The settings panel opens on the left.
- In the settings panel, click the current image thumbnail — or click the ✕ (remove) icon to clear it.
- The Media Library opens. You can either:
— Select an image that’s already uploaded, or
— Click Upload Files to upload a new one from your computer. - Select your image and click Select.
- Update the Alt Text field. Type a short description of what the image shows (e.g., “Youth soccer players celebrating a goal”). This is required for accessibility and SEO.
- Click Save at the bottom of the settings panel.
- Preview the page to confirm the image looks correct.
- Click Done > Publish when satisfied.
What Is Alt Text and Why It Matters
Alt text (alternative text) is a written description of an image. It serves two purposes:
- Accessibility: Screen readers used by visitors with visual impairments read the alt text aloud instead of showing the image.
- SEO: Search engines like Google read alt text to understand what an image is about, which helps with search rankings.
Good alt text is specific: instead of “photo” or “image1.jpg”, write something like “Coach Maria demonstrating a passing drill at practice.”
⚠️ Warning: Do not drag image modules to new locations on the page. Only use the pencil icon to swap the image inside the existing module. Moving modules changes the layout.
