> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/section.md).

# 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="/files/MmA5o7TuopAHXxFiNnw8" 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="/files/sCO1eOF5r7e5oAHNCjID" 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="/files/8QVVmjlf3B5a36pSiU9a" 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="/files/WmbrZWErkK4y7UyB7gbK" 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="/files/08a3DxyfgNPYWf7UXSCi" 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).