# Using sections

**Sections** are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages.

## Add sections

***

Sections are listed in the theme editor **sidebar** in the order they appear on the page.

* Click the **(+) Add section** button in the theme editor sidebar.
* Use the **drag handles** (**⋮⋮**) to change the order of your sections and blocks
* Use the **Remove section** button to delete them or click the **eye icon** to hide them.

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields) in sections using the same template.
{% endhint %}

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FtNKiQ2eeAbqHxvYcl1ti%2Feditor-section-setup.png?alt=media&#x26;token=3848bb4c-331d-4485-ad02-eb66149a009b" alt="Highlighted areas of the Shopify theme editor showing how to open templates, add sections, and re-order sections." width="563"><figcaption></figcaption></figure>

### Add blocks

***

Most sections are made up of individual **Blocks** for text, media, buttons, or other content, which are nested under sections in the editor panel.

* Click **(+) Add block** button to add or select the type of block you wish to add.
* Click the **block** to open the block settings.

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FurASGufOfUIQAuunAx1J%2Fshopify-content-drag-handles.png?alt=media&#x26;token=30994c8d-9bd4-42e2-a596-4fd9152427d8" alt="" width="302"><figcaption></figcaption></figure>

## Section header

***

The **Section header** appears above the main content. Click the section to find the header settings

* Add a **heading** and **subheading.**&#x20;
* Add optional **button link**
* Change the heading **size** and **alignment**
* To remove the section header, delete any text in these fields

`Click the section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td> Set the heading text to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Subheading size</mark></td><td> Set the subheading text to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Heading alignment</mark></td><td>Position heading text to the <strong>Left</strong> or <strong>Center</strong> above section content.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr></tbody></table>

## Section styles

***

Sections include general style options. In the editor side panel, click the section to find style options for **padding**, **top dividers**, and **animations**.

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FrIsnX34AfyClkgrcJiDz%2Fsection-style-settings.png?alt=media&#x26;token=a7ce1ff6-24fc-43e5-8e73-6b8c8f5c7185" alt="" width="299"><figcaption></figcaption></figure>

### Section padding

***

Add or remove space at the top and bottom of the section. Under **Section style** in the section settings, select a **Padding** option:  **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FgmzJDs26Do5SZ5f0BktA%2Fsection-padding.png?alt=media&#x26;token=a2c27ba2-e63e-4729-a236-43c8d58981f1" alt="" width="563"><figcaption></figcaption></figure>

### Section top divider

***

Show a solid border at the top of the section to visually separate it from other sections.

The Top divider uses the **Lines and borders** color selected in the [theme color settings](https://help.fluorescent.co/stiletto/theme-styles/colors).

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FEzGmsacsOrFtb2rVZzph%2Fsection-divider.png?alt=media&#x26;token=7b2e9e25-d0a6-4c19-8e99-216653e29629" alt="" width="563"><figcaption></figcaption></figure>

### Section animations

***

When animations are enabled, text and images are loaded dynamically: section contents slide, fade, zoom, or ease into position at a delay rather than all at once.

Other animations include a "shimmer" over images and subtle visual changes to elements like buttons or hot spots.

### Turn off animations

***

You may want to turn off animations if you have concerns about load time, style, or accessibility. You can do so in your **Theme settings** or in individual **Section settings**.

* To turn off animations for a section, click the section to open the settings. Under **Section style**, toggle off **Enable animations**.
* To turn off animations for *all* sections, go to **Theme settings > Animation** and toggle of **Enable section animations**.