Full Width Header

The full width responsive header has options for a gradient background and a separator. There is an h1 heading for the website name, an optional h2 heading for the page name and a logo which can be situated at the left or right.
There is an optional info box which can also be placed left or right. It has options for adding phone numbers, an email link and an info link to open any page of the site such as the contact form.

Full Width Footer

The full width responsive footer can have a solid or gradient background, a separator, logo link, smooth scroll, back to the top function and a centered text area for the copyright and other info.
There is a checkbox to auto update the copyright year.
The footer can be made sticky so that it always remains in view if required.

Search Buttons

These are used to open the page with the custom website search form. The button can be either an icon or an iOS style button for use on the mobile version of the site.
The icon button has a hover option and the mobile button obviously doesn't.
The search button links have a field for entering title text which will appear when the button is hover when viewed on computers.

Custom Website Search

The widget inserts a search form which uses a Google Custom Search. This differs from the standard search in that it opens the search results on the same page as as the search box so the visitor never leaves the site.
It is necessary to have a Google account to set this up. Ideally it should be one specifically for the website which will also be used for the email address, form reCaptcha and entering and updating the sitemap.

Social Media Links

Social media links using the FontAwesome icons which can display horizontally or vertically. The tabs can be square or round and show a box shadow on hover if required.
The links can be fixed and stuck to the top/bottom or left/right of the browser window.
The email share link has fields for subject and body content and can incorporate a hyperlink.

Cookie Warning Bar

If a website uses cookies or analytics code such as Google Analytics and StatCounter and is available to visitors in the EU, it must have a warning notice or have analytics disabled.
The bar appears on page load - fixed to either the top or bottom of the page. It has warning text and an "Accept" button. There are two more optional buttons - one for sending visitors to the website's cookie policy page and the other for dismissing cookies and disabling analytics.

Password Protect A Page

A simple password form which requires the correct entry before visitors can go to a page of the site.
The form has fields for entering the text, a password, the button text and a failure alert notice.
The page link can be internal or external so the form can be used to protect a page on the same or a different website.

Transparent Overlay

A full width, variable height overlay which can be used to slide content over fix items like a full width fixed height image. The example page shows it being used with the Hero Slider.
There are controls for background color and opacity and to add a leading and/or trailing edge with adjustable width and color.

Audio MP3 Player

An MP3 audio player with a play/pause button which is suitable for use on both the full site when viewed on tablets and the mobile version.
The player prevents preload so several can be used on a page without effecting the download time.
The button can be round or square with options for play/pause colors, background transparency and hover box shadow.

MP4 Video

Insert an MP4 video using an HTML5 video element with options to make it responsive and to style the container with padding, background, border and/or box shadow.
The player has options for a poster image, prevent preload, muted, loop and autoplay.
When used with a poster image and preload prevented, the page will download a lot faster in the browser.

VideoJS MP4

This widget inserts a poster image and an MP4 video file using the VideoJS script to create uniform controls in all browsers and device types.
Additional javascript calculates the intrinsic aspect ratio from the video width and height so that the container can be made responsive by using the Full Width control and setting a maximum width.

Vimeo

Insert a Vimeo video by entering its ID number. Make it responsive by checking the Full Width box, setting a maximum width and entering the intrinsic aspect ratio.
Options for show/hide the title, byline and fullscreen button, change the control colors and autoplay or loop.
The Vimeo player has a built in auto pause function.

YouTube

This widget is very similar to the Vimeo one and only requires the YouTube ID number to be inserted.
It too can have the container styled with padding, background color and opacity and a border and/or box shadow with radiuses corners if required.
Full width and responsive options are available.

YouTube Auto Pause

This is a version of the YouTube widget for use when two or more videos are inserted on a page.
The widget inserts jQuery, connects to the YouTube API and insets a script to pause a video player when another is played.
There is no separate demo for this player as its appearance and set up are the same as the one above.

EverWeb Widgets

Website Elements 2