With DonDivi Content Toggle, you can easily switch between two layouts or sets of custom content, each with its images, text, buttons, and optional animations. This is great for pricing toggles, feature comparisons, or any scenario where you want to swap content in one place.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
After installing, a new module called DonDivi Content Toggle will be available in the Divi Builder.
Overview
This module displays a switch that toggles between two sets of content. Each set can be a Divi Layout or fully customizable text, images, and buttons.
Add DonDivi Content Toggle
Click on the Add Module button.
Search for DonDivi Content Toggle.
Click on it to add it to your page.
DonDivi Toggle Settings
Content tab
Content One:
Label: The label for the first option (shown when the toggle is disabled).
Content: Choose which type of content you want to display:
Custom: It allows you to build the custom content, which includes:
Image/Icon: Choose if the Content should display an Icon or an Image. The default is None.
Title: Choose the Content One's title
Title Link URL: Allows you to create a link for the title of Content One.
Title Link Target: Choose the link behaviour:
In the Same Window: The link will open in the same window or tab.
In a New Window: The link will open in a new window or tab.
Body: Allows you to add your custom text for Content One's body.
Button: It allows you to define Content One's button text.
Button Link URL: Select the link for the button.
Button Link Target: Choose the link behaviour:
In the Same Window: The link will open in the same window or tab.
In a New Window: The link will open in a new window or tab.
Divi Layout: Choose a Divi Layout, saved in Divi → Divi Library.
Content two:
Label: The label for the second option (shown when the toggle is disabled).
Content: Choose which type of content you want to display:
Custom: It allows you to build the custom content, which includes:
Image/Icon: Choose if the Content should display an Icon or an Image. The default is None.
Title: Choose the Content Two's title
Title Link URL: Allows you to create a link for the title of Content Two.
Title Link Target: Choose the link behaviour:
In the Same Window: The link will open in the same window or tab.
In a New Window: The link will open in a new window or tab.
Body: Allows you to add your custom text for Content Two's body.
Button: This allows you to define the button text for Content Two.
Button Link URL: Select the link for the button.
Button Link Target: Choose the link behaviour:
In the Same Window: The link will open in the same window or tab.
In a New Window: The link will open in a new window or tab.
Divi Layout: Choose a Divi Layout, saved in Divi → Divi Library.
Important Note: Avoid layouts that contain another DonDivi Content Toggle to prevent style conflicts.
Design tab
Switcher: These responsive settings let you control the toggle switch itself:
Alignment: Position the switcher left, right, or center.
Height: Adjust the switch height; note that this also affects the width proportionally.
Background Color: Color when the switch is disabled.
Active Background Color: The color displayed when the switch is enabled.
Slider Background Color: The little slider knob's color.
Labels: These toggles style the text for both option labels. You can set the font, size, color, and other attributes.
Content One:
Content One Background Color: Choose the background color that is applied to the entire content area
Content One Rounded Corner: Select the border radius for each corner of the content area.
Content One Border Style: Choose the border style that is applied to the entire content in one area.
Content One Image & Icon: This option group is available if in the Content Tab → Content One → Content the Custom value is selected, and if either the Icon or Image options are selected.
Icon Color: Choose the Icon's color.
Image/Icon Width: Choose the Image or Icon's width.
Image/Icon Placement: Choose where the Image or the Icon is placed in the content area:
Top (default)
Left
Image/Icon Offset: Choose the space between the Image or Icon and the content's title.
Image/Icon Margin: Choose the outer space around the Image or Icon.
Image/Icon Padding: Choose the inner space around the Image or Icon.
Content One Title: Choose the content one's title text design. This includes the heading level, font, font weight, font style, alignment, color, size, and more.
Content One Body: Choose the content one's body text design. This includes the font, font weight, font style, alignment, color, size, and more.
Content One Button: Choose the content one's button design.
Content One Animation: You can animate each content area as it appears or disappears:
Enter Effect: Applies a DonDivi effect for content one when it becomes visible. The default is None (no effect). Available effects include Fade, Slide, Zoom, etc.
Exit Effect: Animate content one when toggled off (default is None). Similar effect choices. You can set:
Effect Intensity
Opacity (optional fade layer, not for fade effects)
Duration (milliseconds).
Content Two:
Content Two Background Color: Choose the background color that is applied to the entire content area
Content Two Rounded Corner: Select the border radius for each corner of the content area.
Content Two Border Style: Choose the border style that is applied to the entire content in one area.
Content Two Image & Icon: This option group is available if in the Content Tab → Content Two → Content the Custom value is selected, and if either the Icon or Image options are selected.
Icon Color: Choose the Icon's color.
Image/Icon Width: Choose the Image or Icon's width.
Image/Icon Placement: Choose where the Image or the Icon is placed in the content area:
Top (default)
Left
Image/Icon Offset: Choose the space between the Image or Icon and the content's title.
Image/Icon Margin: Choose the outer space around the Image or Icon.
Image/Icon Padding: Choose the inner space around the Image or Icon.
Content Two Title: Choose the design of the title text for content two. This includes the heading level, font, font weight, font style, alignment, color, size, and more.
Content Two Body: Choose the design of the body text of content two. This includes the font, font weight, font style, alignment, color, size, and more.
Content Two Button: Select the button design for the content.
Content Two Animation: You can animate each content area as it appears or disappears:
Enter Effect: Applies a DonDivi effect for content one when it becomes visible. The default is None (no effect). Available effects include Fade, Slide, Zoom, etc.
Exit Effect: Animate content one when toggled off (default is None). Similar effect choices. You can set:
Effect Intensity
Opacity (optional fade layer, not for fade effects)
Duration (milliseconds).
Text: Choose the module's text alignment and text shadow design options.
Sizing: You can choose the size of the DonDivi Content Toggle module, including width, max width, module alignment, and more.
Spacing: You can adjust the spacing of the DonDivi Content Toggle module, including outer margin (spacing) and inner padding (spacing).
Border: Add custom borders or rounded corners to the Content Toggle module.
Box Shadow: Apply shadow effects to highlight the Content Toggle module.
Filters: Select the filters for the DonDivi Content Toggle module.
Transform: Select the transform styles for the DonDivi Content Toggle module.
Animation: Select the animation for the DonDivi Content Toggle module.