1. Home
  2. Docs
  3. Content Elements
  4. Toggle

Toggle EA Element

The Toggle Element lets you create text boxes that are collapsed, so the visitor only sees the titles of each text box item. This lets you show your content in a condensed form, so visitors don’t have to scroll through a long page and can sift through the titles easily. Here in this tutorial, you’re going to learn how to use the Toggle element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Toggle Element

 

»Content

 

Primary

⇒Label: Input the text for the header of the primary label text which means this text will appear on the left side/initial button of the toggle.

⇒Content-Type: Set the content type from here. You can select content type as image and upload an image or just simply select content to bring some content under the label. You can also use the saved templates.

⇒Content: Add the info text under the toggle tab. The primary section is for the first toggle content.

 

Secondary

⇒Label: Input the text for the header of the secondary label text which means this text will appear on the right-side button of the toggle.

⇒Content-Type: Set the content type for the secondary toggle button. You can select content type as image and upload an image or just simply select content to bring some content under the label. You can also use the saved templates.

⇒Content: Add the info text under the toggle tab. The secondary section is for the second toggle content.

 


»Style

 

Switch

⇒Alignment: Set the toggle alignment either left, center or right.

⇒Switch Style: Select the switch style either round or rectangle.

⇒Switch Size: Customize the toggle switch size manually for different dimensions.

⇒Heading Spacing: Set the headings spacing for different dimensions.

⇒Margin Bottom: Set the bottom margin value of the toggle switch for different dimensions.

⇒Background Type: Set the background type either Classic or Gradient for both Primary & Secondary background of the toggle switch. And then customize the style according to your preference.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the toggle switch for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both primary and secondary toggle.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the toggle switch for different dimensions.

 

Label

⇒Position: Set the position of the toggle label either the top, middle or bottom.

⇒Text Color: Add a custom text color to the label for both primary and secondary label of the toggle.

⇒Active Text Color: Add a custom color to the active toggle label both for primary and secondary.

⇒Typography: Set the typography options for the labels.

 

Content Style

⇒Alignment: Set the alignment of the content either left, center or right.

⇒Text Color: Add a custom color to the text of the content in the toggle.

⇒Typography: Set the typography options for the content.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Toggle Element.


Was this article helpful to you? Yes No

How can we help?