Columns Widget

The Columns widget, used for creating inner sections within a page, is different from other widgets and is a bit harder to get the hang of. We recommend spending more time learning this widget because it can become quite useful. You need the Columns widget in order to create a section that contains a variety of columns. For example, one section can contain 2 column and below it 3 columns, both column sets sharing the same section (See images below)

The basic layout of Elementor

It is very important to first understand how all Elementor pages are laid out. Check out this documentation and video explaining about sections and columns. For a quick recap, all pages are divided horizontally into sections. Each section is divided vertically into columns. Different widgets (buttons, headlines, images, etc...) are placed inside the columns, and this combination of widgets, columns, and sections make up the entire page design in Elementor.

Under the same column, you can place several widgets, one below the other. This way you can, for example, place a button below an image and have them both in the same column and in the same widget as well. 

Adding an inner section of columns

The columns widget lets you do one main thing: Divide any column to more columns. If before you had to stock widgets one under the other within the same column, now you could divide the columns further, and create more advanced layouts.

This is how the layout looks like before using the columns widget:

Notice that I cannot get the 3 columns to be included in the top section and share the background image because without the columns widget I cannot create a structure of 1 column and 3 columns below it, all under the same section.

And after adding the columns widget, we are able to get the top 1 column and the bottom 3 columns to share the same background image:

There are many other uses for dividing columns into inner columns, but this example above works well in explaining the basic concept of the columns widget.