How to Customize the Content Boxes Design Element

NOTEThis Design Element is still in development and will be released soon.

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: Add content
  • Step 4: Customize the Style
  • Step 5: Customize the Design
  • Step 6: Save
• Content 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 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.0.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: Add content

• Go to the Items tab.
• Click Add New to add a Content 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 Content 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 Content Boxes style you want to use.

Step 5: Customize the Design

• Go to the Design tab.
• Customize the look of the Content Boxes according to your preferences.
• 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 6: 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. Style Tab

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

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

Clicking the cogwheel icon will bring you to a Content tab that allows you to modify the content of the Content Boxes. It has a Rich Text Editor that allows you to customize how your text will appear on your page. It has the following options:

	Bold	makes the format of the text Bold.
	Italic	makes the format of the text Italic.
	Underline	makes the format of the text Underline.
	Text Color	allows you to change the color of your text.
	More Text	opens additional options to use.
	Font Size	allows you to change the size of your text.
	Align	allows you to change the alignment of the text.
	List	allows you to create a list. It has to options: Unordered List and Ordered List.
	Background Color	allows you to add a background color to the text.
	Strikethrough	allows you to add a strikethrough to your text.
	All Caps	capitalizes the selected text.
	Small Caps	turns the selected text into small letters.
	Paragraph Format	allows you to specify the heading of the text.
	Paragraph Style	allows you to choose the style of the text. You can choose from Gray, Bordered, Spaced, or Uppercase.
	Clear Formatting	allows you to start from scratch and remove all the changes you've made.
	Font Family	allows you to change the font of your text. If you have any custom fonts previously added to the Theme Builder, check these articles on how to add custom fonts from Google Fonts, Fonts.com, Adobe Typekit, or manually. They will be displayed in the list of fonts.

MORE RICH

	More Rich	opens more options in the Rich Text Editor.
	Code View	shows the text in code view.
	Insert Table	allows you to add a table.
	Insert Video	allows you to add a video.
	Insert Image	allows you to add an image.

INLINE DESIGN ELEMENTS

	ShortPoint icon	opens the options for Inline Design Elements.
	Show Button	allows you to insert a button.
	Show Link	allows you to insert a link.
	Show Tooltip	allows you to insert a tooltip.
	Show Popover	allows you to insert a popover.
	Show Abbreviation	allows you to add an abbreviation.
	Show Dropcap	allows you to show dropcap
	Show Label	allows you to add a label.
	Show Emphasis	adds emphasis to the text.
	Show Icon	allows you to add an icon.
	Show Emoticon	allows you to add an emoticon.

NOTECheck out Introducing Inline Design Elements to learn more about Inline Design Elements.

C. Design Tab

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

	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.
	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. Advanced Tab

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

	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.

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