BANC

Hero Banner

The Hero Banner provides a flexible and powerful way to create engaging hero areas.

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. Disable it to use the default hero.
    • 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.
        • Two columns: A hero with content and an image side-by-side.
        • Slider: A hero with multiple slides in a slider.
      • Usage: Select the desired hero layout.
      • Requirement: Required.
    • Hero Height:
      • Description: Determines the height of the hero section.
      • Options:
        • Full: 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".
    • Hero Disposition:
      • Description: Determines the disposition of the hero section (for Two collumns).
      • Options:
        • Left-to-Right: Image on the right, content on the left.
        • Right-to-Left: Image on the left, content on the right.
      • Usage: Select the desired disposition.
      • Requirement: Default is "Left to right".
    • 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".
    • Slider Type:
      • Description: Defines the slider's behavior (for Slider).
      • Usage: Select the desired slider type, "slide" or "loop".
      • Requirement: Default is "loop".
    • Slider Autoplay:
      • Description: Enables or disables automatic sliding (for Slider).
      • Usage: Toggle on or off based on whether you want the slider to move automatically.
      • Requirement: Default is "Off", if choose "On", Slider speed need to confiured.
    • Slider Speed:
      • Description: Controls the speed of the slider's transitions (for Slider, when Autoplay is "On").
      • Usage: Adjust the speed to match the content and desired user experience: "0.4 seconds", "0.8 seconds" or "1.2 seconds"."
      • Requirement: Default is "0.4 seconds".
    • Hero Arrows:
      • Description: Shows or hides navigation arrows (for Slider).
      • Usage: Toggle on or off based on whether you want to display arrows: "On" or "Off".
      • Requirement: Default is "On".
    • Hero Dots:
      • Description: Shows or hides navigation dots (for Slider).
      • Usage: Toggle on or off based on whether you want to display dots: "On" or "Off".
      • Requirement: Default is "On".
    • Number of Slides:
      • Description: Defines the number of slides to display at once (for Slider).
      • Usage: Set the number of slides visible in the slider at any given time: "1" or "2".
      • Requirement: Default is "1".
    • 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)

  • Description: The content fields available depend on the selected "Hero Type."
  • Usage: These fields are used to add the actual content (heading, excerpt, image, CTAs, slides) to the hero section.
  • Requirement: Varies depending on the selected hero type.
    • 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 or side-by-side layout.
    • Slides: A list of slides for the hero slider.

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, Two columns, Slider) in the "Hero Styles" field group.
  4. Configure Hero Settings: Adjust the "Hero Height," "Hero Overlay," and other settings in the "Hero Styles" field group.
  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.

Result:

The Hero Banner Block will dynamically render one of the hero templates based on the selected "Hero Type" and settings. The chosen hero template will then display the content you've added in the corresponding content fields.

Preview with image:

hero banner with image

Editor preview:

hero banner acf

Benefits:

  • Flexible Layouts: Supports multiple hero layouts (full-width, columns, slider) through dynamic template loading.
  • 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.
  • Slider settings: The slider settings are dynamically added as classes to the slider container.

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.