How can we help you today?

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.

Image Titles


TABLE OF CONTENTS


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.


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.


cogwheel icon


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


Image

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


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.


eye icon

  • Click Save to apply all your changes.


Save


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 tab


ITEMS ACTION ICONS

Cogwheel iconCogwheel
opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
DuplicateDuplicateduplicates the item selected.
Trash iconTrash
deletes the item selected.

Add New
Add New
adds a new item.
Drag and DropDrag and Drop
allows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS

ImageImageallows 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.
TitleTitleallows you to add item title.
DescriptionDescriptionallows you to add a description.
LinkLinkallows 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:


Design tab


SETTINGS

StyleStyle allows you to choose the caption animation style of the Image Titles.
ShapeShapeallows you to customize the shape of the Image Titles. You can choose from Square, Wide, or Tall.
Max images per lineMax 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.
ColorColorallows you to modify the background color of the caption animation style you chose.
Text ColorText color 
allows you to choose the color of the text inside the Image Titles.
Horizontal alignmentHorizontal Alignmentallows you to choose the alignment of the text.
SpacingSpacingallows you to modify the spacing between images.
widthWidth
allows you to adjust the width of the Image Titles.


IMAGE SETTINGS

Image PlacementImage 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 settingsEnable Advanced Image Settings
when enabled, advanced image settings will appear.
Image Horizontal PositionImage Horizontal Position
allows you to choose the horizontal position of the image. You can choose from Left, Center, or Right.
Image Vertical PositionImage Vertical Position
allows you to choose the vertical position of the image. You can choose from Top, Center, or Bottom.
Image RepeatImage 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.


Custom CSS tab


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:

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