Settings

These fields will allow you to style the switcher, as well as add and customize the content for the two options that this toggle offers.

If you choose the content to be custom, you can use these fields to customize the content and the style.

Content Tab > Content One > Label

Enter the label for the option that displays the content when the toggle is disabled.

Content Tab > Content One > Content

You can display either custom content or a Divi Layout from your Divi Library.

If you select the Divi Layout option, a new select field will appear with the available Divi layouts.

Disclaimer: Divi messes up the styles when injecting a module inside the same module, as explained here. For this reason, we recommend that you don’t select a layout that includes a DonDivi Content Toggle module.

Content Tab > Content Two > Label

Enter the label for the option that displays the content when the toggle is enabled.

Content Tab > Content Two > Content

Same as content one, you can choose the second content to be either custom content or a Divi layout

Design Tab > Switcher

These responsive fields are self-explanatory and allow you to control the switcher (toggle control) alignment and height (so you can change the switcher size), as well as set the background color when is disabled, the background color when is enabled (active background color) and the slider background color.

Design Tab > Labels

These toggle fields will allow you to style both labels (first option label and second option label).

Design Tab > Content One

These toggle fields will allow you to style the background color, the border, margin and padding of the content that is displayed when the switcher is disabled (content one).

Advanced Tab > Custom CSS > Content One

The additional CSS that you add here will be applied to the content one. 

Design Tab > Content Two

These toggle fields will allow you to style the background color, the border, margin and padding of the content that is displayed when the switcher is enabled (content two).

Advanced Tab > Custom CSS > Content Two

The additional CSS that you add here will be applied to the content two.

Custom Content

These fields are available if you choose the Custom option for displaying the content.

Let’s cover only in the documentation the fields to add and customize the content one. We will also offer the same fields for the content two in order to add and customize custom for the second option.

Content Tab >  Content One > Image/Icon

You can choose here whether an image or icon should be displayed in your content.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Content One Image & Icon will appear in the Design tab (which we will document later).

Content Tab > Content One > Title

This field, that comes with responsive options too, will allow you to display a title to your content.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Content One > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when it comes to tooltips.

You can even choose which devices should display the body!

Content Tab > Content One > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Content One Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Content One Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and 100% in case you are displaying an image.

Design Tab > Content One Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Content One Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Content One Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Design Tab > Content One Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Content One Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Content One Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of your content.

Advanced Tab > Custom CSS > Content One Image/Icon

Need further customization for the image (or icon)? Enter your custom CSS here.

Advanced Tab > Custom CSS > Content One Title

Here you can enter additional CSS for the title.

Advanced Tab > Custom CSS > Content One Body

Finally, you can enter additional CSS for the body as well.

Animation

You will be able to add transition animations to the content one and the content two.

In order to add a transition animation, we offer the DonDivi custom effects in this module.

We will cover the content one animation fields only. A toggle called Content Two Animation is available to animate the content two the same way.

These field will be available if you selected the Tooltip option , the Content Popup option or the Layout Popup option in the Link Type select field.

Content One Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the content one when it appears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, the content that is appearing is a Divi layout and you have set a Divi animation in the Divi layout, then the Divi animation will run.

However, if you select a DonDivi effect, no Divi animation (if any) will run and the selected effect will be applied instead.

These are the available enter effects:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Content One Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Content One Animation > Exit Effect

You can choose an exit effect here. In other words, you will be able to animate the content when it disappears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, no animation will run at all.

These are the available exit effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Content One Animation > Exit Effect Animation Intensity

Here you can choose how subtle or aggressive your exit effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Content One Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Content One Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.