Hero: Full Width Component

create impactful hero components that have several promotions the 'full width hero' component is a very powerfull marketing tool 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 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 this option sets how tall the component will be in the browser window there are several options available xsmall small medium large xl 2xl stack 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 stacked on mobile text position this parameter sets the the position of where the entire text and call to action block will reside over your background you have 3 options left center right text alignment should your text be centered or right aligned? 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 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 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 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 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 https //demo greatergreen gg/products?category=edibles in this case, the 'relative url' is everything after " gg", or /products?category=edibles https //demo greatergreen gg/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 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 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