Skip to content

Adding an Image

You get a single photo or illustration that fills the column and scales with the screen. Use it for a hero shot, a product photo or any picture that stands alone.

Colourful swirl artwork displayed with the DXPR Builder image element

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

Your photo fills the column at the default Image width of 100%, and screen readers announce your alt text. To check how it scales, set View mode in the toolbar to Preview and narrow your browser window. Visitors see it once you save the page and it is published.

Set up your image

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

  • Image: the Select Image button opens the media library. On sites without a media browser, the button uploads a file from your computer instead.
  • 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.

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.

Something wrong or missing on this page? Report it or edit the page.