ThemeKit Columns

Menu

Auto Text Columns

Heading

ThemeKit Text Columns 1
Image [1]

The number of columns for any given browser/device screen width can be set by varying the column-count property at suitable break points.
The column gap can be adjusted and the columns can have a vertical separator which is inserted using the using the column-rule property.

3 Columns

Item [2]

There are two paragraphs and this one is inserted before the image.
The image has the option of adding a border and the optional caption has controls for font size, color and text align.
Lazy Loading
The images have a lazy loading option.

ThemeKit Text Columns 2

The widget allows for inserting blocks using the HTML5 <article> element. These can have a heading, a paragraph, an image with caption and alt text, another paragraph and an optional CTA style link.
The link can open internal/external pages and has a new window option when used to open pages of another website.

Sidebar

Last Item

ThemeKit Text Columns 3
Image [3]

There is the option to add a horizontal separator at the end of each. The last item has no separator.
Spans
Spans can also be inserted if sub headings are required

Nav Menu

Column Header

The header can be used as a stand alone item or in conjunction with the ThemeKit Column Navigation widget,
The header has a three column grid layout with a logo, heading and an optional action tab for using with the navigation.
Logo
The logo has a control for width and is cofigured as an internal link which normally opens the home page.
Heading
The heading is set up as an <h1> since it will be used for the main heading with the website name.
To allow it to be used with Google hostedfonts which din't have variable font weight it has the option of adding a text shadow to thicken it up and letter spacing to compensate for the added weight.
Action Tab
The action tab has editable text and an animated icon which switches state from the trigram for heaven symbol to a close icon when clicked or tapped. It has controls for font size, color, background color and opacity and border radius.

Column Navigation

The EverWeb ThemeKit Column Navigation widget is used in conjunction with the Column Header widget and slides out from the right below it.
When the navigation height excedes the viewport height any overflow will sccroll.
Links
The links can be spaced out. They have a background hover animation and the current page link can be shown with a different background color.

© EverWeb Widgets -