EverWeb Widgets

Hero 2

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.

Hero Image

The widget inserts a full width, fixed height image and has an optional text overlay. The overlay is centered both horizontally and vertically and has options for a heading, info text and a CTA style internal link.
The heading has some extra styling options which include letter spacing and adding a text shadow.
There is an option for adding parallax scrolling when the widget is used with a slide over layer.

Pager Slider

The slideshow has a control area beneath the slide stage so that the controls don't sit over the slides. The pager and the directional arrows can be turned on individually and can be customised for color.
The slider can be set to autoplay with adjustable slide and transition times and can have a transparent overlay which disappears on hover.

Overlay Banner

The full width, fixed height image creates a hero banner with a styled, overlay h1 heading. There is an option to add another heading and a CTA style tab link.
The overlays can be styled for background color and opacity with controls for border width, color and radius. Optional top/bottom separators can be added if two or more banners are stacked vertically.

Text Overlay Image

The full width, fixed height image has a maximum width settings and a 50% transparent overlay which can be positioned to the left or right. The overlay becomes full width when viewed on tablet devices.
The overlay content has options for a heading, descriptive text and a CTA style link which is configured to open an internal page.

Text Panel

When viewed on computers, the panel occupies 50% of the area and the image can be positioned left or right.
On tablets, the panel background has its opacity adjusted and positions itself over the image.
The panel has a heading, text and an optional CTA style link tab which are vertically centered with adjustable inset from the panel edge.

Animated Banner

The banner has options for a logo, h1 heading for the website name, h2 heading for the page or subject name, a CTA style internal link and a smooth scroll down the page chevron.
The logo animates in to the left and top while the headings and link animate in to be vertically centered.
Animation type, delay and duration can be set individually for each one.

Image Links

This full width, fixed height banner can hold from two to six image links to internal pages. The images have alt text and a caption and the horizontal spacing can be adjusted.
The images can be styled with a border and/or box shadow. There is a control to turn square images round or allow the box shadow to conform to a round image.

Overlay Slider

The slideshow can be autoplay or manual play using large pager dots.
The fixed overlay content consists of a logo, an h1 and an h2 heading. The logo is placed in relation to the top and left of the images and the headings are centered and can be positioned in relation to the top.
The heading containers have adjustable background opacity and the slider can have a bottom separator if required.

Animated Layer Slider

The slideshow can be manual with directional arrows on hover or pager dots or autoplay. It can also be navigated using grab and drag on computers and swipe on mobile devices.
The captions and CTA style hyperlinks animate with an adjustable time delay and position themselves in relation to the top and left of the image using a percentage value.

Carousel

A full width, fixed height image carousel with options for manual play using directional arrows or autoplay with variable slide and transition times.
Each slide can have an info overlay with caption and/or description. There is an optional info link which can be configured to link to internal or external pages.

Ken Burns Slider

A full width, fixed height autoplay slideshow with a Ken Burns effect which can also be used as a full size background slider. The slider options are for slide time and transition time.
The slider can be used as a full width banner or can have transparent items overlayed on it such as the Hero Module widget or the Hero Heading.

Image Scroller

The full width, fixed height image scroller can be used for displaying products. Each image has a caption and is configured as a hyperlink.
The scroller can run continuously with pause on hover or slide and pause for a predetermined time. The number of images to scroll can also be set.

© EverWeb Widgets -