Get started quickly
Our Content Toggle module plugin can help you to create content toggle switches simply and quickly.
- To get started quickly, please refer to the main tutorial:
Toggle Switch Style Setting cases
- Our Plugin supports two kind of content to switch:
- Content Text
For usage of Content Text in module, please refer:
- Layouts
Before usage of the layout switching module, you’d better create your layout from Divi Row and then save the layouts to use in the module.
For width of layouts to display normally,
Suggest setting the Row Width to 100%.
Please refer to the tutorial:
The other way of getting layout is that you can Import and edit the Demo layout we support. For the usage, please refer to the tutorial:
How-to-import-use-demo-layouts
For usage of Layout in module, please refer:
How to Install
Download zip file
Before installing the Content Toggle Plugin on your website, you need download the menx-content-toggle.zip file from elegantthemes.com.
Install and active plugin
Go to WordPress Dashboard >> Plugins >> click Add New Plugin
Then click Upload Plugin >> Choose File browse the menx-content-toggle.zip file and select it >> install now
After the plugin is installed, click Activate Plugin.
Once the plugin is activated, the Menx Content Toggle module will be shown in the Divi Builder with other Divi modules.
How to use plugin
Enable Visual Builder
Click on Enable Visual Builder to edit the content toggle in visual view.
Add New Module
Click Add New Module to add module.
Search “content toggle” in Insert Module and click Menx Content Toggle module to add the new module.
Edit Module
Click Module Settings to edit the module.
Click Content to edit toggle content.
Click Design to edit toggle style.
How to edit toggle Switch
Toggle Left Title
Go to Content >> Content Toggle Left in Module Settings, input your toggle title in Toggle Left Title.
Toggle Right Title
Go to Content >> Content Toggle Right in Module Settings, input your toggle title in Toggle Right Title.
Toggle Title Fonts
Go to Design >> Toggle Title Text in Module Settings, then edit the font style.
Toggle Title Margin
Go to Design >> Toggle Title Margin in Module Settings, then edit the margin of the toggle left and the margin of the toggle right.
Set toggle switch style
Go to Design >> Toggle Switch Style in Module Settings, then edit the Switch Alignment, Switcher Size, Toggle Switch padding.
Edit border radius and style
Edit box shadow
Set toggle switch background color
Go to Design >> Toggle Switch Style in Module Settings.
1. Switch Left Background color:
Go to Switch Left Background >> Color >> Add Background Color
2. Switch Left Background color: gradient
Go to Switch Left Background >> Gradient >> Add Background Gradient
3. Switch Right Background color
Go to Switch Right Background >> Color >> Add Background Color
Click Toggle Button twice to switch to right side to see the Switch Right Background color.
4. Switch Right Background color: gradient
Go to Switch Right Background >> Gradient >> Add Background Gradient
Click Toggle Button twice to switch to right side to see the Switch Right Background gradient color.
Go to Design >> Toggle Switch Round Button Style in Module Settings, then edit border radius, border style.
Edit Switch Round Button box-shadow
Go to Design >> Toggle Switch Round Button Style in Module Settings.
1. Background color
Go to Switch Round Button Background >> Color >> Add Background Color
2. Background Gradient
Go to Switch Round Button Background >> Gradient >> Add Background Gradient
How to edit content
Content Left Text
Go to Content >> Content Toggle Left in Module Settings.
Select Text in Content Left Type, then input content text in text area.
Content Left Fonts
Go to Design >> Content Left Text in Module Settings, set the font style and color.
Content Right Text
Click Toggle Switch twice to right side.
Go to Content >> Content Toggle Right in Module Settings.
Select Text in Content Right Type, then input content text in text area.
Content Right Fonts
Click Toggle Switch twice to right side.
Go to Design >> Content Right Text in Module Settings, set the font style and color.
Create your Layout
There are two ways to create your layouts:
- Import and edit the Demo layout we support: for the usage, please refer the tutorial: How-to-import-use-demo-layouts
- Create the layouts from Divi Row yourself, suggest setting the Row Width: 100% Then save the layouts and use in the module.
Content Left Layout
Before usage of the layout switching module, you’d better create your layout from Divi Row and then save the layouts to use in the module.
For width of layouts to display normally,
Suggest setting the Row Width to 100%.
Please refer to the tutorial:
The other way of getting layout is that you can Import and edit the Demo layout we support. For the usage, please refer to the tutorial:
Content Left Layout Settings
Go to Content >> Content Toggle Left in Module Settings, select Divi Library Layout in Content Left Type. Click Select Divi Layout in Select Layout, then browse layouts in your Divi library and choose which you want to show.
After Selection, the layout style will not appear completely in Visual Builder.
However, it will be visible once saved and applied to the front end.
Content Right Layout
Before usage of the layout switching module, you’d better create your layout from Divi Row and then save the layouts to use in the module.
For width of layouts to display normally,
Suggest setting the Row Width to 100%.
Please refer to the tutorial:
The other way of getting layout is that you can Import and edit the Demo layout we support. For the usage, please refer to the tutorial:
Content Right Layout Settings
Click Toggle Switch twice to right side.
Go to Content >> Content Toggle Right in Module Settings, select Divi Library Layout in Content Right Type. Click Select Divi Layout in Select Layout, then browse layouts in your Divi library and choose which you want to show.
After Selection, the layout style will not appear completely in Visual Builder.
However, it will be visible once saved and applied to the front end.
Set Content Left style
Go to Design >> Content Left Style in Module Settings, then edit padding, margin, background color, border, box-shadow
Set Content Right style
Click Toggle Switch twice to right side.
Go to Design >> Content Right Style in Module Settings, then edit padding, margin, background color, border, box-shadow
Toggle Switch Style Setting cases
Case 1
Case Demo
You can click the toggle switch:
month
year
Our Divi Content Toggle module can help you to create content toggle switches simply and quickly. You can design a powerful switcher to switch your own content text or layout by using the powerful features and flexible settings in our module.
Our Divi content toggle module has the superpower to design a variety of fully customizable toggle switches in your pages, bringing new and fresh displays.
How to set Toggle Switch?
1. Click Module Settings
2. Set Toggle Left color
3. Set Toggle Right color
Case 2
Case Demo
You can click the toggle switch:
month
year
Our Divi Content Toggle module can help you to create content toggle switches simply and quickly. You can design a powerful switcher to switch your own content text or layout by using the powerful features and flexible settings in our module.
Our Divi content toggle module has the superpower to design a variety of fully customizable toggle switches in your pages, bringing new and fresh displays.
How to set Toggle Switch?
1. Click Module Settings
2. Set Toggle Left color gradient
3. Set Toggle Right color gradient
4. Set Toggle Switch Round Button Style
Case 3
Case Demo
You can click the toggle switch:
month
year
Our Divi Content Toggle module can help you to create content toggle switches simply and quickly. You can design a powerful switcher to switch your own content text or layout by using the powerful features and flexible settings in our module.
Our Divi content toggle module has the superpower to design a variety of fully customizable toggle switches in your pages, bringing new and fresh displays.
How to set Toggle Switch?
1. Click Module Settings
2. Set Toggle Left color and border
3. Set Toggle Switch Round Button color and box-shadow
4. Set Toggle Right color and border
5. Set Toggle Switch Box-shadow
Case 4
Case Demo
You can click the toggle switch:
month
year
Our Divi Content Toggle module can help you to create content toggle switches simply and quickly. You can design a powerful switcher to switch your own content text or layout by using the powerful features and flexible settings in our module.
Our Divi content toggle module has the superpower to design a variety of fully customizable toggle switches in your pages, bringing new and fresh displays.
How to set Toggle Switch?
1. Click Module Settings
2. Set Toggle Left color and round corners
3. Set Toggle Right color
4. Set Toggle Switch shadow
5. Set Toggle Switch Round Button shadow
Case 5
Case Demo
You can click the toggle switch:
month
year
Our Divi Content Toggle module can help you to create content toggle switches simply and quickly. You can design a powerful switcher to switch your own content text or layout by using the powerful features and flexible settings in our module.
Our Divi content toggle module has the superpower to design a variety of fully customizable toggle switches in your pages, bringing new and fresh displays.
How to set Toggle Switch?
1. Click Module Settings
2. Set Toggle Round Button color, border and round corners
3. Set Toggle Switch border and round corners
4. Set Toggle Left background color
5. Set Toggle Right background color
Case 6
Case Demo
You can click the toggle switch:
month
year
Our Divi Content Toggle module can help you to create content toggle switches simply and quickly. You can design a powerful switcher to switch your own content text or layout by using the powerful features and flexible settings in our module.
Our Divi content toggle module has the superpower to design a variety of fully customizable toggle switches in your pages, bringing new and fresh displays.
How to set Toggle Switch?
1. Click Module Settings
2. Set Toggle Left background color
3. Set Toggle Switch Border and Shadow
4. Set Toggle Round Button Shadow
5. Set Toggle Right Background gradient
