Hero Header

The hero image has three overlay items - a transparent layer that animates over the image, a text block with outline animation and a heading with optional logo.
Image
The images are available in three different sizes - one for each device type. The images used in this page were cropped to 1600px, 1200px and 800px respectively before importing into EverWeb.
Each image has a control for setting the fixed height. When the page is viewed on a mobile phone in portrait mode the image fills the height of the screen.
Heading
The heading can overlay at the top or bottom and the text can be aligned left, center or right. There is an option for a logo which is positioned to the left.
The font can be web safe or non websafe or Google hosted with a web safe fallback. There are controls for the font size, weight, style, color, letter spacing, padding and text align.
The background has controls for adjusting the color and opacity.
Overlay
The optional image overlay has controls for adjusting the background color and its opacity. A fade in animation can be turned on by checking a box and entering the animation time and delay in seconds.
Text Area
The text block has a heading and a paragragh. It is vertically centered and can be positioned left, center or right when viewed on computers. The horizontal position is determined by column span so for "left" select "1/3", center "2/5" and for right select "4/6" from the drop down.
On mobile devices the text block is centered horizontally.
The animation which draws a line around the text is optional and has controls for settings the width, color and animation time in milliseconds.

EverWeb Widgets

Hero Header

Hero Header

Navigation