EverWeb Widgets

Hero Banner

Once a visitor has landed on the home page, the next task is to grab their attention and get them to quickly find the info they want.
A successful home page design has a prominent and easy to use navigation, a logo to emphasise the brand, an eye catching message that clearly states what you want them to do and the essential call to action (CTA).
The primary CTA should direct the visitor to a page with the item or info indicated by the the message.
An alternative to the primary CTA is a scroll down button to take the visitor to to the primary message situated further down the page. This can also be used for a secondary call to action for those who don't want to take the primary action.
This needs to be done with simplicity. Too many items and/or choices will overwhelm the visitor and cause them to leave in frustration.
Successful modern web designers are using the HERO banner to grab attention and increase click through and purchase rates. The banner is full width responsive with a fixed height and content can be an image with info overlay, text columns, image links or a slideshow. It is important to resist using an autoplay slider as this has proved to irritate or confuse visitors and cause them to lose sight of their primary purpose.
HERO Banner
The widget creates a full width, fixed height hero banner with an h1 heading, optional h2 heading, a CTA style internal link and a smooth scroll down chevron tab.
The items are centered both horizontally and vertically using some CSS magic and there is a control for adjusting the vertical spacing of the individual items.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
It can have a top and/or bottom separator to provide visual separation and two or more can be stacked to provide a high impact navigation.
Image
The image should have a high aspect ratio and have sufficient quality when viewed on wide screens. The image used in the demo is 2000px wide. If two are more are used on the same page, the image size should be kept as low as possible without compromising quality too much.
Headings
The h1 heading has controls for font size, letter spacing, color, text shadow radius and color, font style and weight and background color and opacity. The container can be styled with padding, border width, color and radius.
The optional h2 heading has all the same styling options apart from the text shadow.
CTA Link
The link tab has controls for font size, color, hover color, background color and opacity with adjustable padding and border width, color and radius.
Scroll Down
The smooth scroll down to an anchor link can be used to quickly get the visitor to a primary message or a choice of destinations using an item like the Hero Image or Info Link widgets.
The link uses a chevron down icon created using CSS so that the color can be changed on hover. It must obviously be used in conjunction with one of the anchor target widgets.
Parallax Effect
The banner has an optional parallax effect which requires checking a box and setting the "Scroll Ratio". This allows the content below to scroll over the slider at a different speed from that of the slider.
The lower the value for ratio - the slower the speed of the slide over layer.
See THIS page for how this works with a slide over transparent layer.

© EverWeb Widgets -