EverWeb Widgets

Responsive Social Header

Sticky Header + Social Header

Hero Image

This Hero style (full width, fixed height) image is inserted in two sizes - one for computers and tablets in landscape mode and the other for tablets in portrait mode and mobile phones. The images are inserted using the HTML5 <picture> element which allows the use of different sizes via media queries and is better than using a background image since the <img> can have alt text for the search engines.
Images
The large image in this example is only 1200px wide and gives good enough quality in most situations. The smaller one is 800px wide.
Click the link below for more info about resizing images before importing into EverWeb. It's really quick and simple and will allow your images to download a lot faster in the browser.
Heading
The h1 heading is centered both horizontally and vertically and has a maximum setting. It can use a web safe font or a non websafe or Google hosted font with a web safe fallback. The font used in this example is the Google hosted "Stint Ultra Expanded" with helvetica as the sans-serif fallback.
The heading has controls for adjusting the font size, weight, style, color and letter spacing. There are separate controls for the font size and letter spacing when viewed on a mobile phone in portrait mode where the heading has a maximum width of 90%.
Overlay
The overlay has a grid layout and covers the image. It has controls for adjusting the background color and its opacity. The overlay can be set to animate in on page load using the controls for animation time and delay which are set in seconds.

Resize Images

Social Links

The links use Font Awesome icons and are located on the left of the image and vertically aligned in the center. One mobile devices, the layout is changed to flexbox and the links become inline at the bottom of the image. If viewing this page on a computer, reduce the browser width to see this in action.
The side links have a hover animation and there are controls for setting the background color and its opacity and the icon color and hover color.
Icons
The links are inserted using a modified version of the EverWeb widget API Assets List. To add a link, click the "Add" buton, choose an icon from the dropdown and then enter the URL and check the box if the link is to open in a new window.
Email Link
The email link is inserted by checking a box and the entering the email address and the subject.
Phone Link
When selected, the phone link only appears when the page is viewed on a mobile phone in landscape or portrait mode. There is a field for entering the phone number with an example to show the correct format.
There is an option to display the phone number on all devices. When this is selected, the phone link will show the text entered into its title attribute on hover.
If an Apple device users clicks the phone tab, FaceTime will open and the visitor can click the "Call" tab.

Font Awesome Icons

Smooth Scroll Down

The smooth scroll to the next item function is optional. When the box is checked, the scroll down chevron icon will appear near the bottom. It automatically moves up to clear the social links on touch devices.
The scroll anchor is built in to the widget and the scroll tab inherits the color, hover color and background color set for the social links.
There is a control for setting the scroll time in milliseconds.