Home
Tool Panel

Hero Image Widget

Hero Image Widget

The Hero Image Widget displays a large banner image that spans the full width of the page. It supports overlay text, a shade overlay for readability, and a call-to-action button. Use this widget for page headers, feature sections, or promotional banners.

Common Tasks

Adding the Widget to a Page

  1. Navigate to the page in the Contensive page editor.
  2. Click the widget tool to open the widget panel.
  3. Find the Hero Image Widget in the Design Blocks category.
  4. Drag the widget onto the page at the desired location.

Editing Widget Content

  1. Click the edit icon on the Hero Image Widget.
  2. Enter heading text in the Headline field.
  3. Enter supporting text in the Subtitle field.
  4. Set Text Align to position the overlay text (Left, Center, or Right).
  5. Set Text CSS Color to choose the text color that contrasts with your image.
  6. Adjust the Shade to control the overlay darkness behind text for readability (from transparent to dark).

Configuring the Button

  1. Click the edit icon on the widget.
  2. Enter a label in the Button Text field.
  3. Enter the destination URL in the Button URL field.
  4. To change the button appearance, adjust the Button Style in the advanced editor under the Styles tab.

Setting the Background Image

  1. Open the advanced editor and go to the Background tab.
  2. Upload or select a Background Image. This is the large hero image that fills the widget.

Styling the Widget

  • Open the advanced editor to access the Styles tab.
  • Set padding (top, right, bottom, left) to control spacing around the overlay content.
  • Choose a Theme Style to apply a predefined look.
  • Enable As Full Bleed for edge-to-edge rendering.
  • Set a specific Height if needed.

Removing the Widget

  • Click the edit icon on the widget and open the advanced editor.
  • Set the Active field to "No" on the Control Info tab to hide it, or delete the record to remove it permanently.

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