Skip to content

Main Navigation

Version 3.1: Image with Caption

What is an image with caption?

An image with caption allows for captions and images to coincide together in one section.

Example of Image with Caption

Creating an image with caption

Step 1:

On the page you're editing, click on the Snippets icon in the WYSIWYG Toolbar.

Step 2:

Select the Image with Caption and click Insert.

image with caption

Step 3:

Select the default image and delete it.

Step 4:

Click the Insert/Edit Image icon in the WYSIWYG Toolbar.

Step 5:

Browse through your images on your site to include in the snippet.

Step 6:

After the image has been selected, add an Alternative description and/or Image title if needed.

If none are needed, click the checkbox to indicate that the Image is decorative.

Step 7:

Replace default text with your own. Place a link on the text if necessary.

Ways to style an image with caption

Add these classes in the table properties.

Helper Class:   width-half

Reduces the image with caption snippet to half of the width of the browser window. 

Caption text goes here


Helper Class:   width-quarter

Reduces the image with caption snippet to a quarter of the width of the browser window. 

Caption text goes here


Helper Class:   has-border

Adds a border around the image and caption.

Caption text goes here


Helper Class:   position-right, position-left

Aligns the image with caption either left or right of the browser window.

Image with caption: position-right

Image with caption: position-left

 

 

Resources


Video Tutorials

(COMING SOON)


Layout Examples Library

(COMING SOON)

Last Updated: 3/1/22