> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/banners/image-with-text-overlay.md).

# Image with text overlay

The **Image with text overlay** section seamlessly combines images and content, effectively reaching users and enhancing the overall user experience.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FQ59emKRnkLl1QP6usGRP%2Fimage.png?alt=media&amp;token=92f93902-f38e-4cb2-b65a-2a176fc1c529" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fix width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| **Color scheme**  | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                  |

#### Image <a href="#blog-posts" id="blog-posts"></a>

| Setting                   | Description                                                                   |
| ------------------------- | ----------------------------------------------------------------------------- |
| **Image**                 | Upload desired image to display on desktop ***(1392px x 500px recommended)*** |
| **Mobile image**          | Upload desired image to display on mobile ***(400px x 469px recommended)***   |
| **Image overlay opacity** | Adjust the visibility of the image                                            |
| **Image height**          | Customize the size of the image                                               |

#### Content settings <a href="#content-settings" id="content-settings"></a>

| Setting                      | Description                                                                                                                                      |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Desktop content position** | Adjust the content position on desktop                                                                                                           |
| **Content alignment**        | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |
| **Max width**                | Controls the maximum horizontal space.                                                                                                           |
| **Padding inline**           | Controls the horizontal spacing (left and right) inside the content block.                                                                       |
| **Padding block**            | Controls the vertical spacing (top and bottom) inside the content block.                                                                         |

#### Mobile settings <a href="#section-padding" id="section-padding"></a>

| Setting                       | Description                                                                                                                                      |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Show text below on mobile** | Move the text content below the image on mobile devices.                                                                                         |
| **Content alignment**         | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                |
| ---------- | ------------------------------------------ |
| **Top**    | Customize the top margin of the section    |
| **Bottom** | Customize the bottom margin of the section |

#### Section divider

<table><thead><tr><th width="342.7778015136719">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section.</td></tr></tbody></table>

### Block settings <a href="#block-settings" id="block-settings"></a>

#### Heading, Subheading, Description

| Setting                              | Description                                                                                                                |
| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| **Heading, Subheading, Description** | Custom title block                                                                                                         |
| **Width**                            | <p>2 options for content's width:</p><ul><li><strong>Fit</strong></li><li><strong>Fill</strong></li></ul>                  |
| **Typography - Preset**              | This element inherits the font preset defined in the theme settings, ensuring consistent typography across the storefront. |
| **Background**                       | Toggle this setting to make the background options visible and configurable for this section.                              |
| **Background color**                 | Defines the background color for this section.                                                                             |
| **Corner radius**                    | Adjust this value to create sharp or rounded edges, enhancing the visual style of the component.                           |
| **Padding top/bottom**               | Adjust these values to control the amount of space between the section’s content and its outer edges.                      |

#### Button <a href="#button" id="button"></a>

| Setting        | Description                                                                                                                             |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Button label   | Custom name button, if left empty, the button will be hidden                                                                            |
| Button link    | The link URL you want to add                                                                                                            |
| Button type    | <p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul> |
| Spacing bottom | Spacing between the button and the next component                                                                                       |

#### Highlight text

| Setting          | Description                                                    |
| ---------------- | -------------------------------------------------------------- |
| Subheading       | Custom title block                                             |
| Size             | The size of highlighted content                                |
| Select icon      | Choose the icon to show along with the highlighted content     |
| Background color | Setting the background color                                   |
| Text color       | Setting the content color                                      |
| Uppercase        | Uppercasing the highlighted content                            |
| Spacing bottom   | Spacing between the highlighted content and the next component |

#### Countdown timer

| Setting             | Description                                                                                                                       |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **End time**        | Set the end date for the timer                                                                                                    |
| **Expired message** | Define the message appear when the timer runs out                                                                                 |
| **Design**          | <p>Select your preferred design for the timer here:</p><ul><li><strong>Default</strong></li><li><strong>Modern</strong></li></ul> |
| **Spacing bottom**  | Spacing between the highlighted content and the next component                                                                    |

#### Circular text

| Setting            | Description                                                    |
| ------------------ | -------------------------------------------------------------- |
| **Text**           | The main content to show in circular                           |
| **Uppercase**      | Change the text style to Uppercase                             |
| **Svg icon**       | Select an icon to display in the middle                        |
| **Direction**      | Select a direction for the text to spin                        |
| **Speed**          | The time to complete a spin                                    |
| **Spacing bottom** | Spacing between the highlighted content and the next component |