Smart Toolbar: How to Use the Tabs Widget : ShortPoint Support

NOTEThis feature will be released soon.

This article will demonstrate how to add the Tabs widget to a Design Element:

tabs widget

NOTEYou can only add the Tabs widget to the following Design Elements: Image List, Date List, File List, Icon List, Events, Image Titles, Simple List, Tiles, or Image Caption.

TABLE OF CONTENTS

Prerequisites
Interactive Tutorial
Step-by-step Tutorial
Tabs Widget Features

Prerequisites

You must have ShortPoint version 8.4.0.0 and above installed on your SharePoint environment.
You must be a ShortPoint Designer with an active license.
You must already have any of these Design Elements on your page: Image List, Date List, File List, Icon List, Events, Image Titles, Simple List, Tiles, or Image Caption.

Interactive Tutorial

Click Get Started to learn how to use the Tabs widget:

NOTEYou can activate more than one widget. Check out How to Activate Multiple Smart Toolbar Widgets to learn how.

Step-by-step Tutorial

Follow the detailed guide below to learn how to add the Tabs widget:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Edit

Click the close icon to close the Toolbox:

cross icon

Click the ShortPoint tag.
Select the Edit properties icon:

Edit properties icon

Step 2: Edit the Design Element

NOTEYou must already have any of these Design Elements on your page: Image List, Date List, File List, Icon List, Events, Image Titles, Simple List, Tiles, or Image Caption.

Click the Easypass tag of the Design Element you want to use. For this guide, we will use the Image List Design Element:

Easypass tag

Select the cogwheel icon:

Cogwheel icon

Navigate to the Toolbar tab:

Toolbar tab

Click the Tabs widget:

Tabs widget

Choose the Design Element property (Title, Subtitle, Description, etc.) you want to be shown as Tabs.

NOTEThe Design Element properties you see depend on the Design Element you are using.

design element properties

Customize the look of the Tabs widget according to your liking:

customize the look

Click Activate:

Activate

NOTEYou can further customize the look of the Tabs widget using the Settings button of the Smart Toolbar. Follow the optional steps below to learn how.

(Optional) Click Back to Widgets:

back to widgets

(Optional) Click Settings:

Settings

(Optional) Customize the Background, Widget Size, and/or Text Color of the active widgets.

Settings

Click the green check mark to apply all changes.

NOTEYou can activate more than one widget. Check out How to Activate Multiple Smart Toolbar Widgets to learn how.

Step 5: Save

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

eye icon

Click Save to keep your changes:

Save

That’s it! You have successfully added the Tabs widget to your selected Design Element. You can check the next section to see all the modifiable features available for Tabs.

NOTEIf you want to remove the Tabs widget, simply click the Tabs widget again, select Deactivate, and click the green check mark to apply the changes. You can also check out How to Deactive Active Smart Toolbar Widgets for more details.

deactivate tabs widget

Below are the features you can customize for the Tabs widget:

	Show Tabs from	allows you to choose the Design Element Property (Title, Subtitle, Description, etc.) you want to be shown as Tabs.
	Style	allows you to customize the style of the Tabs.
	Location	allows you to choose where the Tabs will be located—left or center.
	Spacing	allows you to adjust the spacing between tabs.
	Enable advanced settings	when enabled, additional options will appear.
	Theme color	allows you to specify the color of the Tabs.
	Text color	allows you to customize the color of the text inside the Tabs.