Building Pages That Work, For ...
Using Components

Hero: Single Image Component

27min

Focused, Mobile Friendly Hero Component with Sub Promotions



How is this component different than the 'Full Width Hero' Component?

While both of these components share some similarities, they are fundementally different. While the 'Full Width' Hero allows you to utilize the entire space of the hero in 1 column, the single image component is based on 2 columns.

This component has a column for all of your content and buttons, and another content for your image. While this may not sound like that big of a difference, from a technical standpoint, they really are.



What Can I Customize?

Basically everything. Customize all the things. Let's break down what each parameter is, how to edit it, and how to make the most of the space.



Component Height

Document image


This option sets how tall the component will be in the browser window.

There are several options available:

  • XSmall
  • Small
  • Medium
  • Large
  • XL
  • 2XL



Background

This is an important parameter, with a few ins-and-outs.

This component allows you a choice between a color background or an image. These also work in concert with each other.



Choosing a background

Document image




  • Background Color
    • This is the background color of the component as a whole. If you select an image, this color will reside behind the image
  • Background Image
    • If you know you'll be using only an image as your background, without fading it back for legibility you can choose this option and select an image.


Image

Images for this component work in concert with the background you've selected above. Let's look at the options we have…

  • Image
    • We can upload an image to our library and use it in our component.
  • Image Opacity
    • This is where the previous 'Background' comes into play.
      • If you choose an opacity that is less than 100%, whatever background color or image you selected in the above parameter will show through.


Eyebrow

Think of this as a subheading

Web design is a little different than writing an essay. In traditional writing, the sub-heading typically lives below the main headline. Best practices for web design, however, have shown the opposite. The subhead lives above the main headline to tease interest.

Document image


You can edit all properties of the 'Eyebrow' those properties are:

  • Eyebrow
    • This is the text that will be displayed on the live page
  • Eyebrow HTML tag
    • This keeps the door open to more deeply customize your SEO. For starters, we recomend leaving this at the default value of H3.
  • Eyebrow Color
    • This is derived from the base colors set up for your site at onboarding. If none of these colors are working, you can select 'Custom' and pick any color you'd like.
  • Eyebrow Font
    • At onboarding, we configure your site to use 2 fonts. Base and Display.
      • Base: the most legible font. Used for body copy and secondary elements
      • Display: Your brand font. This should be used sparingly for visual impact
  • Eyebrow Bold
    • Check this box to bold the Eyebrow line
  • Eyebrow All Caps
    • Google hates when things are typed in all capes. It thinks your yelling at it, and ranks you lower.
    • Checking this box uses code to transform your text to all caps, without being penalized by search engines.


Headline

This works exactly the same as 'Eyebrow'. You'll start to see a pattern in these things. We try to make parameters as similar as possible to lessen the learning curve as much as we can.



Paragraph

Again, follow the same editing parameters. Play around. See what works. If you get stuck, reference the above sections of this doc to learn more.



CTAs

Document image


You can add any number of Call-to-Action buttons on a hero as you need. (we recommend no more than 2)

This whole component is basically useless if a user can't act upon it. The CTAs are your primary buttons. They live right under the text and are the main drivers of traffic for this component.

Within a CTA you can edit:

  • CTA Label - This is what will be displayed on the button itself
  • CTA Link - This is where the button will link to
    • Use relative URLs for the button link
  • CTA Style
    • There are a few visual styles you can pick from.
  • CTA SIze
    • How big should this button be?
  • Use Outline Button
    • You may want one button to be full color, and a secondary button to be only an outline. Use this to build heirarchy between to calls-to-action on your component.

What is a 'Relative URL'?

You may have noticed there is a 'Promo Link' box that asks for a 'Relative URL'

A relative URL is a link from within your site, on the same domain.

For example: A product list page for the category 'Edibles' has a URL of https://demo.greatergreen.gg/products?category=EDIBLES

In this case, the 'Relative URL' is everything after ".gg", or /products?category=EDIBLES



Fine Print

Do you have a disclaimer for this hero promotion? Maybe it has prerequisites, or is only available to certian customer types. Maybe it's a limited time. Whatever it may be, you can add it here.

Document image


The 'Fine Print' parameter uses all of the same text styling options as the headline, eyebrow, and paragraph parameters.



The Promo Bar

Show sub-promos that are secondary or tertiary to your main hero promotion.

This is super useful for evergreen promotions, links to your 'About Us' page, or links to your loyalty program.

These will live in a bar above your main component and allow your user access to deeper pages within your site.

Document image


The 'Promo Bar' paremeter is editable and uses the same base concepts as 'CTAs'

Add up to 3 sub-promo items with ease. Edit their image, headline, copy, and call to action.



It's as easy as that!

Hopefully you're on your way to creating impactful hero comoonents. If you find yourself stuck, or have questions, don't hesitate to reach out to our customer success team.

If you have questions of need help, book a meeting with us.