ThemeKit More

More Products

Scrolling

To make horizontal scrolling items more suitable for mobile devices the trend is to use vertical scroll to scroll horizontally on computers and swipe on mobile rather than a Javascript driven carousel.
This is much more intuitive for visitors and eficient in terms of the amount of code required.

Auto Grid

An auto responsive grid using the min-max function and the auto fit keyword

Grid Gap

Items in the grid can be spaced out evenly by giving a value to the grid-gap property.

Item Height

Price: $899

Grid items have equal height despite varying amounts of content.

Content

Items have an image with alt text, heading, optional span, text and a link.

Function

The number of items to show and the total number of items are enterd into the widget settings.

Links

Links stick to the bottom of the container and can have individual or common text.

Show Less

Show More Products

The ThemeKit More Products widget can be used to display just about anything or to create an illustrated navigation or website directory/section menu..
Setup
All the items can be viewed on the EverWeb design canvas by setting the number of items to show to the same as the total number of items.

Control

The links can have individual text or, by checking a box, they can have commom link text. The animation time can be adjusted and is set in milliseconds

More Info - Feedback - Testimonials - Quotes

Header

The header is optional and has the option to add an SVG icon

Vertical Scroll

Item Width

The item's min width can be entered with an option to change tit for phones in portrait mode.

Adjustable Width

Content

The content has a heading, text, optional pointer and the option for a "signature".

Item Content

Quotes

When used for testimonials quotes can be auto added to the text.

Auto Quotes

Signature

The pointer is optional and the signature below it has the option to use a different Google Hosted font.

Name

Links

Links are optional and can open internal or external pages.

Link Icon

ThemeKit More Accordion

Content

This item shows the optional image with alt text, maximum width setting and optional lazy loading. Lazy loading should be used on any image that is not in view on page load.

Content

Content Items

This section shows the optional image with its maximum width set to 600px. The heading and text are shown along with an optional span and CTA (call to action) link.
Link
The link can open internal/external pages or files, has a new window option and has a background hover animation.
Spans
Spans can be added for sub headings and have controls for font size and color like this …
<span>Span Text</span>

More Info

Accordion Options

Accordion

The accordion has a control for "Open all" which allows the content of all the sections to be seen on the EverWeb design canvas for editing. This would normally be turned off before publishing.
First Item
The check box for "Show First Item" allows the first section to be open on page load.
Auto Close
Checking this box allows the open item to close when another is opened which is the most useful for reducing the amount of visitor scrolling.

Styles

Styling

The action tabs are the trigger and have controls for font size, text align, color background and padding. The tabs can be separated if required.
The accordion container has controls for border width, color and border radius.
The wrapper has controls for vertical and horizontal spacing and has the option for a solid or two color gradient background