EverWeb Widgets

Hero

The Hero image or banner has become a prominent feature in many websites due to its ability to capture visitors attention and encourage them to click through to other pages of the site.
The banner is situated front and center and should be created as a high impact visual item with descriptive heading and a large CTA style hyperlink to a page with more information or a detailed sales pitch.
With these widgets, the "Hero" concept has been extended to other full width, fixed height items. When set up correctly, these will be responsive down to the width of an iPad in portrait mode thus making the page design more versatile. See the INFO section for how to set up a responsive item.
When used with a slide over content layer, the Hero media widgets can either be fixed in position using the control in the Metrics inspector or be set with a Parallax Effect with variable ratio.
Click the "Hero Demo" icon below to see how the widgets can be combined in a page layout.
Click any widget icon for more info …

View CartAdd To Cart

HERO DEMO PAGE

The demo pages shows how the Hero widgets can be combined and stacked to create a full width design which is responsive down to the width of an iPad in portrait mode.
This saves the time and effort required to create a separate version of the site for tablet devices.
When combined with a fully responsive mobile version of the site using the Mobile widgets, this provides the easiest method of having a website suitable for viewing on all device types.

Header & Horizontal Navigation

A full width, fixed height image with an optional logo and horizontal navigation menu which can be aligned left, center or right and fixed to the top or bottom of the image.
There is a styled h1 heading for the website name, an optional h2 heading for the page name and an optional CTA style link to an internal page.

Header & Vertical Navigation

A full width, fixed height image with an optional logo and vertical navigation menu. The navigation can be positioned either left or right and its position adjusted in relation to the top and left or right edge.
There is a styled h1 heading for the website name, an optional h2 heading for the page name and an optional CTA style link to an internal page.

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 Fit Text jQuery plugin is used to make the text responsive in respect of the font size as the browser or device width changes.

Text & Image

The banner is divided into two sections with an image to the left and text content to the right.
The image has a caption and alt text and can be created as a hyperlink with opacity change on hover.
The text block has a heading, paragraph and a CTA style hyperlink.
The blocks can have a vertical separator and the banner can have top and/or bottom separators.

CTA Links

Full width CTA style inline links with a maximum width setting. The links can be styles with a transparent background and a border and/or box shadow.
There is an option to have the links scroll to a preset point at the top of the browser or device window and then stick so that they always remain in view.

PNG Image Links

Full width image links with a maximum width setting. The links are designed for PNG images but JPEGs can also be used. There is an option to add a box shadow on hover and the optional captions can have a background with adjustable opacity.
The links have the same scroll to fix option as the CTA links above.

Info Links

This is a full width, fixed height container with a maximum width control for creating a responsive item with three blocks. Each block contains an h1 heading, a paragraph for a brief description and a CTA style tab link to an internal page.
Since the widget creates a fixed height object, two or more can be stacked on a page to create a descriptive navigation which encourage visitors to click through to info about products and services.

Map + Marker & Info Popup

The full width, fixed height Google map has controls for setting the map type and the initial zoom.
There is a choice or marker or pushpin with all the default color options.
The info window has a heading and a text box. The window's maximum width can be set and the text can extend to any amount of lines.

Three Column Footer

The full width, fixed height footer has three columns for info, a field for adding the copyright info with an auto copyright date feature and an optional smooth scroll to the top function.
Each column has a heading, a text block and a CTA style link tab. The footer can have a contrasting top border to act as a visual separator if required.

Modules

Three side by side modules - each with image, heading, text and optional info link. The images can be created round or removed by setting their width to zero.
The modules are responsive down to the width of an iPad in portrait mode and can have a transparent background to float them over a full width image.

Transparent Layer

The transparent layer is used to create a slide over effect when use with items like the Hero widgets which have been either fixed in position or have the parallax effect turned on.
The layer is full width with adjustable background opacity and has an optional leading edge box shadow to enhance the slide over effect.

MP4 Video

This widget allows more experienced EverWeb users to insert a full width, responsive MP4 video with a fixed height using some tricky CSS position.
The video is set to autoplay and loop and there is a Play/Pause button which appears when the page is viewed on touch devices which will not autoplay movies and music.

© EverWeb Widgets -