EverWeb Widgets

Popup Map Toolbar

Popup Google Map

The contact bar has an optional phone number which switches to a phone icon on mobile phones, a tab to trigger the popup map and an email link.
The email link inserts the email name, domain name and domain extension in separate boxes. The @ and period are inserted using Javascript and this prevents spammers for harvesting the email address using scraping software.
The phone and email icons are SVGs so their color and hover color can be adjusted. The email icon link can show a title on hover when viewed on computers.
Interactive Google Map
The map has fields for inserting the street address and the initial zoom level. The popup has the options to add a border and for adjusting the spacing above the toolbar and the distance from the left/right browser/device window edge.
Aspect Ratio
The widget has controls for adjusting the map's aspect ratio for computers, tablets and on mobile phones in landscape mode. The default value is 9/16 where the upper value represents the height and the lower one the width.
There is a separate value for phones in portrait mode. The default value is 5/4 which gives good results.

Toolbar Spacer

The toolbar spacer shown further up the page has an image background and shows the optional heading.
The spacer has controls for setting the height on computer, tablet and phone and the image is inserted in two sizes - one for computers and the smaller one for devices with a screen width less than the break point.
The heading has all the styling options and, as can be seen from the example, can use a Google hosted font with a web safe fallback.
Since it has a grid layout, the heading can be inserted at the top, center or bottom by setting the value of the align-self property to start, center or end. The distance from the top or bottom can be adjusted using the control for top/bottom padding.