Image with text overlay
Image with text overlay on a website enhances visual appeal, message clarity, storytelling, content hierarchy, user engagement, calls to action, and brand representation, enriching the user experience.
Section settings
General settings
| Setting | Description |
|---|---|
| Section width | 3 options for container
|
| Color scheme | Select colors from Theme settings -> Colors |
Image settings
| Setting | Description |
|---|---|
| Image | Upload desired image |
| Image width | Customize the size of the image |
| Image overlay opacity | Customize the image overlay opacity |
| Image height | Image height: Adjust the height of the background images
|
Mobile layout
- Show text bellow on mobile: Content beneath the image
- Reset color scheme setting on mobile: When enabled, the content color will be displayed in the default color scheme
Content settings
| Setting | Description |
|---|---|
| Desktop content position | 9 options for the desktop content position
-> Position is automatically optimized for mobile. |
| Content alignment | 3 options for the content alignment
|
| Size | Font size content customization
|
| Max width | Customize the width of the content section -> Content max width is automatically optimized for mobile. |
Section padding
- Top padding: Customize the top margin of the section
- Bottom padding: Customize the bottom margin of the section
Block settings
Heading, Subheading, Description
| Setting | Description |
|---|---|
| Heading, Subheading,Description | Custom title block |
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 style | The style of the button
|
Spacing
- Desktop: Change the section height in desktop screens.
- Mobile: Change the section height on mobile screens.
No comments yet