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…
Let’s get started!
Create a section with two columns and set the section width to full width. (NOTE: Remember to set the content position to MIDDLE).
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.
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.
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.
Go to the Advanced tab of the image > Responsive. Enable the Hide On Desktop toggle button.
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.
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.