EverWeb Widgets

Tel: 012-345-6789

Viewport Height Media Header

All the media header widgets have a viewport height option. This is selected by checking a box and sets the height to 100vh. This means that the item will fill the browser or device window - no matter what size it is.
Those who are used to creating fixed width websites using pixels as a unit of measure will probably be unfamiliar with using percentages and viewport units.
Viewport Unit
A viewport unit is similar to a percentage in that it is relative unit of measure rather than an absolute one like a pixels. Using relative units is a requirement for laying out the elements in a responsive web design.
A viewport unit is equal to 100th of the screen or browser width or height.
Viewport Height (vh) is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
Viewport Width (vw) is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.
By setting the header at 100% in width and 100vh in height, it fills the browser or device window.

Media Header Info Bar

The Info Bar widget is an addon which is inserted below the header on the EverWeb design canvas. By checking a box it can be moved up to overlay the bottom of the header image. In this case, the header's optional h2 heading is turned off and the info bar replaces it.
The bar has options for a phone number which changes to a phone tab on mobile phones, a scroll down icon or CTA link tab and an email icon. These items are vertically centered in the bar so that the height can be changed if required. The icons use SVG files rather than PNG images for better performance and the ability to change the color.
Phone
The phone number is displayed at the left and can use a web safe font or a non websafe or Google hosted font with a web safe fallback. There are controls for the font isze and color and phone icon color.
Scroll Down
The smooth scroll down to the next section has a chevron down icon which can be adjusted for color. There is a field for adding a title which will show on hover when the page is viewed on computers.
The widget adds the jQuery plugin which executes the scroll down action and adds the code for the anchor.
CTA Link
The CTA link can be inserted in the center as an alternative to the scroll down. It can be configured as an internal or external link and open the linked page in a new window if required.
The link can be styled for font size, color, hover color and background color and its opacity. There are controls for border with, color and radius.
Email
The email link has fields for the email address and subject and can show a title on hover when the page is viewed on computers. The "envelope" icon has a control for setting the color.
Overlay
The last control is a checkbox which moves the info bar up so that it overlays the bottom of the header image.
The info bar can also be used as an extra function which sits below the item above if the box is not checked. In this case, the background opacity slider can be set to 100% to create a solid background color.

© EverWeb Widgets -