EverWeb Widgets
Hero Overlay Grid Slider
The slider uses a CSS Grid Layout overlay to position the items
EverWeb Widgets
Overlay Items
The overlay items are an h1 heading, a text module with heading and a paragraph and a CTA style link.
EverWeb Widgets
Item Position
The overlay items use the grid-row, grid column and align-self selectors to position them and span columns and rows.
EverWeb Widgets
CSS Grid
It is not necessary to learn and understand the CSS Grid Layout to be able to use this widget but it helps!
CSS Grid Overlay Hero Slider
Grid Items
The full width, responsive fixed height slideshow has an invisible CSS grid laid out over the top of it so that the overlay items can be positioned anywhere over the image and remain in their relative position with varying browser/device width. Using CSS grid, this can be done with the minimum of code without resorting to the use of percentage sizes, floats or Javascript.
Images
The image size should be kept as small as possible. The ones used in this demo are 1200px x 750px and this gives a good enough quality at wide browser settings without making the images too large for downloading quickly over cell phone networks.
Lazy Loading
The images can be set to download using lazy loading on demand which means that only three images are download at page load. The others are downloaded as required when the vistor starts to navigate through the slides. Using this option will ensure that the page downloads a lot faster.
Slideshow
The directional arrows can be hidden on mobile phones if required where the visitor can navigate by swiping.
Autoplay can be set although it is definitelt NOT recommended. In this case, the slide time can be set in milliseconds, the arrows hidden and pause on hover implemented if required.
Slideshow Height
The slideshow has a fixed height which is set in pixels. When viewed on mobile phones, instead of reducing the height it is set to 100vh which means that it will fill the height of the device window.
The slider can also be set to viewport height on computers and tablets by checking a box.
Overlay Items
There are three optional overlay items - an h1 heading, a text block with h2 heading and a paragraph and a CTA style link. These have a background color control with opacity adjustment and a border radius control.
The links can be created using relative or absolute file paths and can open in a new window if required.
Item Positioning
The items are positioned vertically by row number and horizontally by column number. Any item can made to span more than one column or row.
The vertical position and height of the item can be adjusted using the align-self property.
For more info about positioning, check out the Hero Grid by following the link below.
Navigation
The navigation is created using the Responsive Banner Navigation widget. This is placed below the slider on the EverWeb design canvas and appears as an overlay at the top of the item above it.
As shown in this example, it has the option to fix it in position to make a sticky menu which is always in view and to indicate the current page with a contrasting color.
Toolbar
The scroll down bar can be stand alone or be placed below an item and moved up to overlay the bottom.
The phone number is displayed on computers and tablets. On mobile phones, this switches to a phone icon which places the call when clicked or tapped.
The smooth scroll down chevron is in the center with a spam protected email function to the right.