Section, Container and Element

Getting Started

Sections and containers are like the building blocks of a website, and elements are the main parts. This article will explain everything about sections, containers, and elements in simple terms.

Section

Sections are the main base block of building anything. Sections contain all other containers and 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 and container within it and customize it.

Refer to the GIF below:

Pre Designed Sections

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

Adding a Pre-Designed section:

Saving Sections 💾

You can save as many sections as you want on your website as a Symbol or Collection with a few small steps. Saving sections can keep you from reproducing the same section over and over; instead, you can use a saved all over your website.

Follow the GIFs below to see the demonstration:

⚠️ Make sure you right-click on the section bar to open the options

To know more about Save as Symbol & Collection, refer to the doc below:

Save as Symbol

Save as Collection

Container

Containers are resizable element holders that sit inside a section and root container to design any layout without breaking the layout. Multiple containers can be added inside a section in multiple lines. Containers come with a new section automatically.

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

🔷 To know more details about Container, refer to the doc below:

Container

💡 When you take a section, there comes a Root Container, which basically acts as a Row, and a Child Container inside it, which acts like a column.

Adding an Empty Container

When you add a new section, it includes a container by default. You can also add more containers within a container by clicking the plus button (➕).

Adding an element within a container

To add an element within a container, just click the plus button (+) inside the container.

Saving Containers 💾

You can save as many containers as you want on your website by saving them as a Symbol or Collection. Saving containers allows you to reuse them in different places on your site or on any other site.

Follow the GIFs below to see the demonstration:

⚠️ Make sure you right-click on the container bar to open the options

Elements

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

- General Elements
- Layout
- Airtable 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 the Plus icon (+) on an empty container on your website
- Choose any element from the panel.
- The selected element will appear on your website!

You can refer to the GIF below for an example:

Drag and Drop Element

You can easily drag and drop elements into a blank container or a container directly from the Element Library.

In a blank container

Saving Elements 💾

Once you've customized an element, you can save it for reuse on different parts of your site or on other sites by saving it as a Symbol or Collection.

Follow the GIFs below to see the demonstration: