Section, Row, Columns, Elements

Getting Started

Sections, Rows, and columns are the building blocks of a website. This article will cover everything about Sections, Rows, and Columns.

Section

Sections are the main base block of building anything. Sections contain all other elements inside them. A section needs to be added first to make any design.

Here is how you can add a new section:

Add a section to a new page:

If you create a new page on your site, you will see the option to add a new section automatically,

Here is what it should look like:

Add a section to a pre-built page:

If a page already has sections, here is how you can add a new section.

Refer to the GIF below:

Pre Designed Sections

You can choose a vast range of pre-designed sections to your page, from Navbars to contact forms, pricing lists, and footers.

Adding a Pre Designed section:

Adding Custom Section:

You can add a blank section on your site and add elements, and stylize it on your own.

Here is how you can do that:

Rows

Rows are the first layer of containers inside a section. Sections hold columns and elements inside them. Multiple rows can be added inside a section and styled differently. Rows come with sections and columns by default.

To learn how to add a new row and how it works; refer to the Picture and GIF below ⬇️

Columns

Columns are resizable element holders that sit inside a row to design any layout without breaking the layout. Multiple columns can be added inside a row in multiple lines. Columns come with a new section automatically.

To learn how to add a new row and how it works; refer to the Picture and GIF below ⬇️

Elements

There are various types of elements that you can add to an empty section on your website. Each element has its own use cases. There are two types of elements:

- General Elements
- CMS Elements (only works on CMS Row with Column)

To learn how to add an element to your website, you may follow the steps below:

Adding an Element

- Click on Add Element on an empty section on your website
- Choose any element from the grid under the General Elements or CMS Elements panel.
- The selected element will appear on your website!

You can refer to the GIF below for an example: