How to Add Content Boxes to SharePoint

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

TABLE OF CONTENTS

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

Prerequisites

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

What Is a Content Box?

The Content Boxes Design Element is one of the exciting new additions to ShortPoint's Design Elements library. If you're using ShortPoint SPFx version 8.6.2.0 or higher, you're going to love these handy content containers that make showcasing your text content a breeze. They're beautifully designed to catch the eye while keeping everything neat and easy to navigate.

With Content Boxes, the possibilities are endless. You can customize the content in each box to match exactly what you need.

Here's the fun part: there's no limit to how many Content Boxes you can add! This means you can create those eye-catching, well-organized layouts that make your content shine and keep your visitors engaged.

You can also play around with colors, try out different styles, and tweak the layouts until everything looks just right and fits perfectly with your page's overall look and feel.

Interactive Tutorial

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

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

Step-by-step Tutorial

Follow the detailed guide below to start using Content 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 Content Boxes Design Element

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

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

Step 3: Edit content

• Go to the Items tab.
• 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 Content Boxes to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial. 

Step 4: Customize the Design

• Go to the Design tab.
• Customize the look of the Content Boxes according to your preferences.
• Go to the Advanced tab.
• Modify the Content Boxes even further.
• Once satisfied, click the green check mark.

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

Step 5: Save

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

• Save your changes:

That's it! You now know how to customize the Content Boxes Design Element.

Content Boxes Features

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

A. Items Tab

The Items tab allows you to add new items and organize the content inside the Content 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

	Title	allows you to add a title to each Content Box.
	Description	allows you to add a description to each Content Box.
	Link Label	allows you to modify the text shown for the link.
	Link	allows you to add a clickable link.
	Linking Option	allows you to choose where the link will be opened.

B. Design Tab

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

	Style	allows you to choose the style of the Content Boxes.
	Color	allows you to modify the primary color of the Content Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Color Mode	allows you to choose from Light or Dark color mode.
	Apply Random Colors	when enabled, random colors will be applied for each Content Box.
	Content Alignment	allows you to adjust the alignment of the text inside.
	Items Per Row	allows you to specify the number of Content Boxes to be shown per row.

C. Advanced Tab

The Advanced tab allows you to further customize the Content Boxes. It has the following options:

SPACING

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

CONTENT

	Title Size	allows you to adjust the size of the title.
	Description Size	allows you to adjust the size of the description.
	Link Size	allows you to modify the link label for all Content Boxes.
	Link Size	allows you to adjust the size of the link.

COLOR

	Description Color	allows you to modify the color of the description. 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 color of the link. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.

BACKGROUND SETTINGS

	Background Color	allows you to modify the background color of the Content 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 value of the Content Boxes.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and JavaScript code to customize the Content 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 Icon Boxes Design Element