Adding a second line to a button can provide more information to users about the action the button will trigger when clicked. Additionally, the second line of text helps increase user engagement and improve the overall user experience. And if you’re using the button to promote your product, the second line of text can also help to emphasize important information, such as a limited time offer or a special promotion.
By default, there is no way to have two lines of text for button text in Divi. So, if you want to create a button with two-line text, you may want to add a text module instead and then make a button from it.
If you need it to be a button module still like for instance you want to use the Custom Style For Button option so you can style up your button easily and add an icon to the button, no worries, you can still add a second line of text for it. To do so, you need to add some code snippets which we will show you later in this tutorial.
Let’s get started!
Creating a Button with Two-line Text in Divi
Text Module Button with Two-line Text and More (No Code)
Once you’re in the visual builder, add a Text module on the place you want to create a two-line text button and then open up the text module setting. Add the first line of text for the button on the Text block. And to add the second line, press the following key on your keyboard then add the text in the new line:
- Shift + Enter
If you want to add more than two lines, you just need to press the shift + enter key again and start adding the text on the new line. Once the text is ready, continue to make the button by adding links and adding some styles like background color and hover effects.
Button Module with Two-line of Text
Adding a Custom CSS Class
First, open up the Divi visual builder and go to the desired Button you want to add the two-line text then open up the Button Settings. Continue by navigating to the Advanced tab and adding the wpp-button custom CSS class on the CSS ID & Classes → CSS Class.
Add a Custom Code for the Second Line of Text
The next step is to add a custom JQuery code for the second line of text on your button. Depending on your button display location, you may want to add the custom code to the Divi → Theme Options → Integration → Add code to the <head> of your blog if the button is displayed on more than one page, or if it’s only on a single page, you only need to add a code module in that page. Once you’re ready, copy the following code to the code editor:
<script>
jQuery(document).ready(function () {
jQuery(".wpp-button").append("<div class= 'wpp-secondtext'>Second Line Text</div>");
})
</script>
Replace the “Second Line Text” text with your desired text for your button’s second line of text and then apply the code by saving your changes.
By now, your button will have the second line of text you just added, however, as we use JQuery, the result will not be visible on the visual builder but from the front end.
As you can see from the above image, the text on the second line looks the same as the first line, and the icon is not positioned in the center. If you want the text to have a different style, that’s when the wpp-secondtext custom CSS class which we’ve added along with the second line text from the custom code before comes in handy. Additionally, let’s fix the button’s icon position also if you use one. Let’s continue to the next step.
Style Up the Text
Now, to style up the text and fix the icon position, you can use the following custom CSS snippet for the starter and then make changes as you see fit. Copy the following snippet to Divi → General → Custom CSS editor.
/*adjust the vertical position of the button icon*/
.wpp-button:after {
line-height: 0 !important;
}
/*style the tagline container*/
.wpp-secondtext {
display: inline-block;
width: 100%;
color: red;
font-size: 16px;
font-style: normal;
font-weight: bold;
}
- color: red; → change the text color to red
- font-size: 16px; → change the text size to 16px
- font-style: normal; → default style, you can change it to italic or oblique
- font-weight: bold; → specifies the weight of the text, change it to normal if you want normal weight for the text
There are still many CSS properties you can use to style up your text. Once you’re satisfied with the style, click the Save Changes button to apply the changes you’ve made.
width:70%;
Change the value (70%) to your desired size for your button. Apply the changes and let’s see the result from the front end.
How to add Multiple Button with Two Lines of Text
To create multiple buttons with two lines of text, you can repeat the steps before as follows:
- Add a custom CSS class with a different class from the first button
- Add a custom code for the second button using the new CSS class (
wpp-button2)and add your second line of text.
<script>
jQuery(document).ready(function () {
jQuery(".wpp-button2").append("<div class= 'wpp-secondtext'>New button Second Line Text</div>");
})
- Your new button’s second line of text will have the same style as the first button and the icon will not be in the center. To have a different style and to fix the icon position, you need to replace the
wpp-secondtextfrom the custom code above to the new second text CSS class then use the button and the second text CSS classes to create the CSS snippets with a similar format from this step. - Fix the button width
- Apply and save your changes and repeat the step for another button.
The Bottom Line
By default, there is no way to add a line break for button text in Divi. So, if you want to create a button with two-line text, you may want to add a text module instead or add some code snippets instead to add second-line text to the button module. This tutorial just shows you how to create a button with two lines of text in Divi.
And we also showed you how to add two-line text to multiple buttons by repeating the step above. And by using Divi Code Snippet which is a part of Divi Cloud, you could save more time because you don’t have to copy and paste each code.
1 thought on “How to Create a Button with Two-line of Text in Divi”
I’m having trouble getting this to work right mobile. The second line doesn’t appear until I scroll a bit.