Image with text overlay
The Image with text overlay section seamlessly combines images and content, effectively reaching users and enhancing the overall user experience.
.png)
Section settings
General settings
| Setting | Description |
|---|
| Section width | 3 options for container - Stretch width: span the section width regardless of screen size.
- Fix width: depends on your page content width in Theme settings -> Layout.
- Full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
|
| Color scheme | Select colors from Theme settings -> Colors |
Image
| 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
| Setting | Description |
|---|
| Desktop content position | Adjust the content position on desktop |
| Content alignment | 3 options for the content alignment |
| 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 layout
| Setting | Description |
|---|
| Show text below on mobile | Move the text content below the image on mobile devices. |
| Content alignment | 3 options for the content alignment |
Section padding
| Setting | Description |
|---|
| Top | Customize the top margin of the section |
| Bottom | Customize the bottom margin of the section |
Section divider
| Setting | Description |
|---|
| Show divider | Toggles the visibility of a horizontal divider line within the section. |
Block settings
Heading, Subheading, Description
| Setting | Description |
|---|
| Heading, Subheading, Description | Custom title block |
| Width | 2 options for content's width: |
| 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
| 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 | The style of the button |
| 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 |
No comments yet