EverWeb Widgets

EverWeb Elements 3

Website elements for adding extra features and alternative backgrounds.
Click any widget icon to see the demo …

Date & Time

The widget displays a digital style display with date and time. Either the time or date or both can be selected. The position of the date and time can be switched.
The clock numbers and the date can have contrasting colors and the container can be styled with a radiused border and/or a box shadow.

Countdown Timer

The countdown timer will display the number of days, yours, minutes and seconds until a preset time and date are reached. It can be set to several years in advance if required.
The numbers and the text labels can be styled with contrasting colors and the container can be styled with a border which can have radiuses corners.

Mini Audio MP3 Player

This is a very compact audio MP3 player which expands on click to show functions such as track info, elapsed time, volume bars and rewind. Several can be placed on a page so that one stops when another is started.
There are options for setting the initial volume, the number of volume bars, autoplay, loop and a drop down for choosing one of the six available colors.

Line & Theme Break

In HTML5, the <hr> element not only acts as a horizontal rule but signifies a change in topic or theme to the search engines. The widget adds the facility to style the <hr> element.
Horizontal lines can be created and styled as solid, dashed, dotted or double and have arrowheads at each end. The line can be responsive with a maximum setting and also has a percentage width setting.

Contact Form

The contact form has fields for name, email address and a text block for more info which is adjustable in height. There is an optional field for phone number.
The form can be styled and has options for adding a fieldset and a legend if required. The submit/send button can be aligned left or right.

Signup Form

The signup form is used to gather info for newsletter or blog subscribers and has fields for name and email and a submit button. There is an optional field for instructive text.
The form can be styled and has options for adding a fieldset and a legend if required. The submit/send button can be aligned left or right.

Auto Columns

CSS columns allow the text to flow one to the next automatically to create a newspaper style layout. The Auto Columns widget uses percentage widths for the columns so that the item can be made responsive.
There are controls for column count, gap and rule. The column count can be reduced when the page is viewed on a tablet or a smart phone to two and one respectively.

PDF View & Download Links

Multi page PDFs are not very easy to display on a web page and almost impossible to display as a responsive item. The easiest solution is to provide a link to display the PDF in the browser and let it handle the problem or to provide a download link.
The PDF link has a text description and two optional icon links - one for "view" and the other for "download". The view option can also open the PDF in a new window

PDF View & Download List

This widget has the same functions as the PDF Links widget and adds the ability to create a list of any amount of files up to one hundred.
The list items can have a separator line if required and the container can be styled with a border and/or a box shadow.

Closable Note

The note has an optional heading and CTA style link tab and text content.
It has the option for a close function which operates by clicking an "X" button using a jQuery plugin.
The note can be styled as a sticky with controls for adding the box shadow and note rotation. It can have the appearance of a hand written note by using a suitable Google hosted font.

Radial Background

The radial gradient function in CSS creates a gradient of four colors radiating from the center of the browser outwards.
The widget allows a full width background to be set up with controls for the four colors and their color stops which are expressed as a percentage.

Tiled Background

Background images are really not a good idea since they have a large file size, take a while to render in the browser and slow page download.
An alternative is to use a tiny image repeated on the X and Y axis to create a background effect texture which overcomes the download speed problem.

© EverWeb Widgets -