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.
▶️ 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
}
This is a sweet addition to the toolbag! I’m looking forward to using it.
For sure, enjoy!