How to Customize the Image Titles Design Element

This article will demonstrate how to customize the Image Titles Design Element and discuss the OOTB options you can modify.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Image Titles Design Element
  • Step 3: Edit the content
  • Step 4: Customize the Image Titles’ design
  • Step 5: Save
• Image Titles Features
  • A. Items tab
  • B. Design tab
  • C. Custom CSS Tab

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Image Titles Design Element:

NOTECheck out Image Titles Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Image Titles Design Element:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2:Insert the Image Titles Design Element

• Click the plus icon.
• Use the search box to look for Image Titles and click it.

Step 3: Edit the content

• Click the cogwheel icon of the first item to edit its content.

• [1] Paste the URL of the image you want to showcase or [2] click the folder icon to select the image you want to display.

• Add a Title.
• Add a Description.
• (Optional) Add a Link.
• Click the back icon.

• Repeat the same steps for the other items. 
• (Optional) If you want to add another item, click Add New and repeat the steps above to edit its content.

NOTEYou can also create dynamic content using the ShortPoint Connect feature. To learn more about it, check out ShortPoint Connect: Basic Tutorial.

Step 4: Customize the Image Titles’ design

• Navigate to the Design tab.
• Customize the look of the Image Titles according to your preference.
• Once satisfied, click the green check mark.

NOTECheck out Image Titles Features to learn more about the OOTB options you can customize.

Step 5: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Image Titles Features

Below are the options you can find in the Image Titles Settings window:

A. Items tab

The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:

ITEMS ACTION ICONS

	Cogwheel	opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
	Duplicate	duplicates the item selected.
	Trash	deletes the item selected.
	Add New	adds a new item.
	Drag and Drop	allows you to re-arrange the position of the item.

COGWHEEL ICON SETTINGS

	Image	allows you to choose the image you want to showcase. You can add images using two options: (1) the folder icon, which will redirect you to your SharePoint contents library, or (2) the Image field, which allows you to paste the URL of the image you want to use.
	Title	allows you to add item title.
	Description	allows you to add a description.
	Link	allows you to add a link where users will be redirected when they click an item.

B. Design tab

The Design tab allows you to customize the look of the Image Titles Design Element. It has the following options:

SETTINGS

	Style	allows you to choose the caption animation style of the Image Titles.
	Shape	allows you to customize the shape of the Image Titles. You can choose from Square, Wide, or Tall.
	Max images per line	allows you to modify the maximum number of images to show in a line. By default, it is set to four images.
	Color	allows you to modify the background color of the caption animation style you chose.
	Text color	allows you to choose the color of the text inside the Image Titles.
	Horizontal Alignment	allows you to choose the alignment of the text.
	Spacing	allows you to modify the spacing between images.
	Width	allows you to adjust the width of the Image Titles.

IMAGE SETTINGS

	Image Placement	allows you to choose how the images will be shown. You have the following options: Cover the area: will resize the image to fill the whole container from all edges, while maintaining the image aspect ratio. Some parts of the image may be cropped. Show entire image: will resize the image to make the whole image fill the container without any cropping. Actual size: will show the exact image size without any resizing, while maintaining the image aspect ratio.
	Enable Advanced Image Settings	when enabled, advanced image settings will appear.
	Image Horizontal Position	allows you to choose the horizontal position of the image. You can choose from Left, Center, or Right.
	Image Vertical Position	allows you to choose the vertical position of the image. You can choose from Top, Center, or Bottom.
	Image Repeat	allows you to repeat the image. You can choose from Repeat, Don’t Repeat, Repeat Horizontally, or Repeat Vertically.

C. Custom CSS Tab

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

NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

That’s it! You can now effectively use the ImageTitles Design Element on your SharePoint pages.

Related articles:

• How to Customize the Icon List Design Element
• How to Customize the Info Design Element
• How to Customize the Background Design Element
• How to Customize the Frame Design Element