• Home
  • /
  • Blog
  • /
  • How to Put 2 Buttons side by side in Elementor

How to Put 2 Buttons side by side in Elementor

Posted in Elementor Gudies   on  February 21, 2023 by Shoaib

There is no doubt that Elementor is the best WordPress page builder in the market right now. But while working with Elementor section columns building blocks, you may need some help with your layout.

At some point, users struggle to put 2 button side by side in the Elementor page builder. But not any more!

Read Also: How to Set 2 column side by side on Mobile in Elementor

Elementor place buttons side by side Problem

As you can see below, I have created an Elementor section with two columns. But when I try to add two buttons on the same row, the second button is laid out on the second row.

Let's see how we can put two buttons side by side in Elementor.

Elementor place buttons side by side Problem

Method 1: Place buttons using inline (auto) Width option

Here are a few steps to fix this alignment issue:

1: Select both of your buttons one by one and Go to the advanced tab.

2: Then go to the width option and select the inline (auto) from the menu.

 inline (auto) option to put two button on a same row in elementor

Now the buttons are on the same line, but the problem is they are too close to each other.

button are too close to each other in elementor

3: Select the 2nd button, uncheck the margin, and give a 15px margin from the left side to create the space between the two buttons.

elementor side by side buttons

Method 2: Using Elementor inner section inside inner section

The 2nd way to place buttons side by side in Elementor is to use the inner section within your parent (main) section.

1: Add the inner section to your main section.

2: By default, the inner section has two columns. Duplicate the column if you need more columns in the same row (in case you want to add three button side by side).

Elementor two button within inner section

3: Increase the second column width to make the button looks good without extra space.

 remove the space between two columns in elementor

Method 3: Using Elementor Flexbox Container Feature

Elementor page builder introduced a powerful feature that helps you to create an advanced responsive layout with the new flex container element.

Step 1: Ensure you activate the flex container feature by going to the elementor setting -> features.

Step 2: After activating this feature, you will find the Container element under the layout tab. Drag the element where you want to add two buttons horizontally.

Note: Elementor container also works perfectly within your existing section and columns layout.

Step 3: Add your two buttons to the container element. As you can see, the buttons are not in the same row.

Step 4: to enable the Flex module, select the container and go to the layout tab.

Step 5: By default, the items are in the vertical direction. Choose row to be horizontal to place the button in the same row. You can also use Gap between elements to create space between two buttons as much as you want!

Final Thoughts

You can place the button in any direction using these three methods, especially the elementor flex container feature.

Happy learning with Elementor, the easiest WordPress page builder ever!

Some Useful Articles

About Shoaib Akram


I've been in the business of writing, marketing, and web development for a while now. I have experience in SEO and content generation. If you need someone who can bring life to your words and web pages, I'm your guy.

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Subscribe to get the latest updates