Slide Action Items

Offscreen items which slide into view on click or tap are essential for responsive web pages to reduce the amount of onload content for the benefit of visitors using small mobile devices.
The ThemeKit Slide widgets page has the following items which have the option to add action tabs for opening pahels …

• An article with a captioned image heading, text, styled spans and an optional link.
• A content module with an option for a lazy loading responsive image, text and an optional internal/external link.
• A jumbotron with an option for a three color gradient heading, styled span, text and an optional internal/external link
• A tab bar with horizontal action tabs with the option for a two color gradient background
• A two column grid with a lazy loading slider and an article with heading, text and tabs

Slide Panels

The panels are offscreen on page load ad slide out on clicking/tapping the action tab in any of the action items listed above.
Panels can be closed by clicking/tappimg the close tab or the panel overlay. Sidebar width panels can be closed using the action tab that opened it - if in view.
The panels have controls for adjusting both the slide in and slide out times in milliseconds. The slide in time should be relatively long to avoid motion sickness which effeccts about 20% of website visitors.
The panels are …

• Cards showing 2, 3 or 4 cards with image, heading, styled span, text and a link
• Image grid with captions and links and optional scale on hover
• Sidebar link items with an image, heading, styled spans and text
• Lightbox slideshow with lazy loading images inserted in three sizes
• Video MP4 with the video file inserted in two sizes for computer and small mobile devices
• YouTube video with lazy loading function for better efficiency on mobile devices

Editing

The height of the slide panel can be set for editing on the EverWeb design canvas.
Before hiding, the panel height is reduced to about 100px and inserted last below the footer widget out of the way.