Q16: Two Line Toggles and Buttons in Divi

Last week I was helping out a member of my Facebook Group with creating two lines of text in the Toggle module.

As you may know, the title fields of the Divi modules don’t support HTML, therefore getting two lines of text is close to impossible without JavaScript. But there is a way around this using the :before and :after pseudo elements, and as we have those fields in the advanced tab of the modules, it’s still relatively simple for clients to edit without breaking anything

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Cooking time

Literally 5 minutes!

Preparation

For your prep, just add a Toggle and/or Button module and style them how you would like them to look using the Design tab settings. In the Toggle Title add the text you want to appear on the second line. For the Button, I will explain the different scenarios in the Method below.

We are going to be using the :before pseudo element to add our additional line of text for the Toggle module. The reason for this is, if we use the :after element on the Toggle module, it will look fine when the Toggle is closed, but once open, the second line will display below the module’s content, which we don’t want.

With the Button Module, its slightly different.  The Button module gives the option to add an icon to be displayed either to the Left or Right of the text, so the pseudo element we use depends on: a) if we are using the icon at all, and b) if we are using the icon, where we have placed it.

Method

Now, let’s start with the Toggle.

In the :before field in the Advanced tab of your Toggle, add the following CSS:

content: 'Add your first line of text here';

That is basically all you need to get 2 lines of text for the Toggle. You will of course want to style this text to match the settings you have in the module for the Title, so you may want to add some of these properties for example:

font-size: 16px;
text-transform: uppercase; 
color: #000; 
font-family: "Open Sans", Arial, sans-serif;

Now for the Button module. We need slightly more CSS here:

content: 'Add your text here';
position: relative;
display: block;
opacity: 1;
margin: 0;

This is the minimum you will need for the Button module. As I mentioned earlier, the Button module uses the :before and :after pseudo elements to display the icon you can set in the Design options. And the default Divi styling has these properties set so that those icons are invisible until you hover, and positioned in such a way that they appear next to the Button text, so we need reverse those settings and that’s what the above CSS does.

Your new text should take on most of the styling you have applied to your button, but you may need to set a font size and possibly some top padding depending on the line-height you are using:

font-size: 20px;
padding-top: 5px;

So, where to place this CSS in the Button module? That depends on if you are using an icon or not. Here is where to place your CSS and text depending on your set up:

Not using an icon:

CSS Position = :before field
Text Position = First line in the :before field, second line in the Button Text field

Using an icon placed to the right:

CSS Position = :before field
Text Position = First line in the :before field, second line in the Button Text field

Using an icon placed to the left:

CSS Position = :after field
Text Position = First line in the Button Text field, second line in the :after field

If you are using an icon placed to the left, and therefore the :after field to place your additional line of text, you may need to adjust your CSS to this:

content: 'Add your second line of text here' !important;
position: relative;
display: block !important;
opacity: 1;
margin: 0;
font-family: "Open Sans", Arial, sans-serif;

Here we add a couple of !importants to override Divi’s use of them , and we also set a font-family to prevent Divi using the ETModules icon font. You could avoid the use of !important by giving your Button module a custom class or ID but that is beyond the scope of this post

Again you may want to add in some bottom padding and you will likely need to set the font size:

font-size: 20px;
padding-bottom: 5px;

And that’s it, pretty simple eh? 

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X