Hero: Full Width Component
With this component, you can can create beautiful full width imagery that has several marketing calls-to-action on top of it. We know that in ecommerce, above-the-fold content really is king. With this component you can easily create several entry points to any area of your Greater Green website.
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 is a feature for mobile optimization. When set to 'On' the text you create will appear in a box below the image on mobile devices.
When using 'Stack' it's important to consider the 'Background' property as well.
- When 'Stack' is turned on, the color you choose for 'Background' will be the background color of the text box for the component on mobile when they are stacked.
This parameter sets the the position of where the entire text and call to action block will reside over your background.
- Left
- Center
- RIght
To get the most distance out of this component, we offer lots of text options. This parameter, when paired with 'Text Position' will allow you the freedom to build a wide variety of visual styles and page layouts.
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.