# Divider

> Feature of the Pro version

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FYYJwJGYFiI8NgMIxUADU%2Fdocs-en-shopping-experiences-elements-divider.png?alt=media&#x26;token=39eab391-5bbd-4fc9-9ad7-9efe7163fb07" alt=""><figcaption></figcaption></figure>

The **Divider element (1)** is in the list of selectable elements of the theme. This elements lets you separate different elements from each other. The divider can habe different styles in the settings.

## Configuration

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FAxrPewBPEohoBEWwVwaU%2Fdocs-en-config-shopping-experiences-elements-divider-content.png?alt=media&#x26;token=4d732fb7-bd1b-4252-bbc6-ea0006f702db" alt=""><figcaption></figcaption></figure>

In the **Content (1)** tab, you can define the basic **Divider Layout (2)** and set an optional **Divider text (3).** Using the **H-Tag (SEO) (4)** setting, the text can also optionally be marked as a heading, which also allows subheadings to be set that are semantically search engine optimized.

***

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FuWF3ID6R5KAFKg9LJZ2u%2Fdocs-en-config-shopping-experiences-elements-divider-settings.png?alt=media&#x26;token=9509dd1a-6142-48f4-b3fd-7cd6dd57a899" alt=""><figcaption></figcaption></figure>

The "Settings" tab contains the advanced settings for the **divider (1)** and the **typography (7)** of the optional text.

**Divider:**\
Define the **Color (2)**, **Width (3)** and **Height (4)** of your divider. Width and height can be given in any units. The **vertical alignment (5)** comes into play when the separator is placed opposite other, higher elements in a multi-column blocks. The **horizontal alignment (6)** comes into play when the divider is smaller than 100% width.

**Typography:**\
These settings are visible if you have entered a **Divider Text (optional)** in the **Content** tab. Here you can define the text **Color (8)** and the global **font family (9)**. The **Text-alignment (10)** defines on which position the text is display on the divider. You can place the text to the left of the divider, between the divider lines, or to the right of the divider. Set the **Font size (11)** and **Font weight (12)** of your divider text.