How to Set Equal Column Height on Elementor | Elementor Resources 12611872352923
How to Set Equal Column Height on Elementor

How to Set Equal Column Height on Elementor

Did the builder ever scare you? We all felt that at one point in our developer/designer stage. We would love to create layouts that we know is possible and without great effort. In this Elementor Tutorial, I’ll guide you in creating equal height columns with text on the left and image on the right using Elementor. No need to worry about the responsiveness and how easy it is because I assure you, they are.

Before anything else, let me show what our final product will look like. By following each and every step in this article, you will able to achieve a result almost similar to this one (of course, assuming that’s what you wanted). Everything should run smoothly as long as you follow the following steps. Now…

Creating Same Height Responsive Columns

Let’s get started!
Step 1
Create a section with two columns and set the section width to full width. (NOTE: Remember to set the content position to MIDDLE).

Creating Same Height Responsive Columns
Creating Same Height Responsive Columns
Creating Same Height Responsive Columns

Step 2
Add a background to the section itself. This will serve as the background for the text column side of the layout. Although you could also add the background to the column itself if you prefer.

Creating Same Height Responsive Columns

Step 3
Edit both columns inside the section you’ve created. Set the Widget Space to 0. For the column where you would place the text, set the padding to % units and at around 5.5 each. For the column with the image, set the padding to 0.

Creating Same Height Responsive Columns
Creating Same Height Responsive Columns
Creating Same Height Responsive Columns

Step 4
Add in the text on the text column and add the image to the right. For the image section, set the Alignment to Middle and the Image Size to Full.

Creating Same Height Responsive Columns

Step 5
Go to the Advanced tab of the image > Responsive. Enable the Hide On Desktop toggle button.

Creating Same Height Responsive Columns

Step 6
On the column wherein the image is placed, set the same image as its’ background image. Set the Position, Repeat and Size as shown in the screenshot below.

Creating Same Height Responsive Columns

Thanks for making this far! 🙂

There you have it! The section will now be responsive and will show the whole image in smaller screens. If you want the desktop image to appear larger, just increase the percentage padding of the text column to your desired height (This only applies to padding top and bottom though).

We hope we’re able to help you through this article. You can check out our 1261 Elementor website examples to get inspirations for your website, or browse our 1872 Elementor layout templates instead to download free and premium ready-made website templates. We also have a tutorial on how to reverse column order in Elementor. If you have any other questions, please let us know in the comments sections.

Happy experimenting!

This Post Has 2 Comments

  1. Hi, i want to change section’s minimum height . like min height 100px default.
    help me in gmail. [email protected]

  2. Hi, I don’t understand the fifth step, why is it hidden on desktop? Thanks!

Leave a Reply

×
×

Cart