Header

The header consists of a background image and a transparent overlay panel which can animate in. In this example, the image is set to viewport height and the parallax effect has been selected.
If scroll over is required on mobile devices too, click the link above to see the Scroll Overlay widget which uses a jQuery plugin to implement the effect.
Background Images
Three different images are required for each device type, computer - tablet and mobile phone. The image files should be reduced in size before importing into EverWeb. The images used in this demo is 1600px, 1200px and 800px respectively.
Overlay
The overlay can be adjusted for color and opacity and has an optional logo, an h1 heading, an optional h2 heading and an optional CTA style hyperlink which is configured to open internal pages only.
Viewport Height
The background image can be set to any height or to fill the browser or device viewport by checking a box. A different height can be set for mobile phones.
Info Bar
The optional overlay info bar sits at the bottom of the image and has options for a phone number, scroll down chevron and an email tab. The phone number is displayed on computers and tablets. On mobile phones, this switches to a phone button with a phone icon.
Animation
The animation is turned on by checking a box once all the other adjustments have been made. The overlay and info bar have a fade in animation and the headings and link can either fade in or animate in from the top, right, bottom or left.
The animation time and delay can be set for each item.

Responsive Navigation - Overlay Option

The navigation is inline when viewed on computers. On tablets and smart phones it switches to a full width block layout.
It can accommodate up to fourteen links. The last two links can be configured to open external pages with a new window option.
Navigation Position
When it is inserted on the EverWeb design canvas, the navigation has a relative position. This means that it can be placed either before or after a header widget to appear above or below it.
To overlay the navigation on a header, the navigation should be inserted below the header widget.
To move it to the top so that it overlays the header, there is a checkbox to "Position nav at top".
When the page is published, the navigation will have switched to its proper place at the top of the browser/device window when viewed on computers.

Web Design Tip - SVG Icons

Website Icons

When creating icons for website use, it's best to avoid using images - especially on responsive websites which will be download over cellular phone networks. A PNG image has a relatively large file and adding just a few to a web page can contribute to slow download.
Font Icons
Using font based icons like Font Awesome and Ionicons is a big improvement although the downside is that a relatively large styesheet has to be used. For convenience, the stylesheet is usualy download from a CDN (Content Delivery Network) and this creates a separate server request.
SVG
SVG stands for Scalable Vector Graphics and defines vector-based graphics in XML format. The advantage of using an SVG over an image is that the size can be increased with no increase in file size or quality loss.
An SVG file can be inserted by referencing it in the SRC attribute of an <img> tag but can also be inserted inline in HTML.

This simple circle icon is created using the code shown below …

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="#000000" stroke-width="4" fill="#FFFFFF" />
</svg>

The size of a PNG image required to create this is about 10KB and this will increase with image size. Enough said!

© EverWeb Widgets -