How to Customize the Tabs Design Element

This article will walk you through customizing the Tabs Design Element and its basic features.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Tabs Design Element
  • Step 3: Customize the Tabs’ design
  • Step 4: Edit the items in the Tabs
  • Step 5: Add content inside tabs
  • Step 6: Save
• Tabs Features
  • A. Items tab
  • B. Design tab
  • C. Advanced Tab
  • D. Custom CSS Tab

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 Tabs Design Element:

NOTECheck out Tabs 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 Tabs Design Element:

Step 1: Edit the ShortPoint Web Part

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

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2:Insert the Tabs Design Element

• Click the plus icon.
• Use the search box to look for Tabs and click it.

Step 3: Customize the Tabs’ design

• Navigate to the Design tab.
• Customize the Tabs according to your preference.

NOTECheck out Tabs Features to learn more about the OOTB options you can customize.

Step 4: Edit the items in the Tabs

• Navigate to the Items tab.
• Click the cogwheel icon of the first item.

• Add a Title.
• Delete default tab content.

NOTEYou can opt to add your own content in the Tab Content field if you only want to have text inside your Tabs. However, if you want to insert a separate Design Element, you need to delete the default content and follow the next steps.

• Click the back icon to edit the other items.

• Repeat the steps above.
• (Optional) If you want to add other items, click Add New. Then, repeat the same steps above to edit the content of the new item.

• Click the green check mark once you are satisfied with your edits.

NOTEYou can also create dynamic Tabs content. Check out ShortPoint Connect: Basic Tutorial.

Step 5: Add content inside tabs

• Click the Tabs tag.

• Select the tab where you want to add content.

• Click the plus icon inside the tab.

• Use the search bar to look for the Design Element you want to use and click it.
• Customize the selected Design Element according to your preference.

Step 6: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Tabs Features

Below are the options you can find in the Tabs 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 ACTION ICONS

	Cogwheel	opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
	Duplicate	duplicates the item selected.
	Trash	deletes the item selected.
	Add New	adds a new item.
	Drag and Drop	allows you to re-arrange the position of the item.

COGWHEEL ICON SETTINGS

	Title	add item title.
	Tab Content	allows you to add text content inside each tab.
	Icon	allows you to add an icon.

B. Design tab

The Design tab allows you to customize the design of the Tabs Design Element. It has the following options:

	Style	allows you to customize the style of the Tabs Design Element.
	Height	allows you to modify the height of the tabs.
	Theme Color	allows you to choose the color of the tabs. The default theme color is your site’s primary color.
	Make Tabs Responsive	when enabled, the tabs will fit its container.
	Horizontal Alignment	allows you to choose the text alignment of the tab’s title. You can choose from Left, Right, or Center.
	Tabs Location	allows you to choose the location of the tab. You can choose from Top, Bottom, Right, or Left. By default, the tabs will be placed at the top.

C. Advanced Tab

The Advanced tab allows you to further modify other aspects of the Tabs Design Element.

SETTINGS

	Active Tab Number	allows you to assign the tab number you want to be active by default.
	Preserve Active Tab	when enabled, the active tab will remain open even after refreshing the page.

GENERAL SETTINGS

	Text Size	allows you to modify the size of the text.
	Icon Size	allows you to modify the size of the icon.
	Icon location	allows you to modify the placement of the icon. By default, the icon will be on the left of the tab text.

ACTIVE TAB

	Icon Color	allows you to modify the icon color of the active tab.
	Text Color	allows you to modify the text color of the active tab.

INACTIVE TAB

	Theme Color	allows you to modify the color of inactive tabs.
	Text Color	allows you to modify the text color of inactive tabs.
	Color	allows you to modify the icon color of inactive tabs.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Tabs 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 Visibility and Connect tabs are currently unavailable in Live Mode.

That’s it! You now know how to customize the Tabs Design Element. Try using these amazing features on your pages.

Related articles:

• How to Customize the Accordions Design Element
• How to Customize the Panel Design Element in Live Mode
• How to Customize the Button Design Element in Live Mode
• How to Customize the Tiles Design Element in Live Mode