# Adding Sections to a Container

Once a container is added to your page, you can integrate one or more **sections** to structure your content.

<figure><img src="https://content.gitbook.com/content/cNWVdvjm9hCdZlvVho49/blobs/2EBahEkZUFk2y8GhVDx3/image.png" alt=""><figcaption></figcaption></figure>

### Steps to add a section

1. **Click on the icon in the top right** of the relevant container.
2. A **contextual toolbox** appears.
3. Click on the **"+"** button (Add a section).
4. The **left side panel** opens automatically: you can **select the type of section** to insert.

<figure><img src="https://content.gitbook.com/content/cNWVdvjm9hCdZlvVho49/blobs/p3uIMkoNbEdyASpS5Spg/image.png" alt=""><figcaption></figcaption></figure>

***

### Why is this step important?

From this moment, you enter the **visual construction of your page**: You will be able to choose the order and layout of elements such as:

* Your **articles**
* A **Discord block**
* An **introduction banner (Hero)**, etc.

It's also at this step that you can **start thinking about the responsive version** of your site. Each section you add is designed to be **compatible on all devices**: mobile, tablet and computer.

***

### Available section types

In the left side panel, you'll have access to several sections, each with a specific purpose:

* **Background Section** Used mainly for immersive visual blocks like **Hero** or **Hero Server**. It allows you to add a background image or color and properly structure the first visual elements.
* **Other sections** Designed to accommodate all types of components: text, images, cards, call-to-actions, forms, etc.

***

### Once a container is selected

As soon as you've clicked on the section that interests you:

* It will be **dynamically added** to your page.
* A **contextual options bar** will appear to manage this section.

<figure><img src="https://content.gitbook.com/content/cNWVdvjm9hCdZlvVho49/blobs/dzEts7sDWUCJDANLYhuF/image.png" alt=""><figcaption></figcaption></figure>

#### Available options for each container:

1. **Movement arrows**: allows you to **change the order** of the container on the page (move it up or down).
2. **Customization button**: opens the Dialog Builder to visually configure the section.
3. **Add a component**: allows you to add one or more components inside the section.

***

💡 **Tip**: You can reorganize sections at any time using the movement arrows available on each block.

