EverWeb Widgets

Responsive Media Header Widgets

These responsive width, fixed height headers have a full size background image, an h1 heading, an optional h2 heading and a vertical navigation.
A centered play/pause or info button launches various items in a lightbox window.
Click any widget icon to see the demo …

View CartAdd To Cart

Image

The full size background image is loaded in three different sizes for computer, tablet and phone. The h1 heading stretches across the top and has a background with variable opacity. The optional h2 heading sits across the bottom of the image.
The navigation is a separate widget described below.

Navigation

The vertical navigation is placed below the h1 heading and can be located either left or right. When viewed on mobile phones, the navigation relocates to below the header and becomes full width.
The navigation tabs have adjustable vertical spacing and background opacity. The navigation can indicate the current page link text with a different color if required.

iFrame

The header has a centered info button which can be styled for color and hover color and show a title on hover when viewed on computers.
When clicked or tapped, a responsive iframe is opened in a modal window. The iframe content can be an internal or external. There are settings for maximum width and for varying the height ratio on the different devices.

Info Bar

The info bar is an add on widget which is inserted below the header and navigation. It can be arranged as an overlay with transparent background to replace the h2 heading of the header above it by checking a box.
The info bar has options for a phone number which switches to a phone icon on mobile, a scroll down function, a CTA style link and an "Email Me" button.

Info Header

The header has a centered info button which can be styled for color and hover color and show a title on hover when viewed on computers.
When clicked or tapped, an info section is opened in a modal window. The info section is a separate widget which is described below …

Info Modal

The info section which opens in a modal window has responsive width and a fixed height. The overflow is set to scroll so it can have a large amount of content if required.
The options are for any combination of a heading, an image with alt text, descriptive text with the option to add contrasting spans and a CTA style link tab. The link can open an internal or external page and in a new window.

Lightbox Slider Header

This is a two part widget. The header has a centered play button which can be styled for color and hover color and show a title on hover when viewed on computers.
When clicked or tapped, a responsive slider is opened in a lightbox. The corresponding slideshow widget is described below …

Lightbox Slider

The lightbox slideshow has responsive width and its maximum width is determined by the image file width. Navigation is by directional arrows which can be switched to swipe on mobile devices.
The slideshow has image captions which animate up from the bottom and the width and height ratios can be adjusted for dealing with images of varying aspect ratio.

Slideshow

The slideshow has directional arrows and a centered caption at the bottom. The images are lazy loading for better page download efficiency.
Although the slider can autoplay, it should only be used with the option to play once and stop since autoplay sliders should not be used on responsive web pages which will be viewed on mobile devices.

MP4 Video

The header has a centered play button which can be styled for color and hover color and show a title on hover when viewed on computers.
When clicked or tapped, an MP4 video opens in a modal window and will autoplay on computers. There is a control to mute the soundtrack if autoplay is required on mobile devices.

Vimeo

The header has a centered play button which can be styled for color and hover color and show a title on hover when viewed on computers.
When clicked or tapped, a Vimeo video opens in a modal window. It will autoplay when the window opens and stop when it closes.

YouTube

This widget is similar to the Vimeo one and only requires the YouTube video ID to be inserted into the widget settings.
The video can have a border if required with controls for border width and color . The video stage has a maximum width setting.

© EverWeb Widgets -