# Image with text overlay

<figure><img src="https://content.gitbook.com/content/3yE7VVjvl0MgK6awOPKB/blobs/BNmIw90TKsJgNELjmlRr/image.png" alt=""><figcaption></figcaption></figure>

The Image with Text Overlay section showcases your products and brand message in a visually compelling way.

It seamlessly blends captivating imagery with clear and concise text, creating a powerful combination for storytelling and driving sales.

## How to add an Image with text overlay section

{% hint style="success" %}
Steps

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

## **How to edit an Image with text overlay section**

### **Section settings**

#### General settings

* **Container**: Set the image to be in full-width or fixed-width mode.
* **Image**: Capture attention with a stunning image or lifestyle photo that set the scene.
* **Desktop height**: Control the height of the image on desktop.
* **Overlay opacity**: Adjust the opacity between 0 and 100% (multiple of 5) to create various levels of transparency.
* **Enable parallax effect**: Make the background image scroll at a different speed than the foreground text as visitors scroll down the page.
* **Parallax direction**: Vertical/ Horizontal/ Zoom.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FMJ08RCF3VAc3yx8kz0vV%2Fimage.png?alt=media&#x26;token=d0cfba38-be4b-4bba-8f9f-a758c1d49085" alt=""><figcaption></figcaption></figure>

#### Content settings

* **Color scheme**: Select a set of predefined colors for your text. Edit your colors any time in Theme settings > [Colors](https://docs.foxecom.com/sleek-theme/theme-settings/colors).
* **Content position**: Control where the content is displayed over the image.
* **Content alignment**: Control whether the content is left-aligned, center-aligned, or right-aligned.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FgdGh20Lerdt2tqcEPgkv%2Fimage.png?alt=media&#x26;token=ea96e102-5636-4f37-aaae-d3329bc1e858" alt=""><figcaption></figcaption></figure>

#### Mobile settings

* **Image**: You can select an image for mobile view separately. Leave the option blank if you want to use the same image as desktop.
* **Mobile height**: Control the height of the image on mobile.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FXbrSLH2O7JHqu2i0fpoB%2Fimage.png?alt=media&#x26;token=0b4104fb-9cf9-481f-a93a-05e104cef186" alt=""><figcaption></figcaption></figure>

### Block settings

You can choose to edit the following elements:

* **Heading** - This will serve as the subject or title of your section. For this one, we suggest using a short, but clear title that will allow your customers to easily understand the message you're trying to convey.
* **Subheading** - This will serve as the subtitle of your section.
* **Text** - This is displayed below the heading. This offers a set of rich text functions that allow formatting of the text like adding styles, links, or lists. To learn more, see Shopify's [Rich Text Editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
* **Button** - This is a call-to-action button allowing you to select a page or paste any link of your choice.

Drag to reorder any element you like within the section.