How To Add A Second Line Of Text To Any Divi Button Tutorial by Pee Aye Creative

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

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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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
}

Last updated Aug 31, 2021 @ 9:25 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. Spencer Taylor

    This is a sweet addition to the toolbag! I’m looking forward to using it.

    Reply
  2. 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.

Recent Posts

0

Your Cart