EverWeb Widgets

Scrollit

The Scrollit widgets create scroll and stick responsive width, viewport height panels which can be scrolled using a pager navigation, scroll down arrows or vertical swipe. They can be used to create a one page website or a "feature" home page with links to other pages of the site.
NOTE: It is important to read the instruction page before using these widgets - particularly in respect of naming the scroll panels.
Click any widget icon to see the demo …

View CartAdd To Cart

Instructions

The instruction page explains how the panels are named and how to add the extras such as overlay navigation, footer and contact bar.
Since the panels themselves occupy the full height of the browser or device window, these items are placed below a panel in EverWeb but appear as an overlay on the published page.

Banner

The banner loads a full size background image in three sizes for computer, tablet and mobile phone. The overlay can animate in and has options for a heading, text and a CTA style hyperlink which can be configured to open internal or external pages and in a new window if required. It can be used as the first panel seen on page load and be combined with the navigation and contact widgets.

Panel

The panel is used for general content and has options for a responsive image with alt text, a heading, descriptive text and a CTA style link tab which can be configured to open internal or external pages and in a new window if required.
The panel content is centered both horizontally and vertically and has a maximum width control.

Responsive Slider

The responsive slider has a maximum width setting and is navigated using directional arrows on computers and swipe on tablets and phones. The images are lazy loading and there are options for a centered overlay caption and to created the images as hyperlinks. For those who must use autoplay, there is an option to autoplay through the slides and stop at the last one.

Full Page Slider

The slider lazy loads the images and can be used as the first panel on a page in conjunction with the navigation and contact bar widgets.
The slide overlay has options for a heading, descriptive text and a CTA style link which can open internal or external pages.

Image Gallery

The thumbnail grid can be configured for the number of images per row for each device type - computer, tablet and mobile phone. The thumbnails can have an overlay caption which appears on hover on computers and on page load on touch devices. The lightbox slideshow has options for captions and slide counter and for setting the height and width ratios.

Audio MP3

The widget creates a responsive grid where the number of items per row changes depending on the browser or device width. Each grid item has an image, a centered circular audio player and an overlay caption for the song title/artist name.
The player has a play/pause button, a progress bar around the perimeter and an auto pause function.

MP4 Video

The video stage loads a poster image with a large centered play button on page load and prevents the video file from being downloaded until the visitor decides to play it.
There are options for autoplay, initial volume, loop and muted. The "plays inline" function should be selected for a better user experience when the video is played on smart phones.

Vimeo

The video can be played/paused by clicking the poster image or by using the control bar and the stage has the option to add a border.
Vimeo is superior to YouTube in the number of functions and controls available and has built in auto pause so no extra scripts are required.

YouTube

The youtube video loads a poster image with a large centered play button. The video stage can have a border if required for better definition.
All the default options are available such as show related, loop, autoplay and fullscreen. The widget adds a script to pause on player when another YouTube video is played on the same page.

Navigation

The navigation can have up to fourteen links. The last two can be configured to open external pages and in a new window if required. The links are centered in the browser and have variable background opacity.
The link widget is placed below the first full panel on the EverWeb design canvas. It will appear at the top on the published page and can be fixed if a sticky nav is required.

Contact Info

The info bar is placed below a panel on the EverWeb design canvas and will overlay the bottom of it when viewed in the browser. It has options for a phone number which switches to a phone tab on mobile phones, a contact icon which launches a contact for in a modal window and an email icon which has options for adding the email address and subject. The icons are SVGs so the color can be changed.

Footer

The footer is placed below the last panel on the EverWeb design canvas and will overlay the bottom of it when viewed in the browser. It has options for a phone number which switches to a phone tab on mobile phones, the copyright notice with auto update of the copyright year and an email icon which has options for adding the email address and subject. The icons are SVGs so the color can be changed.

© EverWeb Widgets -