Today we want to focus on a little useful design element we have used for the first time in our last post. We are talking about a simple Divi Toggle module that will serve us as toggle tip element for suggesting the user possible issues or ideas.

Our final result, thus, will be the following.

How we can get this? It’s easier than you think, simply with the magic of Css!

So, let’s get started!

THE LAYOUT

 

First of all let’s create a new toggle module inside a section. Then simply style and customize the module as you want.

 

In our case we set a light green background for toggle when it is closed, then we styled the title text and the icon with white color. Then we have saved the module as Global module and, thus, we made unsynchronized the module Title and the Content. Finally, we chose a foldLeft simple animation.

THE MAGIC OF CSS

First we have to set our Row Css Class.
Go into Row Settings -> Advanced -> CSS ID & Classes and add the Class: “toggleTips” (or whatever you want).

Then we have to add some Css directly in the Module Options.
So, let’s go to the Module Settings -> Advanced -> Custom Css and add some code in Main Element, Open Toggle, Toggle Title and Toggle Content respectively.

 

Finally we go into Divi Theme Options -> General -> Custom Css and add the following code.

 

FINAL THOUGHTS

So, is very very easy to get the result and the effect can be very nice in some situations. It capture the user eye and is also a useful element that can help the user without overwhelm too much the entire layout design.

See you next post.

Cheers!