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.
Last updated