Search
Close this search box.

How to Add Line Break in the Elementor Button Text

Button is one of the default widgets that Elementor offers. You can use the widget for a wide range of purposes. From creating a call-to-action section on a page to creating a full-screen menu by combining it with Elementor Popup Builder. There are two elements you can add to a button: text and icon. By default, the two elements are placed in an inline style (horizontal). On a certain case, you might want to add a line break to the button text. Like the ones below.

Adding a line break to a button text is actually extremely easy. You can simply add the <br> tag between the texts. Example: Available on<br>App Store.

You can add the text above to the Text field on the button settings panel.

However, if you add the break line that way, you will have no control over the individual texts of the button. The setting you make on a text — be it the top text or the bottom text — will also be applied to another text. To apply different settings on each text, you need to use custom CSS.

Adding Line Break in the Elementor Button

First, add the Button widget to the canvas area just like usual. Next, add the following text to the Text field.

<span class="top-small-text">Available on the</span> <br> Google Play

You can tailor the button texts with your own texts.

Next, go to the Advanced tab on the settings panel and open the Custom CSS fblock and paste the following CSS snippet.

The snippet

selector .elementor-button-icon{
    font-size: 58px;
}
selector .top-small-text{
    font-size: 16px;
    color: #ffffff;
}

You can replace the value of the font-size variable on the elementor-button-icon selector to change the icon size. To change the size of the top text, you can change the value of the font-size variable on the top-small-text selector.

To set the size of the bottom text, you can go to the Style tab on the button settings panel and click the pencil icon on the Typography setting option.

You can stay on the Style tab to set the background color of the button, set hover effect, and other styling settings you want.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2013. He is responsible of all content published on this website. Learn more
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.