ThemeKit Brand Hero
In this examplae the hero has an image background with the clip angle and layout switched.
The overall height is adjusted using the values for top and bottom padding.
Extra bottom padding is used to compensate for the clip angle.
ThemeKit Brand
Article
The article has two columns with variable width and switch. This text section has a heading, text, styled spans and an optional link
Zoom
The zoom options opens a large image with in a model and shows a zoom icon in the article image.
The zoom image is inserted in twwo sizes for computer and mobile devices and the images have a lazy loading option.
ThemeKit Brand Content
Content Module
The ThemeKit Brand Content widget can be set up as a standard content item with options for a header with heading an image, text block, list, second text box and a link. Checking a box sets it up as a dropbox with the header as the trigger. In this mode the icon appears at the right of the header.
Images
The image can full width or centered with a maximum width. When the image is content width there is the option to add a smaller image file for mobile devices.
Lazy Loading
Images on responsive websites need to be lazy loaded if they are not in the viewport at page load otherwise the performance will be poor - especially on mobile devices. The lazy loading function should be turned on for images that are not in view on page load.
- Resize and optimise images before importing into EverWeb
- Provide a smaller image file for mobile devices
- Avoid using PNG images
- Replace all PNG and font icons with SVGs
- Lazy load iframe videos such as Vimeo & YouTube
- Videos must show a poster image on page load and prevent the video from downloading until the visitor decides to watch it
- Content videos must load a smaller version of the video file for mobile devices
Drop Box
The item below with the description for the overlay navigation menu is configured as a drop box to reduce the page content height for the benefit of mobile phone users.
Brand WidgetsNavigation
Brand Navigation Widget
Traditional horizontal navigation - with or without dropdowns - have proved to be inefficient at their main task of getting visitors to stay on the site and browse other pages.
Research has shown that a vertical menu appearing front and center is the best way.
- Use a vertical menu with touch device compatible links
- Replace inefficient dropdowns with a dedicated section navigation on larger sites.
- For mobile devices make sure the action tab is positioned in the bottom half of the screen
- Any icons should be SVG rather than font icons or PNGs
- Fix the action tab in position so that it is always in view
- Use a scrollable overlay navigation for larger sites
Navigation Widget
The navigation appears in the center of an overlay on click. The number of links per row at any given width is set by the value for minimum link width. This allows the links to be arranged in columns if required.
Alternate links can have a different background color as can the current page link. The links have a hover background animation and are spaced out using the Grid Gap control.
Both the navigation and the overlay have controls for setting the background color and its opacity.
The navigation can animate in from the top, right, bottom or left and both the in and out animations have their own control for the animation time in milliseconds.
Action Tab
The tab icon changes state on open/close. It has controls for position X and Y, background color, hover background, icon color and border radius.
There is a control to set the breakpoint at which the tab position is moved for the convenience of mobile device users. In this case the icon position from the bottom is set in viewprt height units.
On the home page it is better to show links to the main areas of the site on page load rather than bewilder the visitor with dozens of links. The ThemeKit Brand Hero Nav is designed for this function …
User Feedback
ThemeKit
Definitely the best way to create a professional looking website with EverWeb
Unique
ThemeKit has changed my website from ordinary to unique and visitor friendly
Unbelievable
None of my friends believe that I built this website myself with absolutely no help.
Quick & Easy
The ThemeKit design system is incredible - so quick and easy straight out of the box
Pro Design
The best way to create a design comparable with with expensive Bootstrap, Mobirise and Wordpress templates
Designer
A ThemeKit template has everything needed to build a beautiful and unique website to display my designs.
Star Review
The ThemeKit Brand Review widget has an optional header with icon option. The content scrolls horizontally on vertical scoll on computers. Scrolling is by swiping on mobile devices.
Items
Each item has a heading with the option for stars, text and an option to show a pointer with a "signature" which can use a Google hosted font which is different than the main font.
The star rating can progress from zero to five in half star steps.
Footer Bar
While just about every website has one there is no rule that syas it must have a footer. Many websites have a large footer jam packed with info that is hard to find and read and holds not interest for most visitors. Having a footer like that on a webpage that will be viewed on movile phones is unnecessary and a complete waste of space.
Footer Bar
The footer bar provides a replacement for a footer. It has a grid layout with three or four items and sticks to the bottom of the browser/device screen window.
The bar is in view on page load and disappears on scroll down. It reappears om scroll up or when the bottom of the page is reached.
The icons are SVGs with a hover backgroud animation. The border can be radiused and can be made round by checking a box.
Link
The first link is to an info page that has all the usual stuff that is usually in the footer. It has the option to change the icon so that it can be a link to the home page a or any other "must see" item.
Phone
The phone function is optional. On computers and tablets it show the phone number on hover or click and on phones it becomes a link to place the phone call.
Email
The spam protected email function has fields for the email name, domain, extension and subject. The @ and the dot are entered using Javascript to defeat spammers using scraping software.
Scroll Top
The last action tab is a smooth scroll to the top function which is an absolute must for responsive pages.
Footer
For those who still think that a footer is necessary, follow the link to see one that is compact and has all the required info …