In this tutorial, I’ll be showing how to make perfectly aligned un-equal grids (hence the title of this tutorial post) without code, using solely the widgets of Elementor. You should be able to do something like afterward:
Now, let’s begin!
Step 1: First, create a section.
Step 2: Then, add your desired column. For the sake of this tutorial, I will choose a four-column structure.
Step 3: Then inside each column put an inner section, just duplicate the inner section on the third column.
Step 4: Drag some text editor widget on each inner section column.
Step 5: Then let’s add some background image to each inner section.
Step 6: Now let’s adjust the width of each column based on the image below:
Step 6: To set the width of each column, click on the column before the inner section. Please note that it’s up to you what layout do you want to have on each column:
Step 6: Now we’re going to set the height of each column.Go to the element were you inserted the background image, the inner section widget and adjust the padding of the section until all columns have equal height:
Now we’re done!
Thanks for Reaching This Far! 🙂
I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!
If you have more concerns or have encountered other issues, let us know in the comments section!