EverWeb ThemeKit Lite
The quick and easy way to create a professional grade website with EverWeb
★ ★ ★ Upgrade your website today! ★ ★ ★
ThemeKit Lite Theme
Article
The two column grid layout has controls for maximum width and for adjusting the relative column widths.
The article has a heading, text, styled spans and an optional internal/external link.
Article
The text area has its own control for background color and opacity so that it can stand out or blend into the background by reducing the opacity to zero.
InfoThemeKit Lite Hero
The hero item on the home page has the image option. This one has the gradient background option with the animation applied to the text content.
The hero can have a solid or gradient color background or an image. The full size overlay has controls for color and opacity and can animate in on page load.
Images
The image is inserted in three sizes for the various devices.The images in the demo were sized to 1200 x 800px, 720 x 480px and 375 x 540px and optimised before importing into EverWeb.
Content
The text content and links are contained in an HTML5 <article> element. This has a heading, text area and one or two optional links with an optional text area below.
As can be seen from the demo the heading can use a different font from the rest of the content. In this case the heading font is Zen Dots with a monospace fallback and the remainder uses Stint Ultra Expanded with a sans-serif fallback.
Animation
Both the overlay and the article can animate in on page load with controls for animation time and delay.
Line Spacer
The ThemeKit Lite Line Spacer creates a line in the center of the container. The container has adjustable height and the line's percentage width is set by a slider.
The line can be styled for height, color and style - dashed, dotted, double and solid.
Note that a double line needs a height of at least 6px.
Responsive Text
Large chunks of continuous text tend to make a layout look boring and cause the visitor's eyes glaze over.
Text should always be broken up into defined containers with plenty of white space around them.
Try to keep the maximum width of the text container down to less than 1000px - less is better. If the lines are too long it becomes difficult for the eye to find the beginning of the next line.
Fonts
Except for fancy headings, the font family should be consistent throughout the website. The minimum font size should be 16px or 15px if Verdana is used.
Using bold and italic is outdated and causes problems for visitors with reading difficulties.
Spans
Use spans to create sub headings. The spans can be styled for font size and color and are created by entering …
<span>Span Text</span>
Links
Text links have no place in a responsive website and should be replaced by CTA (call to action) style links with a minimum size of 32 x 30px.
Content Fade In
The ThemeKit Lite Fade In widget is inserted below this text and above the footer at a height of 20px. It allows the page content to fade in over time to give a smooth, professional on load effect.
It has controls for height, background color and opacity and animation time.
The widget can be used without the animation as an adjustable height spacer.