ThemeKit UI

Images

ThemeKit UI Image
Image In Three Sizes

Image Info

The ThemeKit UI Image widget can insert one or two images with optional lazy loading..
When one image is inserted it is inserted in two sizes with the option to add a third image file for phones in portrait mode.
The image can have a border and/or bottom box shadow. It can be configured as an internal link denoted by an icon at the top right and has an optional caption.

Two Images

ThemeKit UI Image Left
Left Image - No Link
ThemeKit UI Image Right
Right Image Link

Optional Article

To insert an image for the best search engine indexing it should be in an HTML5 <figure> element with alt text and a caption in the <figvaption> element.
However, it is always better to add a text description in the same container for the benefit of both the visitors and the search engines.
Article
The article is optional and has a heading, text and controls for styling spans to use for sub headings.
Note that the article has its own max width setting so that the text lines can be kept shorter than the image width to make reading easier.

Logo Header

Header + Logo

The header used at the top of this page is the ThemeKit UI Logo Header widgets
It has a two column grid layout with an animated text logo link and an h1 heading for the website name.

Logo

The text logo/internal link has a round border around the first letter.
The rest of the text can animate out with an accent line above and below. There is a checkbox to turn on the animation and controls for time and delay in milliseconds.

Navigation Menu

Website Navigation

Navigation has changed a lot over the years since most website visitors use mobile touch devices.
The outdated horizontal navigation across the top - with or ithout dropdowns - has proved to be ineffective.
Smaller sites with up to about twenty pages should have a navigation showing all the pages. It should be vertical and appear front and center.
Larger sites with directies or product type sections should use a section navigation on the home page - preferably with representative images.
If all the pages need to be included in the navigation a filter menu is the best choice.

Overlay

Bothe the navigation background and the overlay have controls for background color and its opacity.
The links are in view for editing on the EverWeb desing canvas and then hidden prior to publishing.

Menu