How can we help you today?

How to Customize the Toggles Design Element

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



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



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

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

Step 3: Edit the items in the Toggles

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


cogwheel icon


  • Add a Title.
  • Add Content.
  • Click the back icon to edit the other items.


back icon


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


Add new


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

Step 4: Customize the Toggles’ design

  • Navigate to the Design tab.
  • Customize the Toggles according to your preference.
  • Click the green check mark.


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

Step 5 (Optional): Add Design Element inside Toggles

  • Click the Toggles tag.

Toggles tag


  • Select the item where you want to add content.


select item


  • Click the plus icon inside the item.


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.
  • Once done, click the green check mark.

Step 6: Save

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


Save

  • Click Save to apply all your changes.


Save


Toggles Features

Below are the options you can find in the Toggles 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 New
adds a new item.
Drag and dropDrag and Dropallows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS

TitleTitle
add item title.
ContentContentallows you to add text content inside each toggle.

B. Design tab

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


Design tab


SETTINGS

Title colorTitle Color
allows you to choose the font color of the Title. You can do so by [1] writing the HEX code, [2] using the drop-down, or [3] using the color picker.
Title hover colorTitle Hover Colorallows you to choose the font color of the Title when a user hovers over it. You can do so by [1] writing the HEX code, [2] using the drop-down, or [3] using the color picker.
Title text sizeTitle text sizeallows you to set the size of the Toggle Title & icon in pixels, em, or rem ( e.g: 15px, 2em, or 3rem).
Hide dividerHide divider
when enabled, the divider will be hidden.


ICON

Close iconClose icon
allows you to choose the icon to display when the toggle is closed.
Open iconOpen icon
allows you to choose the icon to display when the toggle is open.
Icon LocationIcon Locationallows you to choose the location of the icon. You can choose from Left or Right.


NOTECheck out our Icons page to see all the icons you can add to your SharePoint page.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Toggles 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 Toggles 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