How to Customize the Icon Boxes Design Element

NOTEThis is currently still in development and will be released soon.

This article will showcase how to customize the Icon Boxes Design Element and detail all its features.

TABLE OF CONTENTS

• Prerequisites
• What Is an Icon Box?
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the Icon Boxes Design Element
  • Step 3: Add content
  • Step 4: Customize the Style
  • Step 5: Customize the Design
  • Step 6: Save
• Icon Boxes Features
  • A. Style Tab
  • B. Items Tab
  • C. Design Tab
  • D. Advanced Tab
  • E. Custom CSS Tab

Prerequisites

• You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

What Is an Icon Box?

The Icon Boxes Design Element is a new and exciting addition to ShortPoint's library of Design Elements, starting from ShortPoint SPFx version 8.6.0.0 or later. This versatile content containers let you showcase information in beautifully designed boxes that are both eye-catching and functional. 

What makes Icon Boxes truly special is its flexibility. You can easily customize the content inside each box to match your needs, whether you're highlighting company goals, key features, or displaying team information.

To top it off, you can add as many items as you want, creating engaging, organized layouts that help your content shine. 

Plus, you have complete control over the design, allowing you to adjust colors, styles, and layouts to complement your page's look and feel perfectly. 

Now, you can easily transform plain text into visually appealing, professional-looking content that your users will love to explore.

Interactive Tutorial

Start the interactive tutorial to learn how to customize the Icon Boxes Design Element:

NOTETo learn more about the features you can customize for Icon Boxes, check out Icon Boxes Features.

Step-by-step Tutorial

Follow the detailed guide below to start using Icon Boxes:

Step 1: Edit the ShortPoint Web Part

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

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Insert the Icon Boxes Design Element

• Choose where you want to add the Icon Boxes and click the plus icon:

• Use the search box to look for Icon Boxes and click it:

Step 3: Add content

• Go to the Items tab.
• Click Add New to add an Icon Box:

• Select the cogwheel icon:

• Customize the content according to your preferences.
• Click the back icon:

• Repeat the same steps if you need to add more items.

NOTEYou can also connect the Icon Boxes to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial. 

Step 4: Customize the Style

• Select the Icon Boxes style you want to use.

Step 5: Customize the Design

• Go to the Design tab.
• Customize the look of the Icon Boxes according to your preferences.
• Once satisfied, click the green check mark.

NOTETo learn more about the features you can customize for Icon Boxes, check out Icon Boxes Features.

Step 6: Save

• Click the eye icon to see your page in real-time:

• Save your changes:

That's it! You now know the basics of the Icon Boxes. Enjoy exploring this Design Element on your own SharePoint pages.

Icon Boxes Features

Below are the options you can find in the Icon Boxes Settings window 

A. Style Tab

The Style tab allows you to choose the style of the Icon Boxes. 

B. Items Tab

The Items tab allows you to add new items and organize the content inside the Icon Boxes. It has the following options:

	Add New	allows you to add a new item.
	Drag icon	allows you to rearrange the items.
	Duplicate icon	allows you to copy an item.
	Cogwheel icon	allows you to edit the content of an item. See the table below to see the options you can find inside.
	Trash icon	allows you to remove an item.

COGWHEEL ICON OPTIONS

	Icon	allows you to choose the icon to be shown.
	Enable Icon	when enabled, the icon will be displayed.
	Title	allows you to add a title.
	Description	allows you to add a description.
	Link Label	allows you to modify the link label. By default it is set to 'Learn More'.
	Link URL	allows you to add a clickable link.
	Linking Option	allows you to specify how the link will be opened. You can choose from the following: Same Window - opens the link in the same window. Lightbox - opens the link in a lightbox. New Window - opens the link in a new window. Dialog - opens the link in a dialog box.

C. Design Tab

The Design tab allows you to customize how the Icon Boxes will look. It has the following options:

COLOR

	Color	allows you to modify the primary color of the Icon Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Description Color	allows you to modify the description color of the Icon Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Link Color	allows you to modify the link color of the Icon Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Icon Color	allows you to modify the icon color of the Icon Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.

SETTINGS

Content Alignment

allows you to change the alignment of the content. You can choose from Left, Center, or Right.

CONTENT

	Title Size	allows you to modify the size of the title in px or em.
	Description Size	allows you to change the size of the description in px or em.
	Link Label	allows you to modify the link label. By default it is set to 'Learn More'.
	Link Size	allows you to modify the size of the link label in px or em.

BACKGROUND SETTINGS

	Background Color	allows you to modify the background color of the Icon Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Roundness	allows you to adjust the roundness of the Icon Boxes' corners.
	Enable Icon Background	when enabled, the icon background will be shown.
	Icon Background Color	allows you to modify the icon background color. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Icon Background Roundness	allows you to adjust the roundness value of the icon background.

D. Advanced Tab

The Advanced tab allows you to customize the margin values around the Icon Boxes Design Element. It has the following options:

	Margin Top	allows you to adjust the top margin value in px, %, or em.
	Margin Right	allows you to adjust the right margin value in px, %, or em.
	Margin Bottom	allows you to adjust the bottom margin value in px, %, or em.
	Margin Left	allows you to adjust the left margin value in px, %, or em.

E. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and JavaScript code to customize the Icon Boxes Design Element. 

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

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

Related articles:

• How to Customize the Abbreviation Design Element
• How to Customize the Lead Design Element
• How to Customize the Small Design Element
• How to Customize the Search Box Design Element
• How to Customize the Image Boxes Design Element