Skip to main content

Multi-Feature

Use this block to add multiple static images in a single block.

There are also other blocks which can be used to add images:

  • Image (simple images)
  • Carousel (small images on a swipeable carousel)
  • Hero (large rotating banners)
  • Parallax (an image that sits behind content, adding depth to a page)
  • Feature (a styled image)
  • Wide Feature (image with a block of text)

Appearance

image.png

Editing the Block

To best configure this block, it is important to select your layout under Settings (see below) before you upload any images

Each image has an expandable menu, allowing it to be edited individually.

image.png

Content

Field Purpose
Heading Enter a short title - this will be output as a text overlay, on top of the image
Text Enter some short text - this will be output as a text overlay, on top of the image below the title
Link URL Enter a link URL - if populated, this will add a link to the image. 
Link Text

Text to be shown with a button, if a link is set

 

If left blank, the whole image will act as a button

Delete This Image? Use this control to delete an image

Use the Image dialogue to select images to upload to this block.

Settings

Field Purpose
Block Width

Choose from:

 

  • 25%
  • 33%
  • 50%
  • 66%
  • 75%
  • 100%
  • Full Width (set to always be the full width of the user's device)
Visibility

Set the block visibility from the list:

 

  • Default (both)
  • Desktop Only
  • Mobile Only
  • Hidden (none)
Text Colour

Choose from:

 

  • Auto (will select a high contrast automatically)
  • Black
  • White
Layout

Use the control to select the layout - this may alter the number of images in this block

 

image.png

Gap

Choose the number of pixels between the images within this block

Additional Options

These options allow you to auto assign Products to Hero Images, without assigning specific Products. 

Field Purpose
Text central Output the text centrally on the image

Advanced

Padding

Adding padding will insert space within the current block; this will adjust the position of content within the block.

More information is available here

Margin

The margin will add additional space around the current block. 

More information is available here