How to align buttons along the bottom of multiple columns in Elementor

We often need to display a few columns of content with Headings, Text, and Buttons.
You’ll generally want the Buttons along the bottom of the row to be lined up nicely.

But, oh dear! It doesn’t always come out looking right.

Example:

Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,  pulvinar dapibus leo.pulvinar dapibus leo.

Column Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec.

Here’s a simple method to get the Elementor Content looking aligned.

Step 1. Place an Inner Section with into each Column (delete one of the inner Section Columns) and place the Heading and Text into these Inner Sections…

Step 2. Set each columns ‘Vertical Align’ option to ‘Space Between’…

That’s it!

Example:

Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,  pulvinar dapibus leo.pulvinar dapibus leo.

Column Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec. dolor sit amet

 

Here’s another issue that may occur; When a Heading goes onto two lines, the Text goes awry.

Example:

Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,  pulvinar dapibus leo.pulvinar dapibus leo.

Column With Long Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec.

In this situation you can add a couple of Line Breaks at the end of the shorter Headings in the Row.

ie. Add…

				
					<br><br>
				
			

…to the end of the shorter Headings in the Row.

(This adds a space equal to the height of absent text.)

Share this article...

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Related Articles...

Elementor Guides & Tips

Elementor Theme Style Helper Template

Free download – this Template is designed to help new Elementor users learn about the Theme Style feature, and to also assist Elementor web designers with their new website design build workflow.

Read More »