Hero: Single Image Component

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 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 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