Getting StartedTheme Options Page OptionsPost TypesElementorWPBakeryTemplates BuilderExtrasDynamic Content How To
TheGem Documentation
Page Layout Basics
Columns

Columns

Columns are put inside sections and are the only child elements of sections, containing content and elements. You can add up to 10 columns. For details about column settings please refer to this article

Columns Gap

Columns have gaps between each other. By default, TheGem’s columns gap is 42 px. You can also define whether there should be no gaps between columns or set different gaps. Columns gap is controlled via section settings. Go toLayout tab > Layout section in Elementor’s section settings and use “Columns gap” selectbox

Example: in case you wish to make your section’s content full width, having no gaps to the right and to the left, use this settings in Layout tab of a section:

  • Content Width: Full Width 
  • Columns Gap: No gaps 

Column Width

Each column can have different width, which can be specified in Columns settings in Column width control

The basic rule is: the sum of all columns width cannot exceed 100%. 

Off-Grid Column Size

In case you need to use some special column width, different to the standards of TheGem grid, please follow this rule: column sizes should be natural numbers divisible by 5 without a remainder (20%, 25%, 70%, 85%).

Nested Columns

In case you wish to create complex layouts, you can use nested columns. For this purpose Elementor delivers the widget “Inner Section”. Inner section allows you to create nested columns within a section. For more details check this article