EverWeb Widgets

Responsive Modules

The Responsive Module pack contains widgets for adding items that are very often required in addition to the basic items. Thes insclude audio, auto text, contact form comments info footer, interactive and static map, lghtbox image, info module and MP4, Vimeo and YouTube video.
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.

Audio MP3

The audio module consists of an image with overlay caption and an audio play/pause button which doubles as a circular progress bar.
The widget can create a grid with a single item right up to 48. The number of modules per row can be set for each device type.

Auto Text

Text on a responsive website should not have lines longer than about 800px otherwise it becomes difficult for the eye to move from the end of one line to the beginning of the next.
The auto text widget can create auto columns at wider browser settings and then reduce the number gradually for each device type.

Contact Form & Info

This module has a contact form and an info section which side by side on computers. On narrower screens the info slides below the form. The form can be placed either left or right.
The info section has an optional email button and a phone button which appears only when the page is viewed on a mobile phone.

Disqus Comments

Disqus comments are very reliable, free and easy to set up. All that is required is a Disqus account and a "shortname".
The widget has fields for the shortname and also for adding a page ID and URL if there is more than one page with comments.

Info Footer

The Info Footer has options for a heading, three columns, the copyright notice with auto date and a smooth scroll to the top function.
Each column can have an icon like and text. The icons are created using the Font Awesome stylesheet and the columns stack vertically on mobile phones.

Info Map

The interactive Google map has a responsive width and a fixed height which can be set for each device type. There are controls for setting the initial zoom level and the map type.
The map can have a marker or push pin inserted at the center point and the optional info window appears on page load and can be closed.

Static Map

A static Google map is quite often the best option for responsive pages that will be downloaded over wireless cell phone networks.
The image is created by the Google Maps API and has options for a marker and initial zoom level. There is an option to add a link to an interactive version.

Lightbox Image

The image has text wrapped around it on wider screens and switches to full width on mobile devices. The optional caption can appear on hover on computers and on page load on touch devices.
Clicking or tapping the lightbox icon opens the large image in a lightbox window. The large image is responsive up to the width of the image file.

Side Info

The Side Info widgets have an image, heading, text and a CTA style link. The image has alt text and can be positioned left or right.
On computers and tablets in landscape mode, the image and the info section sit side by side. On narrower devices, the layout switches so that the info section sits below the image.

MP4 Video

The responsive video player is centered in the browser with a maximum width setting equal to the width of the video file for best results. The player is prevented from preloading and shows a poster image on page load.
The widget has options for a heading for the video title and text for a description so that the search engines can index the video content using the keywords provided.

Vimeo

The Vimeo video iframe code is inserted by entering the file width and height, setting the maximum width and entering the video ID. The code makes the iframe responsive
The "Auto Pause" control should be used if more than one Vimeo video is inserted on the page so that one stops when the next is played.

YouTube

YouTube videos are inserted in the same way as Vimeo but don't have an auto pause function built into the API. This is added to the widget using tiny jQuery plugin.
Like the Vimeo version, the widget has options for adding the video title and a description using keywords for the search engines.

© EverWeb Widgets -