EverWeb ThemeKit

Background Slider

The slideshow is inserted in the background using the BackStretch jQuery plugin and has controls for slide time. transition time, lazy loading images and strat slide number.
Setup
When the widget is insert on the EverWeb design canvas it appears as a black, full width item with a height of 30px. This container has nothing to do with the slider. It is required to insert the script using a method that works with EverWeb.
The container can be placed out of the way just above or below the footer widget and its background color and opacity adjusted to suit the page design.
Invisible
There is nothing to see in EverWeb so the page must be previed in the browser to see how it looks.

Disadvantages

BackStretch is not really suitable for responsive pages that will be viewed on mobile phones since it can't insert a smaller image for these devices.n demand". If set to 1 the mext slide will be preloaded.
The amages are inserted using Javascript so they can't have an alt text attribute for inserting keywords for screen readers and the search engines.
Go to the next page to see a better slider for responive page designs …

Next Page

Slideshow Images

The images are in the background so thay don't need to have great quality. An image width of about 1200px - or less - will give good enough quality.
The start slide can be specified using a number. Since this is an integer the first slide number is zero.
Preload
The preload function acts like lazy loading. If left at the default of zero the slides wil load "on demand". If set to 1 the mext slide will be preloaded.

Page Info

This page uses the ThemeKit content fade in widget set to 2000 milliseconds to allow the first slideshow image to download and give a better visitor experience. It is inserted just above the Ixk Info footer widget and has a height of 10px and background color set to black with 100% opacity.
Text
The text blocks are created using the ThemeKit Text Module with the content background opacity set to zero and the wrap background set tp 50%.
The text modules are spaced out using the ThemeKit Spacer widget with the height set in viewport units rather than pixels to allow it to bring the blocks closer together as browser/device window height is reduced.