Follow us

Two Line Toggles and Buttons in Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

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 wink

With two lines of text

Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada.

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';

 

Two Line Toggles and Buttons in Divi

 

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 smile

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!