ThemeKit Stacker

Stacker Content

The item has a full size image in the background with the content in an overlay. The overlay has a grid layout and the content is centered horizontally and vertically by default.
Article
The centered article has a two column grid layout at browser/screens widths with an image and text above the break point and stacks the image above the text below on phones.

Info
Image [1]

Stacker Slider

Image [2]

Captions Below or Overlay

Image [3]

Adjustable Arrow Position

Autoplay - Stop At Last

ThemeKit Text Stacker

The item has a full size image in the background with the content in an overlay. The overlay has a grid layout and the content is centered horizontally and vertically.
Image
The image is inserted in two sizes using an HTML5 <picture> element rather than in the background. This allows the image to have alt text for the search engines and screen readers.
Content
The content is in an HTML5 <article> element which has a heading, text and an optional link.
The sub headings are created using spans and the widget has controls for setting the span font size and color.
The <article> has a responsive width with a maximum width setting and its background color has an opacity slider.

Info

Stacker Info

This page includes the Stacker Heading, Content, Navigation, Slider. Text Scroller Info and Footer widgets.
[1] Heading
The Heading widget is inserted first. In default mode the heading will stick at the top and remain in view if it has a value on 1 or more fpr z-index.
In this example - where there is a sticky nav inserted - the box for "Scroll with content" is checked and the value for z-index remains at 1 so that it is visible above the item it overlays.
[2] Content
The second item on the page the Content widget which has an image to the left and text block with an optional link to the right. Thes items stack one above the other on mobile phones.
In this case the option to use a background image is checked and the content image has its opacity reduced to ghost in the background.
[3] Navigation
The navigation is inserted next. The optional logo is not used so the linke align center. On page scroll, the navigation will scroll to the top and stick. On mobile devices, the navigation links are replaced by a tab with a "hamburger" icon which drop the navigation in to view on click.
As a point of interest the term "hamburger" has gained popularity but the actual name of the HTML symbol is "trigram for heaven".
[3] Stacker Slider
The slideshow has optional caption which can either overlay the image or be placed below it. Navigation is by directional arrows or grab and drag on computers and swipe on tablets and phones. The arrows can appear on hover and their position on the Y-axis is adjustable.
The autoplay function with the "stop at last slide" box checked can be used if the slider is the first item on the page.
Do NOT be tempted to use autoplay without the "stop at last slide" function.
[4] Stacker Text
This widget has a text block with optional link centered over a solid background or a background image. There is a control to vertically align the content at the top, center or bottom.
Like the other full height, sticky scroll stacker widgets it has the option to show a background image on phones if required.
[5] Stacker Scroller
The scroller is a better way to show images on a responsive page since it has no external scripts to download, no Javascript and the images are imserted in two sizes for faster download over mobile wireless networks.
The images are navigated by brushing the mouse or trackpad horizontally or using the scrollbar which is shown by default but can be hidden if required. On touch devices the images are swiped.
Captions and links are optional and they can be individually positioned at the top or bottom.
The captions have a chevron right icon and an ew-resize cursor to indicate horizontal scrolling. The last slide has a chevron left icon. horizontal scroll.