EverWeb Widgets

Mobile Containers

The mobile container widgets create a fully responsive page when used in conjunction with one of the mobile header widgets and the built in footer.
They can also be used below a fixed height element such as a full width, fixed height image.
Before attempting to use these widgets, please check out the info pages about responsive layout, mobile pages, redirects and testing.
Click any widget icon to see the demo …

View CartAdd To Cart

Text

This is a responsive text block with an optional heading. The font can be web safe or non web safe or Google hosted with a web safe fallback.
Mobile compatible hyperlinks can be created as described in the Info section and styled in the widget settings panel.
The optional footer has controls to add an auto copyright update function and a smooth scroll to the top tab.

Image Text Wrap

The optional heading and first paragraph are inserted before the image. The image is inserted and floated left so that the text wraps around it when the page is viewed in landscape mode.
In portrait mode, the image has 100% width. The real point at which the layout change takes place can be changed in the widget settings.

Lightbox Image or Slideshow

This widget has a similar layout to the text wrap except that the image has a lightbox icon and an optional overlay caption.
When the thumbnail is tapped, a light box is opened. This can either be a single image or a slideshow with captions. Since the large images don't load until the visitor opens the lightbox, this is a very efficient way of showing images on a mobile website.

Image Link Grid

The responsive grid is a better alternative than a slideshow for displaying two or more images on a mobile website.
The grid displays two images, side by side, when viewed in landscape mode and switches to a single column in portrait mode.
The images can have a one or two line caption and can be configured as hyperlinks to create an illustrated navigation.

List

The widget has an optional heading and paragraph which precedes the list.
There is a choice of list style types and the position of the markers can be set to inside or outside.
The list item inset and vertical spacing can be adjusted separately. Items can be easily reordered by ragging them in the widget settings panel Assets List.

Image Gallery

The gallery uses separate thumbnails and large images to create a responsive image grid which opens a lightbox slideshow. The large images have captions derived from the alt text attribute for good search engine optimisation.
The number of images per row shown when viewed in portrait and landscape mode can be varied as can the break point at which the light change occurs.

Lazy Loading Slider

A slideshow with too may images can severely effect page download time. This can be overcome using lazy loading. This means that an image doesn't actually download until it is required for viewing in the slideshow frame.
The slideshow is navigated by swiping and the images can have captions and be configured as hyperlinks if required.
There is no autoplay option since this should be avoided on all websites and never used on a mobile one.

MP4 Video

The video is display using the VideoJS scripts with an addition of some javascript to allow it to be responsive.
The frame loads a poster image and the video file is prevented from downloading until the visitor actually starts it. This is essential for a mobile website since preloading video files use up the visitor's data limits even if they don't watch the movie.

Vimeo

Like the MP4 and YouTube widgets, this one can display a Vimeo video in an HTML5 container along with a optional heading for the title and that all important text description - both for the search engine spiders and the human visitors.
The optional footer allows a fully responsive "movie" page to be created.

YouTube

Hosted videos - like Vimeo and YouTube - use an iframe code with a fixed width and height to display them on a web page. To make them responsive, they are inserted into a container which is made responsive using some CSS magic and an intrinsic aspect ration.
As with the other video widgets, there is no autoplay or loop function since autoplay doesn't work on mobile devices and loop is pointless..

© EverWeb Widgets -