EverWeb Widgets

EverWeb Widgets

For EverWeb Users

Hero Heading

If a page design requires an eye catching heading, this is the way to go. An h1 through h4 heading is inserted with either a solid, gradient or image background in a full width, fixed height container.
The widget uses the Fit Text jQuery plugin to make the text responsive as the browser or device width changes. If viewing this page on a computer, increase/decrease the browser width to see how it works.
Styles
It's important to select the appropriate geading type. In this case, there is an h1 heading in the header so the first example of the Hero Heading is an h2 and the second an h3.
The heading can use a web safe font or a no web safe or Google hosted font with a websafe fallback. Note that there is no control for setting font size since this set by the "Scale" control.
There are controls for font color, style, weight and ltter spacing.
The text can have a shadow with controls for radius, color and blur radius.
Background
The background can be a solid color by setting both colors to the same value. The background gradient option has a control for changing the gradient angle.
A background image can be inserted by checking a back and choosing the image file. Make sure the image is cropped to a suitable size for a full width use. The image used in this demo is 2400px wide to maintain good quality at wide browsr setting.
Scale
The actual size of the heading a full width is determined by the "Scale" control. This is a slider which can be set at any value between zero and 99. The lower the value - the larger the font.

© EverWeb Widgets -