# Layered images with text

![image](https://docs-assets.foxecom.app/sleek-theme/instagram_IR0qGTR7.png)

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

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 type="success">

Steps

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

</Hint>

## 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

![image](https://docs-assets.foxecom.app/sleek-theme/image_VY2pDVgJ.png)

#### 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

![image](https://docs-assets.foxecom.app/sleek-theme/image_WyorOcgN.png)

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

![image](https://docs-assets.foxecom.app/sleek-theme/image_jsx7knhf.png)

### **Block settings**

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

![image](https://docs-assets.foxecom.app/sleek-theme/image_7FMgQsIK.png)

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

<Hint type="info">

Enhance your images with captivating moving effects using our pre-defined **custom classes**:

* media-mover
* media-mover-reverse
* media-mover-reverse-slower

</Hint>

![image](https://docs-assets.foxecom.app/sleek-theme/image_i9lxe0or.png)