How to Add Line Break in the Elementor Button Text

Updated: June 3, 2022

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 WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general