EverWeb Widgets

Parallax Background Image

Floating Content

This is a simple parallax effect which gives the page layout an illusion of depth by using semi transparent items on top of a full size background image.
The effect is enhanced by arranging the scroll speed of the background to be less than that of the content.
The widget only has three controls - for choosing the image, setting the percentage height and the scroll speed.
The widget obviously needs to be the first item inserted on the page. The Full Width box in the Metrics inspector is checked and the position Y is set to zero.
For short pages, the widget height can be set to the same as the content height. As the height is increased, so does the width od the image and, on long pages, this will result in a drop in image quality. In this case, increase the percentage height of the widget to a suitable value - anywhere beteen 100% and 200%. This needs to be done by trial and error to get the best result in terms of background coverage and image quality. After each adjustment, the result should be tested in the browser.
The scroll speed is then adjusted. Settings between 3 and 5 give good results.
This page layout has the transparent layer widget inserted after background and before the content widgets.

Hero Widgets
hero content image
Content Block

The content is contained in an HTML5 figure element with image, caption and text description.
jQuery match height is used to keep the elements at equal height independent of the quantity of text content.

image
Image

The image has an alt text attribute and can be configured a a hyperlink to an internal or external page with new window option.
The image can have a border if required.

hero content grid
Grid

A grid with rows containing three content blocks can be created by adding more images to the Assets List in the widget settings up to a maximum of 48.

Header Block

hero header blocks
The header has an h1 heading and the background color and font color can be different from the content block background to make it stand out. Both the header and content backgrounds are adjustable for opacity.
Gallery

Image & Text

hero header blocks
The image has a field for adding alt text for SEO.
The quantity of text can be different in each one since the height of the blocks is kept equal using the jquery MatchHeight script.
Link tabs can be pushed to the bottom using HTML5 line breaks   <br>

Link Tab

hero header blocks
The link tab is optional for each block. It can be configured as an internal or external hyperlink to open in a new window if required.
The tab can be aligned left, center or right.

Hero Widgets

© EverWeb Widgets -