EverWeb Widgets

Lazy Load Media

Images make up about 70% of the average web page content and are the main reson why web page download times exceed the recommend download time. Web pages should download in under three seconds and even less for the Home page. Any linger and visitors will abond the site and look elsewhere.
Instead of downloading all the media files when the page is loaded in the browser, lazy loading defers download until the items are just about to enter the viewport as the page is scrolled. This results in a much faster page download time when the page contains several images, a slideshow or videos.
Full width, fixed height Hero style images and slideshows require large image files. Lazy loading is really essential due to the size of high resolution images required for these items.
On demand loading can also be applied to Vimeo and YouTube videos and should be used when there are two or more per page.
This widget pack introduces lazy loading animated layer sliders which are an essential feature of modern web design.
Click any widget icon to see the demo …

View CartAdd To Cart

Animated Content Slider

The full width, fixed height hero slider has two content layers - each of which occupy 50% of the width.
The left layer contains an image which animates in from the left. The right hand layer has options for a heading, text and a link tab and animates in from the right.
The slider can be switched to viewport height to create a splash page by checking a box.

Animated Layer Slider

This hero slider has three layers which animate in from different directions and times. Any of these layers can be turned on/off globally.
The first layer is a caption the second is for an icon or logo and the third creates a link tab which can be confiigured to open an internal or external page in a new window if required.

Animated Hero Slider

The hero slider is full width, fixed height. It is navigated using directional arrows which can be turned off on mobile to be replaced by swiping or can be switched to autoplay.
The centered section has options for adding a caption and/or a link tab. These can be set to animate in if required with controls for time and direction.

Animated Info Slider

The full width, fixed height slider has an info section which can animate in in four directions and has controls for varying the animation delay and duration.
The info section has a heading, text and a link tab which can all be switched on/off globally. The slider is lazy loading and can be switched to viewport height.

Slider

This is a standard slideshow which can be made responsive if required by checking the Full Width box in the Metrics inspector and setting a maximum width.
Navigation is by directional arrows which sit together at the bottom right or by swiping. The images can be configured as links and there is the option to add a caption and style the container.

Carousel

The carousel can be fixed width or responsive with a maximum width setting. The directional arrows sit outside of the container when viewed on a computer or laptop. They disappear on mobile devices to be replaced by finger swiping.
There are controls for setting the number of slides to show and the number of slides to scroll per click.

Banner

The full width, fixed height responsive image has a centered overlay which has options to add an h1 and h2 heading and a CTA style link tab.
The main heading has lots of styling options including adding a text shadow. All the items have options for adding a border and adjusting the background opacity

Images

Using this widget allows lots of images to be inserted on a page without increasing the download time. The lazy loading images have alt text and the option to configure them as links to an internal or external page and to open in a new window.
The centered overlay caption can appear on page load or on hover on computers and on load on mobile devices.

Article

When a whole bunch of items to describe a product or to make news articles are required on a page, it makes sense to create these in an HTML5 article element for superior SEO and efficiency.
The article has a lazy loading image with alt text and hyperlink option, an optional heading a a text block. It can be styled with a border and/or a box shadow.

Product Info

This widget can be used when a number of products, articles or news items are required on one page. The container has a heading with a contrasting background, an image, text description and a CTA style link tab.
Using this widget will result in faster page download and much better SEO. The optional link can be configured as internal or external and open in a new window.

Hero MP4 Video

The widget inserts a full width, fixed height poster image and the MP4 video file is prevented from downloading with the rest of the page content.
To reduce the number of scripts required, the HTML5 video player has a custom javascript to insert a play/pause button in the top right corner and a variable height progress bar at the bottom

Vimeo & YouTube

Vimeo and YouTube videos can really slow a web page download time since the browser has to download the iframe and all its supporting code.
This widget allows 16:9 Vimeo and YouTube videos to be inserted without downloading all the files. The video stage shows the default poster image with a large centered play button.

© EverWeb Widgets -