The content toggle module for Divi lets you switch between two different content, templates, or pages within the same section. This module has a large number of features to show your content artistically.
Let’s learn about all of the features in detail.
Content Tab
Toggle Content
Primary and Secondary Label: Add a label for the primary and secondary toggle switcher. You can keep it blank if you don’t want to use any labels.
Content-Type: From the dropdown of the content type, you can select any one from the list of 4.
- Content: By selecting content, you will see two content boxes where you can add content.
- Shortcode: The Shortcode feature will allow you to place shortcodes into the toggle content. Here is a usage guide on Divi Shortcodes.
- Library: Use library items as toggle content. Selecting Library as a content type will show a list of library items inside the visual builder.
- HTML Class: This will generate two unique classes for the two sides of your toggle. You can copy this class and add it to the CSS class option inside the Advanced option to any section, row, or module within the page.
Toggle control
Toggle Type: Select one of 4 different types of toggles. Also, you can choose a button instead of toggles.
Toggle Size: Adjust the toggle size as you need it.
Primary & Secondary Label Icon: Choose an icon for the primary & secondary labels and change its color, size, and alignment. Also, you can hide the icon on mobile devices.
Active Icon Color: Change the active icon color.
Badges
Primary Badge
Add a badge with text and position it anywhere on the primary toggle switch. Plus, you can change the badge’s arrow size, position, and placement.
Secondary Badge
You can do the same as you did for the primary badge.
Content animation
Apply one of the eight different content animations and control their duration. By default, this is ON; you can turn it off.
Design tab
Toggle bar
Change the toggle bar alignment, width, background, border style & color with a radius and box-shadow effect. Additionally, turning on the Label Distance option will allow you to adjust the distance between the label and the toggle.
Primary Label
Change the primary label’s font, weight, style, text color, size, letter spacing, line height, and shadow effect.
NOTE: This will only apply if you are using the Primary Label text.
Secondary Label
The Secondary Label has all the features available in the Primary Label and does the same.
NOTE: This will only apply if you are using the Secondary Label text.
Active Label
All the features that come with the Primary Label are also available with the Active Label. But, this option applies to the active one, and it will switch based on a click.
NOTE: The next two features are only available if you use round or square as a toggle type. The button doesn’t have these two features.
Primary Toggle Switch
Change the toggle switch’s color and background.
Secondary Toggle Switch
Change the toggle switch’s color and background.
NOTE: The next Primary, Secondary, and Active Button feature only work when you select the button as the toggle type under the content tab.
Primary Button
The Primary Button lets you change the font, weight, style, text color, size, shadow, and line height of the primary button. Also, you can add a radius and box-shadow effect with a stylish border.
Secondary Button
You can do the same for the Secondary Button as for the Primary Button.
Active Button
The Active Button offers the same features as the Primary Button, but all these features will style the Active Button.
NOTE: The next 3 Toggle Content options will only work if you select “Content” as the content type for the Toggle Content option.
Toggle Content
Add a stylish background and border with radius and shadow effects on your toggle content.
Toggle Content Text
Change the font, weight, style, alignment, color, size, letter spacing, line height, and shadow effect for the toggle body text. Also, if you use any links, ordering, numbering, or quotes in the text, you can do the same for them.
Toggle Content Heading
All the features in Toggle Content Text are also found in Toggle Content Heading, but they only customize the headlines.
Primary Badge
Add a background and arrow color for the primary badge. Plus, change the badge font, style, weight, text alignment, color, size, letter spacing, and line height with text-shadow effects. Place a textured border with radius and box-shadow effects to the finish.
Secondary Badge
The secondary badge offers the same features as the primary badge.
Custom spacing
Give margin padding around the toggle bar and margin around the entire toggle. Similarly, add padding around the primary & secondary label icons, badges, toggle content, and buttons.
Advanced Tab
Divi default features from the advanced tab are described in the General Doc.
