Stacker Info

The stacker widgets are designed to show panels that fill the viewport of the browser or device window and scroll up using mouse/trackpad or the scroll arrows at the left of the window.
Image Over Hero
The hero image has an overlay with an optional heading, an image with alt text and caption and an optional link. The items can have a fade in animation with controls for time and delay.
Note how the image can merge into the background hero image by reducing its opacity.
Wave Hero
The wave is an SVG with adjustable shape and opacity. There is an option to add an overlay caption.
The hero image has a heading and text and an optional CTA style link.
Full Height Slider
The images are inserted in two sizes for computers and mobile devices. The images used in the demo were cropped to 1200 x 800px and 600 x 400px before importing into EverWeb.
The slides have alt text and optional captions. The captions are centered and can be inserted at the top or bottom. They have controls for font family, fallback font, size, color and for thee background color and its opacity.
There is a control for adjusting the caption position on the Y-axis.
The slides can be changed using the directional arrows or grab and drag on computers and by swiping on touch devices.
The arrows can be hidden if required and there is a control to select the break point at which this happens.
The transition can be slide or fade and the transition time is set in milliseconds.
Popup Map Bar
The bar has a phone number which switches to a phone icon on mobile phones, a map marker icon and a spam protected email function.
When inserted below a hero item it can overlay it at the bottom by checking a box.
The map marker opens a Google map on click/tap. The map has a field for entering the address and a control for setting the initial zoom level.
The aspect ratio of the map can be set and there is a separate control for setting a different aspect ratio for mobile phones.
Show/Hide Footer
The show/hide footer opens when the info icon is clicked or tapped. The icon is stuck to the bottom of the window and can be aligned left, center or right.
The footer has a phone number which switches to a phone icon on mobile phones, a centered text section with info and the © notice, a spam protected email finction and a smooth scroll to the top chevron icon.
The icons are SVGs so the color and hover color can be edited. The copyright notice has a function for automatically adding and updating the year.
Lap Hero
The hero image occupies 5/8 of the total width when viewed on wider browser/screen widths and is overlapped by a text area.
The grid has 8 columns, 3 rows and a fixed height. Above the break point the image spans 5 columns and all 8 below the break. The position of the items can be switched.
This <article> with heading, text and optional link can be vertically aligned top, center or bottom by changing the row number.