How to Customize the Image Caption Design Element in Live Mode

In this article, we will walk you through how to insert and customize the Image Caption Design Element in Live Mode.

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. 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

Go through the interactive video below to learn how to insert the Image Caption Design Element using Live Mode:

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

Step 2: Customize the Image Caption

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

Add the Image Link. 

Choose the Style of the Image Caption. 

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

Adjust the width of the image by using the blue 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 satisfied, click the green checkmark. 

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 a lightbox New window – your link will be opened in a new tab Dialog – your Link will be opened in a dialog window
	Width	the width value in pixels
	Center	the title and description will be aligned center

B. 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 article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTE: The Connect and Visibility tabs are currently not available in Live Mode.

You now know how to customize the Image Caption Design Element in Live Mode. You can also check out how to customize it in Grid Mode. 

Related Articles:

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