Info

ThemeKit UI Tabs

The ThemeKit UI Tabs widget creates tabs with two, three or four items. The first three tabs share the same content item options and the last one has a styled list.
The optional image available in tabs one through 3 has alt text, an optional lazy loadng function and controls to set a max width and add a border to help with definition.

Overview

Overview

Tabs are usefull for adding extra info while greatly reducing the on load content for the benefit of small mobile device users.
The first three tabs have an optiomal image, heading, text and an optional link tab which can open internal or external pages.

Design

Tabs

Traditional tabs have gone out of style since they don't adapt well for responsive page designs. To make them more versatile the layout needs to switch from tabs to an accordion on smaller mobile devices.
Setup
Since EverWeb cannot desplay animation when setting up widgets on the design canvas it is necessary to devise a way to show the content areas - one at a time.
Setting up a widget like this requires a methodical approach, experience with EverWeb widgets and patience!
Images
Since the maximum width of a text block should not excede 960pxthis means that a full width image with that width would be conidered too large for mobile devices. The optional images can be centered with a maximum width so that a smaller image file can be used.
The images can have a border and have a lazy loading function.
NOTE that it is important to have the animation turned off and the widget set to only show the item being edited.
Publishing
Before publishing, check the boxes to display all the required tabs , turn on animatiom and check the last box in the widget settings

Features

Specifications

The last tab has a heading, text area, optional styled list and a field for a second paragraph or disclaimer.

• The kist can have up to 48 items
• There is a choice of seven list style types
• Adjustable list item inset
• Controls for list font size and line height
• Adjustable list item spacing

The content of each tab can be viewed on the EverWeb design canvas by checking a box to show it with a suitable editing height.
After editing the tab content is hideen and the next is displayed and so on …
Before publishing all the required tabs are checked and a second box is checked which removes the editing height
Animation
The animation can be slide or scale and the animation time is adjustable in milliseconds