There are some design practices you can implement to make certain areas of your page looks more compact. One of which is by adding a content toggle. Divi Builder comes with a module called Toggle. However, the module cannot be used to add a content toggle. Instead, you can use the module to add content accordion. If you want to add content toggle to your Divi page, you can install Divi Supreme. It is a popular Divi plugin that comes with a bunch of modules, including the Content Toggle. Just like the name suggests, the module allows you to add content toggle to a Divi page. Read on to learn more.
As mentioned above, content toggle is a great idea to make a page looks more compact. You can use it to split two contents in the same area by providing a switcher (toggle). Two scenarios where content toggle a great fit are pricing table and before/after content. Take a look at the GIFs below.
How to Add Content Toggle in Divi
Divi Supreme is a great plugin if you want to add content toggle to a Divi page. It is one of the most popular Divi plugins. There are over 50 modules offered by the plugin in total, more than the native modules of Divi (outside WooCommerce modules). Divi Supreme is actually released as a freemium plugin, but you need to use the pro version to add content toggle as the module to do so is available on the pro version. You can get the pro version of Divi Supreme on Divi Marketplace. If you want to the free version first, you can get it on the plugin directory of WordPress.
Assuming you have installed Divi Supreme on your WordPress site, edit the page you want to add content toggle to using Divi. Once the Divi Builder editor opens, add a new module and select Content Toggle.
As you can see, the module will automatically add the content toggle element to your page. To add the content, you can open the Content One block and Content Two block under the Content tab on settings panel. You can add the content using the default editor or from a layout.
Adding the Content from Layout
Adding the content from a layout is a great option if you want to create a beautiful content as you can make use of the Divi Builder visual editor to create the content. For instance, you can create a beautiful pricing table as shown on the first GIF above.
Click either the Content One or Content Two block under the Content tab on the settings panel. On the Content Type dropdown, select Layout and then select a layout from the dropdown beneath it.
To create the layout itself, you can go to Divi -> Divi Library. Click the Add New button to add a new layout.
Give your layout a name on the Layout Name field. On the Layout Type field, select Layout. Click Submit to start creating the layout.
Select how you want to create the layout. If you want to create the layout from scratch, you can select the leftmost option (BUILD FROM SCRATCH). If you want to create the layout from a premade layout, you can select the middle option (CHOOSE A PREMADE LAYOUT).
Click Build On The Front End button to edit the layout using the visual editor of Divi Builder.
On the Divi Builder editor, you can create the layout you want to use on the toggle content. Once you are done editing the layout, click the Save button on the bottom-right corner to save the changes and Exit Visual Editor on the top bar to exit the Divi Builder editor.
Don’t forget to click the Update button to update the layout.
Repeat the steps above to create the content layout for second content.
Styling Up the Content Toggle
To style up the content toggle, you can go to the Design tab on the settings panel. You can open the Switcher to style up the toggle (switcher). You can set things like toggle size, toggle alignment, and background color.
To style up the headings, you can open the Heading One and Heading Two blocks. From these blocks, you can set the typography (font family, font size, font style, and so on) of the headings as well as the text color.
To style up the content, you can open the Content One and Content Two blocks. If you add the content from layout, opening these blocks is not necessary.
Once you are done editing your page, you can click the Save button on the bottom-right corner to save the changes followed by Exit Visual Editor on the top bar to exit Divi Builder editor.