Search

How to Add Two Buttons Side by Side in the Same Column in Elementor

Button is way more powerful than text when it comes to click rate. In Elementor, you have the Button widget to add a button element to a page. You can use the Button widget to create an actionable button such as WhatsApp button, Skype button, Email button, and so on without installing an additional WordPress plugin. While for the appearance, you can set any layout you want. For instance, you can add two buttons side by side in the same column. This article will show you how to achieve it.

Logically, you can add the Inner Section widget to a column and place your buttons to each column of the inner section to achieve side by side columns layout. While this method is not wrong, there is a better way you can opt to. You can place two or more buttons side by side to the same column by utilizing inline positioning setting option. This positioning option will place a widget in a horizontal stack instead of vertical.

How to Add Two Buttons Side by Side in the Same Column in Elementor

First, specify a column where you want to place your buttons to and add your first button.

Once the button is added, go to the Advanced tab on the settings panel and open the Positioning block. On the Width dropdown, select Inline.

Add the second button and repeat the steps above and voila, you have your second button next to your first button (make sure to place the second column to the same column as the first button).

If you add a new button and set the positioning to Inline, it will be placed next to the second column.

To set the gap between the columns, you can simply edit one of the buttons and set the margin on the Advanced block under the Advanced tab on the settings panel.

To set the alignment of the buttons, you can edit the column belongs to the buttons. On the Horizontal Align dropdown under the Layout block under the Layout tab, select the alignment you desire.

The Bottom Line

There are at least two methods to add two buttons side by side in one column in Elementor. The first option, you can use the Inner Section widget. The second option, you can use inline positioning option as we have just covered above. While the first method is not wrong, it’s not recommended as adding a new widget (Inner Section in this case) increases the HTML request of your page which affect your page speed.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?