# Section

## How to Add Section

When we are creating a new section, it is required to choose a specific section layout. Here are some common section layouts:&#x20;

* **One Column:**
  * Full Width.
  * Boxed.
  * Edge to Edge.
* **Two Columns:**
  * 50% - 50%
  * 25% - 75%
  * 33% - 67%
* **Three Columns:**
  * 33% - 33% - 33%
  * 25% - 50% - 25%
  * 50% - 25% - 25%

Using "Two Columns" section layouts allows users to divide a section into two or more blocks. However, this limits the number of columns per section. To have more control, users can manually add columns using the "Columnized Static Content" block.

We could also add styling to each section by assigning the section to different CSS classes.&#x20;

To add a section to a specific page on the site, follow these steps:

1. Open the desired page e.g.(Landing Page).
2. Click on the **Layout** tab at the top of the page.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/9Ok9yPiwOTeShdkmUY9q/image.png" alt=""><figcaption><p>Edit Landing Page - Layout Builder</p></figcaption></figure>

3. Or you can navigate the layout builder by clicking on **Tasks/*****Layout.***

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/bCiHKpW5zinrJlzypzpC/image.png" alt=""><figcaption><p>Navigate the Layout from the Task Bar</p></figcaption></figure>

4. Click on **+ ADD SECTION.**
5. Choose a layout for this section e.g.( Bootstrap 1 Col).

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/aBCrfomFU7E9wb16NKVj/image.png" alt=""><figcaption><p>Add Section</p></figcaption></figure>

6. Choose from the **Container Types** options e.g. (Full).
7. Choose from the **Gutters** options e.g. (No Gutters).
8. When you finish all the needed updates click on **Add Section** button.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/koWyhHXXYxzvyy4w4yK9/image.png" alt=""><figcaption><p>Adding 1 Col Section </p></figcaption></figure>

9. Click on **Save Layout** to save the added section.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/F3Jnos94yW5Mk52Kwxkm/image.png" alt=""><figcaption><p>Save Layout</p></figcaption></figure>

## How to Edit/Delete Section

In order to edit a section to a specific page on the site, follow these steps:

1. Click on **Configure Section** link.
2. Update the **Configure Section** then click on **Update** button.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/P6MstauqTGAshJw3u6HH/image.png" alt=""><figcaption><p>Edit Section</p></figcaption></figure>

In order to delete a section to a specific page on the site, follow these steps:&#x20;

1. Go to the section to be deleted and click the "**X**" icon.&#x20;
2. Confirm to delete the section by clicking **Remove** button.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/2MtaIi0g31dqoP6ENP51/image.png" alt=""><figcaption><p>Remove Section</p></figcaption></figure>
