The Basic Recipe
This is a fundamental challenge is that this represents some of the basic functionality of Avada, but if you are new to it might not be “common sense.”
To create a multi-column layout with the columns being equal in height do the following you have a couple of options — set at the column level or the container level. In both cases, it impacts columns in the same row, meaning a 1/1 column is not affected by the settings in other columns. Additionally, columns in rows are not influenced by rows that appear before or after unless you change the column counts in tablet or mobile layouts.
- Add a new three column container. This will take care of equal width and spacing of the columns.
- In the column alignment settings of the container, set this to stretch*. This will keep the columns at the same height. You can override this at the column level in the event you need to add a column that you don’t want to have the same height – I would recommend a new container for ease of maintenance. You can also do this using the stretch setting in each column, but then you have to edit each column.
*Note: In the legacy mode (Prior to Avada version 7) this was accomplished by setting the content to equal heights.
Column styling
There are several settings to adjust how the column is laid out. In this example I only adjusted the padding – I do this on all columns. You can adjust the gap between the columns using the column spacing or you can set the gap defaults in the Avada Options. The key to maintaining the symmetry you have created is tho make sure the settings are the same in each column. I normally do this by styling one column, cloning it, and then adding the content.
Demo Area
Default Layout
Quam. Pariatur quod molestias, curabitur fuga. Lacus! Sollicitudin hymenaeos eleifend? Distinctio egestas, possimus facilis, nec lobortis perferendis sapien eveniet at. Justo perferendis aspernatur quisque! Irure auctor parturient. Montes parturient dictum varius nostrum? Augue rhoncus consequat, maxime nibh volutpat, molestiae imperdiet! Ante urna aliquam fugit curae alias! Tempus praesent, nullam expedita, officia pulvinar commodo accusantium nunc ullamco, nobis veniam eget reiciendis.
Donec tempus ligula in urna hendrerit, sit amet ultricies justo rhoncus. Morbi pharetra arcu ut finibus interdum. Ut magna lectus, sagittis eu tempor quis, sagittis ut tortor. Donec tincidunt porttitor lorem eget commodo.
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Stretch Enabled on one column
Quam. Pariatur quod molestias, curabitur fuga. Lacus! Sollicitudin hymenaeos eleifend? Distinctio egestas, possimus facilis, nec lobortis perferendis sapien eveniet at. Justo perferendis aspernatur quisque! Irure auctor parturient. Montes parturient dictum varius nostrum? Augue rhoncus consequat, maxime nibh volutpat, molestiae imperdiet! Ante urna aliquam fugit curae alias! Tempus praesent, nullam expedita, officia pulvinar commodo accusantium nunc ullamco, nobis veniam eget reiciendis.
Donec tempus ligula in urna hendrerit, sit amet ultricies justo rhoncus. Morbi pharetra arcu ut finibus interdum. Ut magna lectus, sagittis eu tempor quis, sagittis ut tortor. Donec tincidunt porttitor lorem eget commodo.
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Stretch enabled on all columns
Quam. Pariatur quod molestias, curabitur fuga. Lacus! Sollicitudin hymenaeos eleifend? Distinctio egestas, possimus facilis, nec lobortis perferendis sapien eveniet at. Justo perferendis aspernatur quisque! Irure auctor parturient. Montes parturient dictum varius nostrum? Augue rhoncus consequat, maxime nibh volutpat, molestiae imperdiet!
Donec tempus ligula in urna hendrerit, sit amet ultricies justo rhoncus. Morbi pharetra arcu ut finibus interdum. Ut magna lectus, sagittis eu tempor quis, sagittis ut tortor. Donec tincidunt porttitor lorem eget commodo.
Stretch enabled on the container
Quam. Pariatur quod molestias, curabitur fuga. Lacus! Sollicitudin hymenaeos eleifend? Distinctio egestas, possimus facilis, nec lobortis perferendis sapien eveniet at. Justo perferendis aspernatur quisque! Irure auctor parturient. Montes parturient dictum varius nostrum? Augue rhoncus consequat, maxime nibh volutpat, molestiae imperdiet!
Donec tempus ligula in urna hendrerit, sit amet ultricies justo rhoncus. Morbi pharetra arcu ut finibus interdum. Ut magna lectus, sagittis eu tempor quis, sagittis ut tortor. Donec tincidunt porttitor lorem eget commodo.
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde. Maxime illum tellus! Tempor gravida, irure consequuntur?
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem.
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem.
Doloribus facilisis quasi diamlorem ex, ligula habitant voluptatem aliquip sed, ratione iste ex incididunt praesent condimentum diam sem. Urna nulla nostrum rem totam tristique porttitor turpis unde.
