Skip to content
Auto Genius Help Center home
Auto Genius Help Center home

Hero Section

Use the Hero Section for the primary banner at the top of a page. It sets the first impression and usually contains your main headline and top call to action.

Best use cases

  • Home page banner
  • Landing page headline and offer
  • Brand or model introduction

What you need before you start

  • A background image, SVG, or video suitable for full-width display
  • Your headline and supporting copy
  • Optional primary and secondary CTAs

Fields and how to fill them

Advanced mode

Hero can be configured in a simple mode or an advanced mode.

  • Enable Advanced Mode: turn on only when you need specific height or positioning controls.

Content

  • Content: the text shown on top of the background media.

Writing tips:

  • Use a short headline first, then a supporting line.
  • Keep the hero copy focused on one message.

Layout controls (advanced mode)

If advanced mode is enabled, set:

  • Height: 100%, 80%, or 50% of the viewport
  • Content horizontal position: left, middle, or right
  • Content vertical position: top, middle, or bottom

Practical guidance:

  • Use 100% for dramatic home page heroes.
  • Use 50% for internal pages to keep content above the fold.

Colors

  • Background color: shown behind the media and during loading
  • Text color: controls hero text legibility

Best practice:

  • Set text color intentionally. If readability is borderline, choose a higher contrast text color.

Background media (required)

  • Background media: the full-width background.

Media tips:

  • Choose imagery that still looks good when cropped on mobile.
  • Set alt text for images.

CTAs

Hero supports a primary CTA and a secondary CTA.

For each CTA:

  • Turn it on
  • Set a short label
  • Choose a variant
  • Choose a link destination

CTA tips:

  • Use one clear primary action.
  • Add a secondary CTA only when it supports the same intent.

Validation and common issues

  • Background media is required. Publishing is blocked if it is missing.
  • If a CTA is enabled, make sure the label and link are filled in.

Recommended configurations

  • Sales landing hero: headline, short supporting line, one primary CTA
  • About page hero: shorter height, content aligned left, no CTAs or one secondary CTA
Powered by Plain