EverWeb Widgets

ThemeKit M1 Popup Windows

Content for pages viewed on a smart phone should be kept as concise as possible. Many content items can benefit from being offscreen on page load so that the visitor can open them if they want to rather than being forced to scroll past items they are not interested in.
Lightbox items are ideal for optional content and should be considered for extra content with special offers, video, map, a larger version of a thumbnail image, contact form and slideshows.
Control Bar
The full width bar has a content area with a text description and an action tab to open the lightbox. The content area has its own controls for maximum width, font, fallback font, font size, color and for the background color and its opacity.
The action tab "open" icon is an SVG so its color and hover color can be adjusted.
Lightbox
The lightbox overlay has controls for setting the background color and its opacity and for the color of the "close" icon.
The lightbox can be closed by clicking the icon or the lightbox window overlay.
Lazy Loading
As far as Mobile First design is concerned the most important function of these widgets is that - unlike most items of this type - they lazy load the content. Many web designers don't seem to realise that content like YouTube video, Google Maps and so on download at page load even if the visitor doesn;t want to see them!
These widgets prevent the content from downloading until the visitor opens the lightbox. This results in much faster page download in the browser.

Popup Content

Popup Content

The image with alt text, text area, heading, text and link are all optional items.
Click the overlay or close icon to dismiss the popup.

M1 Info

Text & Image Content

The ThemeKit M1 Popup Content widget is the most versatile of the popups. It has checkboxes to turn on each of the items to allow variations in content type.
The items are an image with alt text, a heading, text and an internal/external link with hew window option.

Video Title & Info

Self Hosted Video

Self hosted video is much better than hosted video like Vimeo and YouTube which require a large number of extra server requests. It also allows control over the size of the video file.
The video used in the demo was downloaded from YouTube and converted to MP4 with a file size of 8MB.
The video player has an option for the video title and a brief description which should be used for the benefit of the visitors and the search engines.
NOTE: YouTube videos can be quickly and easily converted to a specific size of MP4 and download download for self hosting. Follow the link below for info …

YouTube Downloader

Hosted Video

The ThemeKit M1 Popup Video widget can play Vimeo and YouTube video simply by entering the video ID.
The video can be set to manual or autoplay when the lightbox is opened and will pause when it is closed.

Interactive Map

Google Map

Maps are useful for displaying the business location even if it is not open to the public. A visitor will tend to trust a business that shows its contact and physical location upfront.
Map Aspect Ratio
Obviously a map needs to have a different aspect ratio when it is displayed on a phone in landscape mode. The M1 Popup Map widget has fields for enetering the aspect ratios. The default is 3/4 for all devices and 5/4 for phones in portrait mode.

Slideshow

ThemeKit M1 Popup Slide

Captions

Optional Links

Slideshow

The ThemeKit M1 Popup Slider has centered captions and optional image links.
The slide transition can be fade or slide and the transition time is set in milliseconds.
The navigation arrows, caption and close icon share the same color. The arrows can be hidden on mobile devices by checking a box and setting the break point.