On Load Content

If a website is mainly visited by mobile device users it is essential to reduce the amount of onload content to reduce the amount of scrolling required by small mobile device users.

Offscreen Content

When a page has a lot of content it is a good idea to insert some of items so that they are not in view on page load. This can be achieved by using accordions, dropboxes and modals.
An added advantage is that these require action tabs which encourage the visitor to interact with the content which creates interest and a sense of discovery.

Toolbar

The ThemeKit Caddy toolbar packs a lot of functions into a small space. It can be used to insert below any item to add info such as images, slider and video.
The toolbar can be styled the same as the other Caddy widgets if required and can have up to six action tabs.

Tabs

The action tabs have an icon which shows a tooltip on hover with text to indicate its purpose.
The icons are created using CSS for maximum efficiency and can have a border if required.
The tab options and the associate modal sare …

• Info tabs opens a container with optional image, heading, optional span & text
• Image tab opens a lazy loaded image inserted in two or three sizes with caption
• Slider inserts the lazy loaded images in 3 sizes with caption
• MP4 video inserted in two sizes for computer & mobile devices
• Lazy loadedYouTube video with variable aspect ratio
• Link configured to open internal or external pages.

Modals

The modals can be viewed on the EverWeb design canvas for editing and each content item has its own controls for max width.
The modal overlay has controls for its background color and opacity.
The containers have common controls for adding a border and/or a bottom box shadow.
Modals are closed by clicking tappinf the overlay or the close tab.
NOTE that EverWeb may not display the slider images when viewed on the design canvas - even with lazy loading removed.