Skip to main content

Feature

Use this block to add a styled image.

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)
  • Multi-Feature (multiple static images in a single block)
  • Wide Feature (image with a block of text)

Appearance

image.png

Editing the Block

Styling will be applied to this block as part of your website build - this will then remain constant across all pages.

Content

Field Purpose
Heading Enter a short title - this will be output as a text overlay, on top of the image
Additional 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)
Mobile Width

Choose from:

 

  • 33%
  • 50%
  • 100%
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

Additional Options

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

Field Purpose
Text underneath Output the text beneath the image, instead of over the image
Text central Output the text centrally on the image
Do not crop to fit Toggle to retain the aspect ratio of the image uploaded

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