NOTE
EverWeb Widgets is an independent developer of widgets for the EverWeb web design software.
EverWeb Widgets is NOT associated with Rage Software - the developers of EverWeb.
EverWeb Widgets
Hero Image - Responsive Grid Overlay
The hero image is so popular that clients want it and visitors expect it. This widget adds some extras which separate this design from all the others. The image is inserted in three different size for the various device types for better download efficiency, the heights are optimised for each device type and the overlay items can be placed anywhere on the image.
Images
The images in this example were cropped to 1600 x 1200, 1200 x 900 and 800 x 600 with a file size of 340KB, 200KB and 100Kb respectively before importing into EverWeb. The smallest image appears on tablets in portrait mode and has retina @2x quality when viewed on a smart phone in portrait mode.
Each image has a corresponding height setting and the small image can be set to fill the viewport height when viewed in mobile phones.
Overlay
The invisible overlay is created using the CSS Grid Layout Module and, in this case, has 5 columns and four rows. The overlay has three optional items - a heading, text module and a CTA style link which can be configured to open internal or external pages and in a new window if required.
These items have a background with adjustable color and opacity and can animate in if required.
Scroll Over
When viewed on computers, the image can be fixed in position by checking a box to allow the grid items and the content below it to scroll over it.
Animation
The fade in animation is created using keyframes to change the opacity from zero to 1 over timw. Each item has a control for setting the animation time and delay in seconds and there is a control for turning animation on/off to make editing easier.
The Grid
For those who know little or nothing about the CSS Grid Layout Module - and don't want to know - it's easy enough to experiment using trial and error. Otherwise, refer to the Grid Trainer widget by following the link below.
Grid Setup & Item Positioning
The grid is set up by specifying the number of columns and rows. In this case there are 5 columns and 4 rows. Top/bottom and left/right padding can be added to space items away from the edges.
Item Position
Items are positioned by specifying a row number and a column number. Items can be made to span 2 or more rows or columns by entering the start and end number separated by a slash.
The start number is the column or row number and the end number is the column or row number beyond the end point. For example, if an item is to span columnss 1 and 2, the value for Grid Column would be 1/3.
It the item was to span rows 2 and 4, the value for Grid Row would be 2/5. Even although the grid has onlt four rows, the end point of the last one is 5 and the end point of the last of its 5 columns 6.
Vertical Align
When using the CSS Grid Module, the items can be aligned vertically by using the "align-self" property. This can have a value of start, center, end and auto.
"Start" aligns the item at the top of the row or first row if it spans more than one.
"Center" vertically centers the item in the row or across the rows if it spans more than one.
"End" aligns the item at the bottom of the row or first row if it spans more than one.
"Auto" stretches the item across the row or rows if it spans more than one.
Item Width
The heading and the CTA link are set to display as inline-block elements so they automatically adjust to the amount of content. Retirns can be created by using the HTML5 line break <br>
The text module has a maximum width setting to control its spread at wide browser settings.
CSS Grid Module
Find out more about the grid specification and see some example layouts by following the links below.