The Hero Image Widget displays a large banner image that spans the full width of the page. It supports overlay text and buttons, making it ideal for page headers, feature sections, or promotional banners.
Edit Dialog Fields
| Field |
Description |
| Headline |
The main heading text overlaid on the image |
| Subtitle |
Secondary text displayed below the headline |
| Text Align |
Alignment of the overlay text: Left, Center, or Right |
| Text CSS Color |
Color of the overlay text |
| Shade |
Shade level applied behind the text for readability |
| Button Text |
Label for the call-to-action button |
| Button URL |
URL the button links to |
| Sort Order |
Controls the display order when multiple widgets are on the page |
Advanced Edit Fields
| Field |
Tab |
Description |
| Name |
Control Info |
Internal name for this widget |
| Pad Top |
Styles |
Add top padding to the widget |
| Pad Right |
Styles |
Add right padding to the widget |
| Pad Bottom |
Styles |
Add bottom padding to the widget |
| Pad Left |
Styles |
Add left padding to the widget |
| As Full Bleed |
Styles |
Include margins for content |
| Height |
Styles |
Set a specific height with units |
| Theme Style |
Styles |
Select a layout wrapper class from Design Block Themes |
| Button Style |
Styles |
CSS class for buttons (default: "btn btn-primary") |
| Background Image |
Background |
Set a background image for the hero banner |