Managing Image Captions

To enable captions on an image

  • Click the Red Chain Icon when hovering over an image to launch the style properties modal.
  • Find the Caption Box section, and click to reveal the settings
  • Click the Enable Caption and Overlay

Caption settings at a glance:

ENABLE CAPTION AND OVERLAY
Show / Hide the caption.

FIGCAPTION POSITION
Position the caption in any of the eight directions (centered by default) or set below.

FIGCAPTION OPTIONS
Set the caption background colour, width, margin and padding

TEXT OPTIONS
Colour and alignment.

CAPTION OVERLAY
Set the colour of the caption overlay area, the caption overlay covers the whole image, whereas the figcaption only wraps the overlay caption/text area.

ENABLE CAPTION CLICK
(Enabled by default) Setting this option as active means the caption text can be linked / made clickable. If this is enabled hovering over the caption will disable the image link underneath. 
If your caption text is covering most of the image, but you want the image to be clickable, disable this option.

CAPTION BELOW ON MOBILE
Setting this to active with drop the caption below the image on mobile. If your text is the same colour as your page background you might need to set a colour to one of the parent elements e.g. figure container or column.




Adding hover effects to captions

You can apply hover effects to the whole row of image captions, by adding a hover effect to the row.

You can apply hover effects to a single image caption, by adding the hover effect to the column containing the image.

Image Captions Tutorial