EverWeb Widgets

Parallax Background

Parallax Background Image

The is the background of a div rather than in the browser background so that parallax scrolling can be applied to it.
The image height can be set in pixels if required but the example on this page uses the option to set the height in viewport units. The height is set to suit the page content and, in this case, is set to 200vh.
Images
The background image are inserted in three sizes. The large image is 1200 x 720px and the medium image is 800 x 480px. The small image for mobile phones in portrait mode was cropped to an aspect ratio of 9:16 with an actual size of 470 × 836px.
To the inexperienced user, these sizes may seem small. Background images do not need the same quality as those in the forground and the smaller the size the better in terms of page download effiency.
Overlay
The background image has an overlay with controls for background color and its opacity. This can be used to tone down the background images to make the overlying more visible and the text easier to read.
Parallax Speed
The speed control is a slider with a default setting of 25. If set to zero the image will be fixed in position.
At maximum value there will be no parallax effect and the image will scroll with the rest of the page content.

Logo Navigation

The navigation is full width responsive with the links centered. If the optional log is unserted, the links align right. On mobile touch devices the navigation is replaced with a "hamburger" icon that opens a drop down navigation on click.
Logo
The optional logo appears at the top left and has a control for setting the image width. The logo can be configured as an internal link which would normally be to the home page.
Links
The link minimum width is adjustable and the link tabs can have their own background and be separated.
Current Page
The current page can be indicared using a contrasting color and an optional animated underline.
OverlayAs can be seen from the example above, the navigation can be inserted below a hero item and, by checking a box, be made to overlay it at the top,
Mobile Navigation
The mobile dropdown is operated via a "hamburger" tab which can be styled and fixed in position so that it always remains in view.
Widget Position
The widget can be the last item in the stack of widgets on the EverWeb design canvas. EverWeb does play nice with widgets like this and doesn't care for items with their height expressed in viewport units.
When a widget like this is inserted, EverWeb spims its wheels and every time an option is changed, there will be a delay and the beach ball will appear.
It's better to create the widget on a test page on its own and then transfer it over to the actual page prior to publishing.

Text & Image

This the ThemeKit Text/Image widget which has been inserted to show how content can be floated over the top of the Parallax Background widget,

Text & Image

This the ThemeKit Text/Image widget with the image inserted at the left.
The text background color is set to 50% opacity and the wraper background opacity is set to zero.

Footer

The footer can be either open on page load or hidden and opened/closed using the tab with the chevron icon.
For a toggle footer, check the box to show the tab and check the boxes to hide the footer and fix its position.
Layout
The footer has a grid layout with four columns …
Column [1] has a contact icon which is configured as an internal link and can open a page with a contact form.
Alternatively it can be a phone number that switches to an icon for placing calls when viewed on a mobile phone.
Column [2] has a text area for entering the company name and address etc. If the last line has the copyright info, the copyright year can be added by checking a bo which adds an auto update function.
The font family, size and color are shared by the phone number text and the info text. The text has controls for line hieght and text align.
Column [3] is an email icon. The email name, domain and domain extension are entered into separate boxes. The @ and the period are added using Javascript to prevent spammers using scrapng software from harvesting the email address.
Column [4] has a chevron up icon with a smooth scroll to the top function. The scroll time is set in milliseeconds.
Responsive
On devices with screen widths less than the break point the icons remain inline in row one and the text slides down to row 2.
Icon Styles
The icons are SVGs so their color and hover colorcan be changed. The show/hide tab has its own controls for color, background color and top border radius.