How can we help you today?

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.


Image Caption Sample template


TABLE OF CONTENTS


Prerequisites


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


Title and Description


Add the Image Link


Image Link


Choose the Style of the Image Caption. 


Style


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


Link and Linking Options


Adjust the width of the image by using the blue slider.


blue slider


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


Enable center


Step 3: Insert and Save


Once satisfied, click the green checkmark


Green checkmark


Click Save.


Save


Then, click Republish.


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:


Design tab


TitleTitleadds image title.
DescriptionDescriptionadds Image description.
Image LinkImage Linkadds an image.
StyleStylechoose 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.
LinkLinkspecify the link where you will redirect users.
Linking OptionsLinking optionsspecify 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
WidthWidththe width value in pixels  
CenterCenterthe 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.


Custom CSS tab


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:








Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 34 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more