Overview
Introduction: The Full Screen Image Text Bottom Hero component displays a full-screen background image with text content positioned at the bottom. It includes an eyebrow, headline, description, and call-to-action buttons, designed to engage users with a bold visual experience while keeping the focus on key messaging at the screen’s base.
Key Features:
- Full-screen background image with adjustable overlay opacity for improved text readability.
- Content positioned at the bottom of the screen for a unique layout, drawing attention to the text without obstructing the image.
- Customizable text fields, including an eyebrow, headline, description, and buttons, providing flexibility for promotional or informational content.
Best use cases
Examples of Effective Use:
- Best for when you have a small amount of description text to go with the headline
- Ideal for landing pages or homepages, where a bold, introductory image with key information can make a memorable impact.
- Suitable for event or promotional pages where a high-contrast image and concise message can drive user action.
- Works well as an entry point for a site’s main call-to-action, guiding users naturally from visual engagement to interaction.
How NOT to use this
Common Missteps:
- This section should not be used if you have a large amount of text.
- Avoid using low-contrast images that may reduce text readability, even with an overlay.
- Do not overload the component with excessive text or buttons, as the bottom alignment benefits from a clean, concise presentation.
- Ensure the image quality is high, as a low-resolution image may detract from the professional look of the section.
FAQ, pro tips, and troubleshooting
- Pro Tip: Adjust the overlay opacity to enhance readability without sacrificing the impact of the background image.
- Troubleshooting: If text appears difficult to read, increase the overlay opacity or use a simpler background image.
Ideas
Suggested Combinations: This component pairs well with a “Features - Centered Image” or “Image Grid Portfolio” section below, creating a balanced flow from visual impact to informative content.