Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add A Second Line Of Subtitle Text To Divi Toggle And Accordion Modules

Nelson Miller Profile Orange
In this tutorial I will show you how to add a second line of subtitle text to Divi Toggle and Accordion modules.

▶️ Please watch the video above to get all the exciting details! 👆

Add A Custom CSS Class To The Toggle Modules

Let’s start with the Toggle module and do the Accordion module separately, since that will be a little different. The first step is to add a custom CSS class to the specific Toggle module that you want to target. We do this so that the snippet does not affect all the other Toggle modules on your site, which allows us to choose which ones remain normal and which ones are affected by the code and receive the specific subtitle text.

Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-toggle-second-line-1” in the CSS Class input field of the Toggle module.

add custom CSS class for adding a second line subitle text to the Divi Toggle module

Add The CSS Snippet To Your Toggle Modules

Now that the CSS class is added to the Toggle module, you can go ahead and copy and paste the CSS snippet below into your site. As soon as you do this, the module will show a second line of subtitle text, which is written and can be customized in the snippet.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

.pa-toggle-second-line-1 .et_pb_toggle_title:after {
	content: "Toggle Item 1 Second Line Subheading Text Here";
	display: block;
	font-size: 16px;
	line-height: 1.7em;
}

Customize The Text

So obviously the most important part here is the actual text. You can see we are adding this in a pseudo class. The content text is meant to be changed.

Styling

The most important part of the rest of the code is the display: block; which makes sure the text is on its own line, so please do not remove that. But other than that, you can adjust the style however you want. That includes things like font size, font weight, and color.

Duplicate The Process Per Toggle

If you want to have the same text on all the toggles, you could of course use the same CSS class and snippet for each Toggle. But most likely you would want to have a different subtitle text for each Toggle. To do that, you can simply change the number 1 in the class and also in the snippet as many times as you need.

Add A Custom CSS Class To The Accordion Modules

The process is going to be pretty much the same for the Accordion module as the Toggle, but with one key difference. The Toggle module is an individual item, but the Accordion contains multiple toggles. And the problem here is that the Accordion does not have a CSS class input field for each individual toggle item. Because of this, we need to target the individual toggles within the Accordion using the Divi Builder numeric suffixes.

Start by adding a custom CSS class to the specific Accordion module that you want to target. We do this so that the snippet does not affect all the other Accordion modules on your site, which allows us to choose which ones remain normal and which ones are affected by the code and receive the specific subtitle text.

Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-accordion-second-line-1” in the CSS Class input field of the Accordion module.

add custom CSS class for adding a second line subitle text to the Divi Accordion module

2. Add The CSS Snippet To Your accordion Modules

Now that the CSS class is added to the Accordion module, you can go ahead and copy and paste the CSS snippet below into your site. As soon as you do this, the module will show a second line of subtitle text, which is written and can be customized in the snippet.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

.pa-accordion-second-line-1 .et_pb_accordion_item_0 .et_pb_toggle_title:after {
	content: "Accordion Item 1 Second Line Subheading Text Here";
	display: block;
	font-size: 16px;
	line-height: 1.7em;
}

.pa-accordion-second-line-1 .et_pb_accordion_item_1 .et_pb_toggle_title:after {
	content: "Accordion Item 2 Second Line Subheading Text Here";
	display: block;
	font-size: 16px;
	line-height: 1.7em;
}

.pa-accordion-second-line-1 .et_pb_accordion_item_2 .et_pb_toggle_title:after {
	content: "Accordion Item 2 Second Line Subheading Text Here";
	display: block;
	font-size: 16px;
	line-height: 1.7em;
}

Customize The Text

Notice we have different text for each of the three items. The content text is added as a pseudo class and is meant to be changed.

Styling

The most important part of the rest of the code is the display: block; which makes sure the text is on its own line, so please do not remove that. But other than that, you can adjust the style however you want. That includes things like font size, font weight, and color.

Duplicate The Process Per Accordion

 To duplicate the process, start by using a different CSS class for each Accordion module. So you can simply change the number 1 in the main class and also in the snippet as many times as you need. 

Add More Individual Items

This is the part that is different from the Toggle module. Like I said before, the only way to target each individual item is to use the suffix system. So take special notice to the suffix in our examples, and use that same pattern. Keep in mind they start with _0 and count up on the same page.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. James Hayward

    You bloody legend! Nelson, I have been trying to work this out for a while for a client site. Where we had a category attached to each toggle. This little hack has worked a treat. Now my next challenge is to make the content and images inside the toggle look better. Thank you.

    Reply
  2. Russ Adams

    When I input the copied Custom CSS line, Nelson, I get the following error message. Is this due to a change in CSS or Divi?

    .pa-toggle-second-line-1 .et_pb_toggle_title:after {
    Expected RBRACE.
    content: “Toggle Item 1 Second Line Subheading Text Here”;
    display: block;
    font-size: 16px;
    line-height: 1.7em;
    }

    Any thoughts you have would be appreciated. If I could make this work as well as your demo does, it would interest me in your many other products!

    Thanks for any thoughts you may have.
    Unexpected token “}:

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart