Adding an Image.

Add a photo or illustration that fills its column and scales with the screen.

Add an image

Open your page while logged in: the builder controls appear when you hover the content area. Your first page shows the basics.

1. Hover the column and click + in its control bar, or click Add Elements on an empty page. Open the Content tab and click Image. It lands at the top of the column and its settings dialog opens.
2. Under Image, click Select Image. In the Media browser, filter by name if you like, tick a photo and click Insert selected.
3. Click the SEO heading to expand it. Replace any text in Alt attribute with a short description of the photo.
4. Click Save in the dialog. Then click Save in the toolbar at the top of the content area to store the page.

What you see

The default Image width is 100%. Screen readers announce your alt text. To check scaling, set View mode to Preview and narrow your browser window. Visitors see your changes after you save and publish.

Set up your image

Hover the element and open More > Settings in its control bar. Options:

• Image: select an image from your site's media or file browser, upload a file, or paste an external URL.
• Image width: a CSS width such as 100% or 300px. The default is 100%.
• Image height: a fixed height such as 400px. Leave it empty to keep the photo's shape.
• Image link: makes the image clickable. Enter a URL or pick a page.
• Image link target: Same window or New window. It shows once you add a link.
• Alt attribute: in the SEO section, a description for screen readers and search engines.
• Title attribute: in the SEO section, extra information that shows as a tooltip on hover.

Image loading and page speed

DXPR Builder manages loading for new images automatically to keep pages fast and prevent content from jumping. Images at the start of the page and inside tabs, carousels and marquees stay ready to show. Images farther down can load as visitors scroll.

Images can come from your media library, uploaded files or external URLs. Let images finish loading in the editor before saving so DXPR Builder can reserve the right amount of space. Replacing an image updates its dimensions without changing your chosen display size.

Images already on your site are not upgraded automatically. Page speed also depends on image file size and other content. Check your published page on narrow and wide screens.

If you don't see it

• Image is not in the Content tab. Your user profile hides it. Ask an administrator to enable it in User Profiles.
• It is gone after you reload. The page was not saved. Add it again and click Save in the toolbar at the top of the content area.
• The image element is empty. No picture is set in the Image field. Hover the element and open More > Settings, then click Select Image.
• A broken-image icon appears. The file was deleted or moved in the media library. Hover the element and open More > Settings, remove the selection and pick a new image.
• The image is stretched or squashed. Image width and Image height both hold fixed values that do not match the photo. Clear Image height to restore its shape.

What's next?

Style tab to change spacing and background for your image.