How can we help you today?

How to Customize the Tabs Design Element

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


Tabs


TABLE OF CONTENTS


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.


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.


cogwheel icon


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

tab content
  • Click the back icon to edit the other items.


back icon


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


Add New


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


Tabs tag


  • Select the tab where you want to add content.


select tab


  • Click the plus icon inside the tab.


plus icon


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


eye icon


  • Click Save to apply all your changes.


Save


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 tab


ITEMS ACTION ICONS

cogwheel iconCogwheelopens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
Duplicate iconDuplicateduplicates the item selected.
Trash iconTrashdeletes the item selected.
Add NewAdd Newadds a new item.
Drag and dropDrag and Dropallows you to re-arrange the position of the item.



COGWHEEL ICON SETTINGS

TitleTitle
add item title.
tab contentTab Contentallows you to add text content inside each tab.
IconIconallows 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:


Design tab


StyleStyle allows you to customize the style of the Tabs Design Element.
HeightHeight allows you to modify the height of the tabs.
Theme colorTheme Color
allows you to choose the color of the tabs. The default theme color is your site’s primary color.
Make tabs responsiveMake Tabs Responsive
when enabled, the tabs will fit its container.
Horizontal alignmentHorizontal Alignment 
allows you to choose the text alignment of the tab’s title. You can choose from Left, Right, or Center.
Tabs locationTabs Locationallows 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.


Advanced tab


SETTINGS

Active Tab NumberActive Tab Numberallows you to assign the tab number you want to be active by default.

Preserve Active Tab
Preserve Active Tab
when enabled, the active tab will remain open even after refreshing the page.


GENERAL SETTINGS

Text SizeText Size
allows you to modify the size of the text.
Icon SizeIcon Sizeallows you to modify the size of the icon.

Icon location
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 colorIcon Color
allows you to modify the icon color of the active tab.
Text ColorText Color
allows you to modify the text color of the active tab.


INACTIVE TAB

Theme colorTheme Colorallows you to modify the color of inactive tabs.

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

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

Custom CSS tab


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:
















Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 60 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more