Hero: Single Image 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.
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.
There are several options available:
- XSmall
- Small
- Medium
- Large
- XL
- 2XL
This component allows you a choice between a color background or an image. These also work in concert with each other.
- 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.
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.
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.
- 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.
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.
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.
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.
- 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.
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
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.
The 'Fine Print' parameter uses all of the same text styling options as the headline, eyebrow, and paragraph parameters.
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.
Add up to 3 sub-promo items with ease. Edit their image, headline, copy, and call to action.
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.