What Are Nested Columns?

Nested Columns are columns within columns that can be added to any existing column for more control and flexibility when designing complex layouts. As with regular columns, nested columns are 100% cross-device responsive.

A technical example of nested columns – i.e., adding columns within columns, is adding a 1/4 column within a 1/2 column, meaning that the nested column will be 1/4 of the 1/2 column it is in and 1/8 of the entire page width.

How to Use Elementor’s Nested Columns

Elementor’s Inner Section widget creates nested columns within a section. In this way, designers can create intricate layouts. 

To create nested columns:

1. Drag an Inner Section Widget to your column.
2. As a default, you will receive a section with two columns.
3. You can add or remove columns by right-clicking the columns’ handle icon.
4. You can then drag and drop the Inner Section widget to any column on your page. However, you cannot use the widget within another Inner Section.
5. Now, you can style the Inner Section the same way you would style a Section.
6. One can also use Elementor’s advanced options for this widget.

Sticky Stay in Column Feature

The following steps will make your inner sections stay in a column while sticky and let you create customized layouts:

1. In the inner section, go to the Advanced tab > Motion Effects.
2. Sticky: From the dropdown, select Top or Bottom.
3. Once you choose, a “Stay in Column” option will appear.
4. Switch to Yes to make your inner section sticky.
5. If you only want to add a column to your section, right-click the column handle > Add New Column. You can add up to 10 columns.