# Layered images with text

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FJTfvvQ8fKuibDwAFsttT%2Finstagram.png?alt=media&#x26;token=7ca17f11-fdeb-4136-8cd5-ba2ac1b04da8" alt=""><figcaption></figcaption></figure>

The **Layered Images with Text** section includes images overlaid with each other, surrounding the centrally-placed text/ information.&#x20;

This design can form a visually appealing and dynamic layout for your Shopify store.

The **Layered Images with Text** section is often used to draw attention to featured information or key points on the website.

## How to add a Layered Images with Text section

{% hint style="success" %}
Steps

1. In the theme editor **(Customize) >** click **Add section.**
2. Locate **Layered images with text.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a **Layered Images with Text** section

### **Section settings**

#### Section header

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FkFUM66PtzKtboUaT1mrq%2Fimage.png?alt=media&#x26;token=d6dc7f7e-65df-4a02-931f-1f211136a36f" alt=""><figcaption></figcaption></figure>

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Description**.

* Leave them blank if you do not want to display them

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FcvEDf2MzMO3IaZ27gbyf%2Fimage.png?alt=media&#x26;token=b8d1f441-5290-4886-b0c9-7b45da410eb2" alt=""><figcaption></figcaption></figure>

The call-to-action button will get the link from the provided **Button link** field.

Give the button a **label,** and a specific **Button style**:

* Primary button
* Secondary button
* Underline button

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FT4y1XhKTnPPRD6xLmv6T%2Fimage.png?alt=media&#x26;token=58fa53aa-19cd-477d-98f2-1866981e558a" alt=""><figcaption></figcaption></figure>

### **Block settings**

In the **Layered images with text** section, you can add up to 5 **Image** blocks.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FVhs4UHTBqTNF6PmaXeRb%2Fimage.png?alt=media&#x26;token=2d4046b3-86f3-4ba7-9b6e-3c0134aa041f" alt=""><figcaption></figcaption></figure>

Add an **Image** or image link (by connecting to a dynamic source) for each Image block to ensure proper display.

{% hint style="info" %}
Enhance your images with captivating moving effects using our pre-defined **custom classes**:

* media-mover
* media-mover-reverse
* media-mover-reverse-slower
  {% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FBptqooYad9pVvfTa5LGt%2Fimage.png?alt=media&#x26;token=fef6e179-1d8c-4ef9-9fe0-557871f6f7b0" alt=""><figcaption></figcaption></figure>
