EverWeb Widgets

Responsive Grid Layout EZ IN Animated Widgets

These smooth, ease in animations on scroll look much more professional and up to date than those created by the animate.css stylesheet used for the EverWeb default animations.
In most cases, the animation can be set to occur only once or every time the item enters the viewport. By default, the animations are prevented when the page is viewed on mobile phones. This can be overridden by chckinga box in the widget settings
Click any widget icon to see the demo …

View CartAdd To Cart

Heading

The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
There are controls for adjusting the font size, mobile size, color, font weight, font style, letter spacing, mobile spacing and for adding a text shadow.
The animation direction is selected from up, down, left or right

Float In Hero Image

The image animates in from the center out and has an overlay with a centered h1 heading. The images are inserted in two sizes - one for computers and the other for mobile touch devices.
The heading animates in from the top and has a soft bounce landing. The image scales up and can also be rotated in for a more dramatic effect.

Hero Image

The image animates in from the left, right, top or bottom and has an overlay with a centered h1 heading. The images are inserted in two sizes - one for computers and tablets in landscape mode and the other smaller one for tablets in portrait mode and mobile phones.
The overlay has a grid layout and the heading is centered both horizontally and vertically inside it.

Image

The image is full width, responsive with a maximum width setting and centered in the browser. It is inserted in an HTML5 figure element with alt text for the search engines and a slide up caption.
It can animate in up, down, left or right. The animation can occur once or every time it enters the viewport and can be prevented from firing on mobile phones.

Text

An article element has an h1 heading, a paragraph and an optional CTA style link. The link can be configured to open internal or external pages and in a new window if required.
The item can animate in up, down, left or right. The animation can occur once or every time it enters the viewport and can be prevented from firing on mobile phones.

Two Images

Two images - each in an HTML5 figure element with alt text and slide up caption - can animate in from different directions. The images can animate in up, down, left or right.
The animation can occur once or every time it enters the viewport and can be prevented from firing on mobile phones.

Text & Image

The widget has an HTML5 figure element with an image with alt text and slide up caption. This is paired with an article element which has an h1 heading, text block and an optional CTA style link which can be configured to open internal or external pages and in a new window if required.
Both the image and the text block are vertically centered in the container.

Full Height Video

Background image or video should not be used on pages that will be viewed on mobile phones. This widget creates a full width, responsive video that fills the height of the viewport - rather than the browser background.
It animates in from the center outwards and has an overlay with a soft landing animation. The video is set to autoplay so the soundtrack is automatically muted.

MP4 Video

The MP4 video is inserted with a poster image to display on page load and the video is prevented from downloading until it is played for after page download.
The video title animates out after a time delay and the video can animate in from the top, bottom, left or right. There is an option to add a border to the video stage.

Vimeo & YouTube

Vimeo or YouTube videos are inserted using an intrinsic aspect ratio container to make them responsive. The video is inserted by entering just the ID.
By default, the video stage is set up for a standard 16:9 aspect ratio. This can easily be changed to suit older files with a 4:3 ratio or HD video with a 21:9 ratio.

Slideshow

The slideshow last loads the images which have options for captions and/or to be created as hyperlinks to internal or external pages. It is navigated using directional arrow or grab and drag on computers and by swiping on touch devices. The slider is centered in the browser with a maximum width setting and can animate in up, ordown or from the left or right.

Heading & Navigation

This can be placed anywhere in the stack of widgets on the page. It can be inserted below a hero item on the EverWeb design canvas and made to overlay it at the top when the page is published by checking a box.
Checking another box makes it sticky by setting its position to fixed. The widget has options for a logo and/or a heading and there is a "hamburger" icon on the right to open the navigation.

© EverWeb Widgets -