by | Jan 4, 2022 | DIVI, Tutorial | 0 comments

Last updated:
Jan 7, 2022
Estimated reading time:
3 minutes
Word count:
530
How To Add A Second Line Of Text To Any Divi Button

by | Jan 4, 2022 | DIVI, Tutorial | 0 comments

Add Tagline To Any Divi Buttons

A great way to provide some extra marketing info on a landing page is to have a second line of text on a call-to-action button. Since there is no way to add a second line of text to a Divi button by default, we are going to do it with some code snippets. So this tutorial will show you how to add a second line of text to any Divi button in module! This includes the Button module, Call-To-Action module button, Woo Add To Cart module button, Email Optin module button, and Contact Form module button.

Regular Button

NEW Tagline Button

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 “bh-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.

<script>
  jQuery(document).ready(function () {
		jQuery(".bh-button-tagline").append("<div class= 'bh-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(".bh-button-tagline .single_add_to_cart_button").append("<div class= 'bh-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(".bh-button-tagline .et_pb_button").append("<div class= 'bh-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*/

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


/*style the tagline container*/

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


/*stye the tagline text*/

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


/*align the button and tagline text*/

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

That’s All!

We hope you have enjoyed reading &  learning our blog posting. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Recent Comments

No comments to show.

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

0 Comments

Submit a Comment

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

You May Have Missed . . .

Dec 03, 2021

Website Maintenance Plans

Having a Maintenance Plan for your WordPress website is like having a personal on-call web master.  We’ll handle...