How to Customize the Image Caption Design Element in Grid Mode

This support article will discuss how to insert and customize the Image Caption Design Element in Grid Mode. Follow the steps below to get started.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Insert the Image Caption Design Element
  • Step 2: Customize the Image Caption
  • Step 3: Insert and Save
• Image Caption Features
  • A. Design Tab
  • B. Connect Tab
  • C. Visibility Tab
  • D. Custom CSS Tab

Prerequisites

• You have the latest ShortPoint public version installed for your environment 
• You are a ShortPoint designer with an active license

Step-by-step Tutorial

Follow the steps below to learn how to customize the Image Caption Design Element:

Step 1: Insert the Image Caption Design Element

Watch the video below to learn how to insert the Image Caption Design Element using Grid Mode. 

NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Grid Mode for more details.

Step 2: Customize the Image Caption

Add a Title (1) and a Description (2).

Add Image Link.

Choose the Style of the Image Caption. 

(Optional) Add a Link (1) and specify the Linking Options (2).

Adjust the width of the image by using the slider.

(Optional) Enable Center if you want to align the Title and the Description at the center of the image.

Step 3: Insert and Save

Once you are satisfied, click Preview (1) to see how it will look on your site. Then, click Insert (2). 

Click Save.

Then, click Republish.

Image Caption Features

There are many ways to customize the features of the Image Caption Design Element. In the settings window, you will find the following tabs:

A. Design Tab

You can modify the default design of the element in the Design Tab. Below are the settings you can configure:

	Title	adds image title.
	Description	adds Image description.
	Image Link	adds an image.
	Style	choose the caption’s animation style including Quarter Slide Up, Quarter Slide Side, Quarter Fall In, Quarter Two Step, Quarter Zoom, Cover Fade, Cover Push Right, Revolving Door Left, Revolving Door Right, Revolving Door Top, Revolving Door Bottom, Cover Slide Top, Offset, Guillotine revers, Half Slide, Sqkwoosh, and Tunnel.
	Link	specify the link where you will redirect users.
	Linking options	specify how the link will be opened. You can choose from:  Default – by default link will be opened in the same window LightBox – your Link will be opened in the lightbox New window – your link will be opened in the new tab Dialog – your Link will be opened in the dialog window
	Width	the width value in pixels.
	Center	the title and description will be aligned center.

B. Connect Tab

The Connect tab allows you to connect the Image Caption Design Element to another list in your site collection or to other data sources outside of SharePoint.

NOTE: Check out our articles about the Connect feature to learn more. 

C. Visibility Tab

The Visibility Tab allows you to configure who can view the page and what types of devices can be used to access it. 

NOTE: Check out Managing Visibility of ShortPoint Design Elements to learn more about the Visibility feature.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Image Caption Design Element. 

NOTE: Check out our support articles on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

That’s it! You now know how to customize the Image Caption Design Element using Grid Mode. Enjoy creating amazing designs using Image Caption.

Related articles:

• Introduction to the Image Caption Design Element
• How to Customize the Image Caption Design Element in Live Mode
• How to Insert a ShortPoint Design Element in Grid Mode