BANC

Header Block

This document describes how to use the Header Block from the perspective of a frontend editor, such as the WordPress block editor.

Block Overview

The Header Block is a versatile content block designed to create prominent header sections on your website. It allows you to display a heading, a short description, and multiple call-to-action buttons, all within a customizable layout and style.

Content Fields

Heading

  • Description: The main heading for the header block. This should be a concise and impactful title that grabs the user's attention.
  • Usage: Enter the main heading text here. This will be displayed as an <h2> tag on the front end.
  • Requirement: Optional. If left empty, no heading will be displayed.

Excerpt

  • Description: A short description or summary of the content.
  • Usage: Enter a brief overview or introduction to the main content. This is typically displayed below the heading.
  • Requirement: Optional. If left empty, no excerpt will be displayed.

Call-to-Action Buttons (CTAs)

  • Description: This field allows you to add multiple call-to-action buttons to the header block.
  • Usage: You can add multiple buttons, each with its own link, text, and style.
  • Requirement: Optional. If no buttons are added, no buttons will be displayed.
  • Sub-fields:
    • URL:
      • Description: The link where the button should take the user.
      • Usage: Enter the full URL (e.g., https://www.example.com/page).
      • Requirement: Optional. If left empty, the button will not be displayed.
    • Title:
      • Description: The text displayed on the button.
      • Usage: Enter the button text (e.g., "Learn More", "Contact Us").
      • Requirement: Optional. If left empty, the button will not be displayed.
    • Style:
      • Description: Choose the style of the call-to-action button.
      • Usage: Select from available styles (e.g., "Plain", "Outline", "Text").
      • Requirement: Optional. If left empty, the default style will be applied.
    • Color:
      • Description: Choose the color of the call-to-action button.
      • Usage: Select from available colors (e.g., "Primary", "Secondary", "Tertiary").
      • Requirement: Optional. If left empty, the default color will be applied.
    • Hover Effect:
      • Description: Choose the hover effect of the call-to-action button.
      • Usage: Select from available hover effects (e.g., "Clear", "White Background").
      • Requirement: Optional. If left empty, the default hover effect will be applied.

Style Options

Position

  • Description: Controls the positioning of the block.
  • Usage: Choose how the block should be positioned on the page (e.g., "full-width", "left", "right").
  • Requirement: Optional. If left empty, the default position will be applied.

Spacing

  • Description: Controls the spacing around the block.
  • Usage: Choose the amount of padding or margin around the block (e.g., "small", "medium", "large").
  • Requirement: Optional. If left empty, the default spacing will be applied.

Background

  • Description: Controls the background color of the block.
  • Usage: Choose a background color for the block.
  • Requirement: Optional. If left empty, the default background will be applied.

Result:

Preview with image (following with List = Grid type):

header-block with image

Editor preview:

header-block acf

Customization

You can further personalize the Header Block by:

  • Adjusting the Heading and Excerpt: Change the heading and excerpt to match your content.
  • Adding Multiple Call-to-Action Buttons: Add multiple call-to-action buttons to guide users to specific pages or actions.
  • Customizing Button Style, Color and Hover Effect: Select a style, color and hover effect for each call-to-action button.
  • Customizing the Layout: Use the style options to adjust the position, spacing, and background of the block.

Benefits

  • Clear Communication: The block allows you to present a clear message with a heading and a short description.
  • User Engagement: The call-to-action buttons encourage user interaction.
  • Customizable: The block's layout and appearance can be customized to match your website's design.
  • Versatile: The block can be used in many different ways.

Conclusion

The Header Block is a versatile tool for creating engaging header sections on your website. It's customizable, easy to use, and effectively highlights key information and calls to action.