Page Header

Search SG - Page Header in 53

The Page Header is a large and engaging banner section for your page — a real marquee element — and will often be the first thing a visitor sees when visiting your page.

All-In-One Inbound Marketing Software

Everything you need to launch effective marketing campaigns that make people interested in your business and happy to be your customer. Get a demo and see how you can be even more successful with your marketing.

All-In-One Inbound Marketing Software

Everything you need to launch effective marketing campaigns that make people interested in your business and happy to be your customer. Get a demo and see how you can be even more successful with your marketing.

Image Frame

All-In-One Inbound Marketing Software

Everything you need to launch effective marketing campaigns that make people interested in your business and happy to be your customer. Get a demo and see how you can be even more successful with your marketing.

Feature Checklist
  • Multiple variations
  • CTA(s) included
  • Image capabilities
  • Video capabilities
  • Modal friendly
  • Smart
  • Uses HubDB
  • Requires additional help
Use Cases

The Page Header is arguably the most important element of your page. It sits above the fold as the first thing your visitors will see, so make a good first impression!

Spend some time considering the overall "feel" of this experience. Craft your messaging to be succinct, captivating, and strong (short is good here). Include a few optional CTAs to point your visitors in the right direction off-page. And if you do use imagery here, pick an image that allows your message to really shine.

Guidelines
  • Character count
    • Limit main header to under 40 characters
    • Limit description to around 150 characters
    • CTA text should be 2 to 3 words
  • Image sizing
    • Background images should have a 16:9 aspect ratio (e.g. 1280x720px)
    • Laptop frame option: 800x447px screenshots work best
    • Phone frame option: 298x532px screenshots work best
    • Browser frame option: (see Laptop)
  • Variations
    • Basic: white background, centered heading
    • Fancy: background gradient treatment, left-aligned heading with device frame on right, wavy bottom edge treatment
    • Background images can be applied in most cases, but are optional
    • (Many other combos, but the above depicts both extremes)
  • Things to know
    • Optional items: Subheadline, CTAs, background image, device image
    • Both optional CTAs can be either custom links, or a Product CTA ID can be used (more details in module)
    • The second CTA can be used to play a Wistia, YouTube, or mp4 video in a modal
    • For SEO purposes: since this module uses an H1 element, please use only one per page