An image with text overlay is a design element commonly used on websites to showcase a message or promotion visually compellingly. This design involves adding text over an image to create a compelling visual that attracts attention and communicates a message effectively. An image with text overlay can be used for various purposes, including promoting a sale, highlighting a new product, or sharing a brand message. This design element is effective because it lets website owners communicate important information quickly and effectively while capturing visitors' attention. Additionally, image with text overlay can be customized to fit the overall design of your website. It can be used on various pages throughout the site, including the homepage, landing pages, and product pages. Overall, an image with text overlay is a powerful tool that can help to increase engagement with your website visitors and communicate important messages effectively.
| Settings | Description |
|---|---|
| Image | Click Select Image to connect a image with the section. |
| Heading | Shows the title of the description. |
| Heading Color | Changes the color of the title. |
| Description | Shows the text of the context. |
| Heading Font | Select the font family. |
| Content Font | Select the font family. |
| Button Text | Shows the text of the button. |
| Button URL | Enter the URL that you wish the button to direct to. |
| Section Height | The size of the section height: |
| • Original | |
| • Small | |
| • Medium | |
| • Large | |
| Description Position | Select where the description is located: |
| • Middle | |
| • Middle Left | |
| • Middle Right | |
| • Top Left | |
| • Top Right | |
| • Top Center | |
| • Bottom Center | |
| • Bottom Left | |
| • Bottom Right | |
| Background Opacity | Adjust the opacity of image background using the slider. |
| Text Color | Changes the color of the text. |
| Background Color | Changes the color of the background. |
| Button Color | Changes the color of the button. |