# 1. Section

**Section** is one of the essential components in the design process of a landing page. Each section is a distinct content block that helps organize the layout of the page in a visually coherent and logical manner.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FVbUMwHcZElDksw7iAPkO%2Fimage.png?alt=media&#x26;token=d0e499ab-88ba-4b3f-9898-74b7c2abc5e9" alt=""><figcaption></figcaption></figure>

## **1.** Add Section to the landing page

To add a new section to your landing page, you can follow one of two methods:

* **Method 1:** Add a section from the sidebar:

  * In the Sidebar, click on the **Section** icon, then select either a blank section or a suitable section template.

  <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F52SUYrO57iRVgBTmYDD2%2Fimage.png?alt=media&#x26;token=c7645428-f13c-44f2-99e6-05dec61acd23" alt=""><figcaption></figcaption></figure>
* **Method 2: Add a section from the editing screen**

  * On the editing screen, select the section located above the position where you want to add the new section.
  * Click the **+ Add New Section** button to insert a blank section.

  <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FsTXo2JEKp0H4nUF9YLnv%2Fimage.png?alt=media&#x26;token=94f81f4e-5a97-4d2a-872f-21bc332ae325" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: You can adjust the height of the section by clicking and dragging the arrow button next to the **Add New Section** button.
{% endhint %}

## **2.** Section Editor

### 2.1. Design Editor

To access the **Design Editor**, click on the **Section** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F60bgdusdfmrJMFBQ9Jvx%2Fimage.png?alt=media&#x26;token=87822b79-e0b4-4129-81f4-6c710c7507f6" alt=""><figcaption></figcaption></figure>

* **CSS ID:** The identifier of the section element.
* **Display on:** Determines which devices the section will be displayed on, including Desktop and Mobile.
* **Styles:** Allows you to change the background color and shadow effects of the selected section, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Border:** Allows you to add and customize the border around the section, and you can also adjust the roundness of the corners, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).

### 2.2. Advanced Editor

To access the **Advanced Editor**, click on the **Section** widget you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FpwW4ZaQ4SqxivzkxjHQt%2Fimage.png?alt=media&#x26;token=883afd37-bbe5-4fc7-a322-8181912c7e2f" alt=""><figcaption></figcaption></figure>

**Sticky**: Allows you to use suitable element positioning to optimize your website and provide the best experience for customers, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/event).

**Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).