EverWeb Widgets

Responsive Animated Widgets

The Animated widgets allow more experienced EverWeb users to create headers, banners and images with animated layers or overlays and scroll over or parallax scrolling.
The widget pack includes a suitable navigation for overlaying viewport height items, an auto scroll down link and an info bar.
NOTE: These widgets require EverWeb V2.8 and above. They should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View CartAdd To Cart

Using Responsive Widgets

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

Scroll Over Header

A fixed or viewport height header with background image, optional logo, animated overlay and optional info bar.
The overlay has options for phone, scroll down and email links. Animations can be applied to each item and the background image can be fixed for a scroll over effect. The widget uses a different size of image file for each device type for increased download efficiency.

Parallax Header

The parallax header has all the functions of the scroll over header and adds the ability to show the scroll over effect on mobile devices. It also uses different images for the various devices since a full width image file is far too large to download on mobile devices.
The background image can be fixed for a scroll over or set to parallax scrolling.

Overlay Navigation

The inline navigation can be positioned at the top of a hero or viewport height header. On mobile devices, it switches to a stacked navigation which appears below the header.
It can accommodate up to fourteen links. The last two links can be configured to open external pages and in a new window if required.

Hero Overlay

The hero image is full width, fixed height. Three images are inserted and the code chooses the correct on for each device type - small for phones, medium for tablets and large for computers.
The transparent overlay has an h1 heading and options for text and a CTA style link. Each item can have its own animation type, delay and duration.

Banner

The banner is full width, fixed height and inserts a suitable size image for each device type - small for phones, medium for tablets and large for computers.
There is an h1 heading and optional text and CTA style link. These items can be animated individually and have a background opacity setting to help with visibility.

Image Overlay

Insert a responsive image which is centered and has a maximum width setting to prevent it expanding to more than the image file width which would result in a reduction in the image quality.
The overlay has a heading and options for text and a CTA style link. The overlay animates in when the image is scrolled into the viewport.

Image In/Out Overlay

This is similar to the image overlay except it can be styled with a border and/or a box shadow and has a caption, link and alt text.
The animation can be set so that it fires only once or fires each time the image is scrolled through the viewport. The animation can be turned off on mobile phones if required.

Info Banner

The banner inserts three different image files for the various devices and can be fixed or viewport height.
There are two items which animate in - a small image and a content block which can have a heading, text and a link. These are animated separately and, on mobile phones, reposition themselves so that the image appears above the text block.

Info Bar

The info bar has options for phone number, a smooth scroll down link and an email link. The bar can be positioned below another item or, by checking a box, overlay the item above it as shown in the above example.
The phone number appears when the page is viewed on a computer or tablet. On smart phones, it switches to a phone icon for dialling the number.

Smooth Scroll Down

The centered chevron icon be placed below large hero items to smooth scroll down to the next item. The anchor is built into the link widget.
By checking a box, the scroll down can be positioned to overlay the bottom of the item above. Both the background and the icon background can be adjusted for color and opacity.

Layer Banner

The banner uses three image files for maximum download efficiency in the various devices. It has a fixed height which can be changed for mobile devices.
It has four layers which can animate in separately with a different animation type, delay and duration. The layers are h1 heading, text, icon and a CTA style link.

Parallax Scrolling Image

The parallax image widget can be used on its own or in conjunction with the parallax header to create a full page parallax layout.
The overlay, heading, text and link animate in separately and can be set to animate only once or every time they enter the viewport. The animation can be turned off for phones if required.

© EverWeb Widgets -