Hero Banner

The Hero Banner provides two types: Full Width with image and video and Slider with slides.

Example on the current website

-   Example: View live example

-   Preview with image:

-   Editor preview:

Content Editor Fields

Hero Activation

• Hero Activate:
  • Description: A toggle that determines whether a custom hero section should be displayed on the page.
  • Usage: Enable this toggle to use a custom hero section.
  • Requirement: Required to display a custom hero.

Hero Styles

• Hero Styles:

  • Description: A field group containing settings that define the type and appearance of the hero section.

  • Usage: Configure the hero section's layout, height, overlay, and other visual aspects.

  • Requirement: Required to display a custom hero.

  • Hero Type:

    • Description: Determines the type of hero section to display.

    • Options:

      • Full width: A full-width hero with an image or video background.
      • Slider: A full-width Slider with options to add slides and control the speed.

    • Usage: Select the desired hero layout.

    • Requirement: Required.

  • Hero Height:

    • Description: Determines the height of the hero section.
    • Options:
      • Full: Nearly Full-screen height.
      • Medium: Medium-screen height.
      • Small: Small-screen height.
    • Usage: Select the desired hero height.
    • Requirement: Default is "Full".

  • Hero Overlay:

    • Description: Determines whether to apply an overlay to the hero background.
    • Options:
      • on: Overlay is applied.
      • off: No overlay.
    • Usage: Select whether to use an overlay.
    • Requirement: Default is "Off".

  • Background Type:

    • Description: Determines the background type of the hero section (for Full width).
    • Options:
      • Image: Image background.
      • Video: Video background.
    • Usage: Select the desired background type.
    • Requirement: Default is "Image".

  • Video Sm:

    • Description: The video for small screens (for Full width with video background).
    • Usage: Upload the video for small screens.
    • Requirement: Optional.

  • Video Lg:

    • Description: The video for large screens (for Full width with video background).
    • Usage: Upload the video for large screens.
    • Requirement: Optional.

Content Fields (Dependent on Hero Type)

• Usage: These fields are used to add the actual content (heading, excerpt, image, CTAs, slides) to the hero section.
  • Hero Heading: The main heading of the hero section.
  • Hero Excerpt: A brief description or introduction.
  • Hero CTAs: Call-to-action buttons.
  • Hero Image: An image for the hero background.

Example Usage:

Steps:

1. Add the block: The Hero Banner Block is typically included in a page template or as part of a page's structure.
2. Activate the Hero: Enable the "Hero Activate" toggle in the page's settings.
3. Choose Hero Type: Select the desired "Hero Type" (e.g., Full width) or Slider (usually used on megascreen pages)
4. Configure Hero Settings: Adjust the "Hero Height," "Hero Overlay,".
5. Add Content: Depending on the selected "Hero Type," fill in the appropriate content fields (heading, excerpt, image, CTAs, slides).
6. Save the Page: The Hero Banner Block will dynamically load the correct hero template and display the content.

Benefits:

• Flexible Layouts: Supports full-width image or video and a Slider
• Centralized Control: Manages hero settings and content through a single block.
• Easy to Use: Frontend editors can easily switch between different hero types and customize their appearance.
• Reusable: The same block can be used on different pages with different hero types and content.
• Dynamic Content: The template uses PHP to dynamically generate the HTML for the hero.

Conclusion:

The Hero Banner Block is a powerful and versatile tool for building engaging hero sections on your website. It provides flexibility in terms of layout, styling, and user interaction, making it an excellent choice for any content that combines text, images, and calls to action in a structured, visually appealing way.