ThemeKit Basic

Browser Background

Background Gradient & Image

EverWeb doesn't have a way to insert a color gradient in the background and the method of inserting an image is definitely NOT suitable for respoonsive pages.
Gradient
The ThemeKit Basic Background widget creates a background with a two color gradient with adhustable gradient angle
Background Image
The standard method of inserting a background image should never be used since the re is no option to insert alt text for the search engines and screen readers.
Browser Background Image
An image inserted in the background has to be stretched across the whole of the browser background which requires a compromise in quality to keep the image down to a reasonable size.

In Use

The ThemeKit Basic Background widget inserts the images in HTML <img> tags to allow alt text.
The image is inserted in three sizes for the various devices and has a lazy loading option.
The image is set to fill the browser/device viewport rather than the background so that smaller images can be used without degrading the quality.

The image has the option to add an overlay with controls for color and opacity to reduce the impact of a "bright" image.
The overlay can be set to animate in on page load with controls for the animation time and delay set in milliseconds.

Phone Simulator

Mobile Website Appearance

Over 60% of website visitors will be using mobile devices. To encourage EverWeb ThemeKit users to focus more on how their page designs render on smart phones this litle simulator can be inserted on a page of any project so that the mobile phone view of the website can be checked out in Preview mode.
ThemeKit Mobile Phone
This simple widget can save a lot of time when previewing and a lot of embarasment when published.
There are a few controls for styling the body of the mobile phone simulator along with a tab for selecting the page to show.
Landscape Mode
The phone can also be orientated in landscape mode although most visitors will only use this view videos which are set to play inline.

In Use

Insert the widget on a blank page on its own and link it to the home page.
Create a temporary link to it on the home page or in the navigation menu.
Open the project in preview mode and test the pages.
Before the site is published to the server, remove the link to the page with the simulator.

Landscape Mode

ThemeKit Basic Background Image/Gradient

Menu