Skip to content

Build Your Website With Ease

Discover The Powerful Website Builder That Makes Struggling To Build WordPress Sites A Thing Of The Past

Get Started Live Demo

Banner

The Banner block is a hero/CTA section with optional background image or video, flexible layout controls, and typography overrides.

Initial Colours and Settings

All blocks initially start off by inheriting values from the customizer. This means that you might start off with dark text or text that is barely visible. But everything can be adjusted on the block.

The banner block inherits colours and spacing values from the customizer.

Customizer presets

  • Block spacing
  • Theme palette

Those values are then overridden on the block to suit. You can keep them as global values and let the customizer do its thing.

What It Includes

  • Pre Heading field
  • Heading field
  • Short description field
  • Inner content to allow for more blocks to be added, buttons for example

Layout Controls

  • Inner spacing (Top/Bottom): Global / Small / Medium / Large
  • Inner spacing (Left/Right): Global / Small / Medium / Large (only available in compact mode)
  • Content alignment: Left / Center / Right
  • Top margin: Use global / None / Small / Medium / Large
  • Bottom margin: Use global / None / Small / Medium / Large
  • Height (Mobile): Auto / Small (20rem) / Medium (30rem) / Large (40rem)
  • Height (Desktop): Auto / Small (20rem) / Medium (30rem) / Large (40rem)
  • Center content vertically: (only when a fixed height is set)

Background Controls

  • Background type: None / Image / Video
  • Image: choose media, set position and size
  • Position: Center, Top, Bottom, Left, Right, corners
  • Size: Cover / Contain
  • Video: paste a direct video URL (.mp4/.webm) or YouTube URL
  • Overlay opacity: 0–100% (improves text readability)

Video behaviour

  • Mobile: only the poster image is shown
  • Desktop: YouTube iframes are injected lazily when in view
  • For best performance, use a local video file

Typography Controls

  • Heading tag: H1 / H2 / H3
  • Heading size: Theme default, Small → 4XL
  • Body size: Theme default, Small → 4XL

Colour Controls

  • Heading text color
  • Body text color
  • Background color

Tips

  • Use H1 only once per page for SEO.
  • For full‑bleed heroes, set block alignment to Full Width.
  • If you want a tight hero, set Top/Bottom margin = None and use block padding instead.