EverWeb Widgets

Responsive Modules 3

The second pack of responsive modules includes time delay popup windows, info footers, image zoom in, a slide in sidebar navigation and header, sidebar news/blog post list, an events module and a cookie alert notice for keeping you website legal.
Click any widget icon to see the demo …

View Cart Add To Cart

The image appears on page load after a preset time delay. The image is responsive up to the maximum width setting which stops it spreading out too wide. The image has alt text, an optional centered caption and can be configured as a hyperlink.
The background overlay can be adjusted for color and opacity and the fade in and fade out animation times are adjustable.

The info window popups up on page load after a preset time delay. The info window has an optional heading, a text block and an optional CTA style link tab. The link can be configured to open internal or external pages and in a new window if required. The background overlay can be adjusted for color and opacity and the fade in and fade out animation times are adjustable.

The popup scroll info window is similar to the info widget above except it can have a preset height and the overflow content will scroll. The "close" tab is hidden on page load so the visitor is forced scroll through the content before they can dismiss it. It can be used for info that visitors should be aware of before proceeding. The "close" tab is at the bottom right and there is an option for an info link to the left.

The footer has an optional heading, a smooth scroll to the top chevron icon, up to 48 links arranged in auto columns and a copyright notice with an option to auto update the copyright year. The iink tabs are arranged in three columns when viewed on computers, two on tablets in portrait mode and one on mobile phones. There are options for adding a phone number/phone tab and an email tab.

The footer has three areas that are displayed inline and then switch to being stacked vertically when viewed on mobile phones. The one on the left has an email icon and an optional phone number which switches to a "Call Me" phone icon on mobile phones. The center section has text and the copyright notice. The right side has a smooth scroll to the top icon and an optional link.

Inner zoom on an image using hover on computers and stab and drag on touch devices like the iPad and iPhone. This requires two images - one to be shown on page load and another larger one for zooming in. The image is inserted in an HTML 5 figure element and has alt text for the search engines and an optional caption inserted in the <figcaption> element.

Inner zoom on a selection of images using hover on computers and stab and drag on touch devices like the iPad and iPhone. This requires three images - one for the thumbnail, one to be shown in the viewbox and another larger one for zooming in. The widget can accept between two and eight images. There is an optional spyglass icon which appears at the top right of the image.

The Responsive SB Header works in conjunction with the Responsive SB Nav Right widget. It has an h1 heading for the website name, an option for a logo to the left and a "hamburger" icon for triggering the slide in menu.
The icon tab has controls for color, background color and its opacity and border radius.
The header can be made sticky by checking a box.

The slide in navigation works in conjunction with the Responsive SB Header widget which contains the icon tab to trigger the navigation.
It can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.

The main section has options for an image, heading text. When viewed on computers, the sidebar has the same height as the main content and the overflow scrolls.
The sidebar can accommodate up to 48 items. Each item has an image, a heading, an optional span for price/date, text and an optional CTA style link tab.

Each event has a label with an optional marker, title, location, date/time, an optional image with alt text, a text block for the event description and a link bar with SVG icon links with options for email, phone and info. Both the venue and the time slots can have a contrasting color if required.
The image is floated left when viewed on computers and tablets so that the text wraps it.

The alert notice for complying with the data protection laws can be very annoying and intrusive. This one attempts to overcome this by having a gentle fade in on page load and the ability to position it anywhere in relation to the top/bottom and left/right. Placing it at the bottom right of the browser or device window is the most unobtrusive position and makes it easy to dismiss at the visitors convenience.