Skip to main content

CMS Editor Block Library: Media

Add product and marketing images, standalone or with supporting text.

Gallery Grid

Add an image gallery to your product pages or articles.

Image Gallery

  1. Drag the Gallery Grid block into the desired position on the page.

  2. In the Page Settings panel, add a title.

    Gallery Title


    📗 TIP

    Optionally, you can hide the title by checking the 'Hide Title' box.


  3. Press the + Add Images button.

    Feature List

  4. In the Images window, enter an URL or upload an image.

    Add Images


    📗 TIP

    Optionally, you can enter alt text for accessibility.


  5. Press the + Add Image button.

    Add Image

  6. Repeat for each new image.

  7. Remove items using the Remove button.

    Remove Feature

  8. Press the Close button when finished.

    Close


    📗 TIP

    You can remove a specific image from the Settings Panel, or reorder images in the list.

    Edit Gallery


  9. Select the number of image rows (1, 2 or 3), where each row contains three images.

    Number of Rows

  10. Select the layout style:

    Layout Style


    • Gallery


    • Featured


  11. Toggle 'Content Background' on to add a background colour or image.

  12. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  13. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing


Image with Text

Include image blocks with supporting text.

Image with Text

  1. Drag the Image with Text block into the desired position on the page.

  2. In the Page Settings panel, add a title and description.

    Title & Description

  3. Enter an URL or upload an image.

    Image

  4. Enable the Reverse direction to swap the positions of the image and text.

    Reverse direction

  5. Toggle 'Content Background' on to add a background colour or image.

  6. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  7. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing


Single Image

Add a full-width image to your page.

Single Image

  1. Drag the Single Image block into the desired position on the page.

  2. Enter an image URL or upload an image in the Settings Panel.

    Single Image

  3. Crop the image to display only a selected section.

  4. Choose how the image is fitted within the image card:

    • Contain - scales the image to fit within the card, edges are transparent

    • Cover - scales the selected section to fill the card

  5. Toggle 'Content Background' on to add a background colour or image.

  6. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  7. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing

Did this answer your question?