ξ‚£

Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add A Second Line Of Text To Any Divi Button

Nelson Miller Profile Orange
In this tutorial I will show you how to create a marketing call-to-action by adding a second line of text to any Divi module with a button.

▢️ Please watch the video above to get all the exciting details! πŸ‘†

Add A Custom CSS Class To The Button Module

The first step is to go to the desired Divi Button module where you want to add a second line of text and open the settings. Go to the Advanced tab and open the CSS ID & Classes toggle. There you will see an in put field next to the CSS Class label, and this is where you should add “pa-button-tagline” as the class.

It is necessary for this class to match the one used in the jQuery code snippet, which you will find in the next step of this tutorial. We use custom classes to make sure that our custom code will not affect the element that we don’t want to change.

Multiple Different Taglines

If you want to have this affect on more than one button, and have a different text tagline, then you will need a unique class for each module and also a separate set of jQuery with different text that matches the class.

Use jQuery To Add A Second Line Of Text

The next step is to add new line of custom text. We are going to do this with jQuery. You may wonder why we are not using a CSS pseudo class instead, but that is not going to work with the icons. It would be fine for simple applications.

Note that adding the jQuery will not show results inside the Visual Builder.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.

Button Module

This first snippet will apply to the regular Button module.

<script>
  jQuery(document).ready(function () {
		jQuery(".pa-button-tagline").append("<div class= 'pa-tagline-wrap'><h6>Your Tagline Here</h6></div>");
	})
</script>

Woo Add To Cart Module

This snippet will apply if you are using WooCommerce. It will add a second line of text to the Woo Add To Cart module. Notice that the differnce in this snippet is the addition of the CSS class used to target the add to cart button.

<script>
  jQuery(document).ready(function () {
		jQuery(".pa-button-tagline .single_add_to_cart_button").append("<div class= 'pa-tagline-wrap'><h6>Your Tagline Here</h6></div>");
	})
</script>

Other Divi Modules With Buttons

This snippet will apply to any Div imodule with a button. That includes modules like:

  • Call- To-Action Module
  • Email Option Module
  • Contact Form Module

Notice that the difference in this snippet is the addition of the CSS class used to target the “et_pb_button” CSS class used in Divi for buttons.

<script>
  jQuery(document).ready(function () {
		jQuery(".pa-button-tagline .et_pb_button").append("<div class= 'pa-tagline-wrap'><h6>Your Tagline Here</h6></div>");
	})
</script>

Add Some CSS

We’re not quite finished yet. You now have the option to style the tagline however you want. This CSS provided below is meant to provide you with a base and you can use it to add your own customization. For example, you can align the tagline and button text, change the tagline color, font size, font weight, etc. It will be best if you watch the video to see how this can be implemented.

/*adjust the vertical position of the button icon*/

.pa-button-tagline:after {
	line-height: 0 !important;
}


/*style the tagline container*/

.pa-tagline-wrap {
	display: inline-block;
	width: 100%;
}


/*stye the tagline text*/

.pa-tagline-wrap h6 {
	color: #ffffff!important;
}


/*align the button and tagline text*/

.pa-button-tagline {
	text-align: center
}

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

8 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

Comments By Others

  1. Jono

    I cannot understand why this doesn’t work:

    .et_pb_button::after {
    content: “Second Line for button”;
    display: block;”
    }

    Reply
    • Hemant Gaba

      Hi Jono!

      Please try the following code and see if it helps:

      .et_pb_button::after {
      content: ‘Second Line for button’;
      display: block;
      opacity: 1;
      font-family: ‘Open Sans’ !important;
      }

      Also, use the custom class for the button if needed for specific button.

      Reply
  2. gaby

    Thanks for this, just what i was looking for. however i want the tagline to be above the button text. Is this possible? Thanks πŸ™‚

    Reply
    • gaby

      don’t worry figured it out… just change append to prepend and it’s done the job! πŸ™‚

      Reply
  3. Steven Wilson

    For the fullwidth header module, there is only one CSS class field. But I found that if you append _one and _two to two instances of the code, you can address each button with different text:

    jQuery(document).ready(function () {
    jQuery(“.pa-button-tagline .et_pb_button_one”).append(“subheading 1”);
    })

    jQuery(document).ready(function () {
    jQuery(“.pa-button-tagline .et_pb_button_two”).append(“subheading 2”);
    })

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart