Gradient Header
The ThemeKit Gradient Header widget has a logo which is configured as an internal link, an h1 heading and an option to show a phone number. The phone number is replaced by an icon on mobile phones that places the call when tapped.
ThemeKit Classy Widgets
Gradient Widgets
Kinetic Navigation Menu
Responsive web design requires us to rethink navigation. Research has show that a horizontal navigation - with or without dropdowns - is the worst type for getting visitors to click through to other pages and logic tells use that the action tab for mobile navigation should be at the bottom of the device window rather than the top to make it easy to open using a thumb.
Action Tab
The ThemeKit Kinetic Nav widget has an action tab at the top right when viewed on computers. It moves to the bottom center when viewed on devices with a screen width less than the break point.
The tab has controls for positioning it relative to the top and right, icon color, background color and opacity and border radius.
The tab opens an overlay with the navigation links front and center where they should be and the tab icon animates to a "close" icon.
Nav
The navigation links are in a grid layout which has a maximum width setting. Links can be arranged in columns by increasing the max width and setting the value for link minimum width to a suitable value. In the demo the widget has been set to show two columns.
The links can be spaced out by increasing the value for the grid gap property.
Links
The links have an animated background on hover and there is a control for setting the background color of the current page link.
Overlay
The overlay animates in and out from the center and has controls for background color and its opacity.
Large Site Navigation
The navigation can have a large number of links. When there are too many links for the size of the device's viewport the overflow will scroll.
Gradient Heading
The ThemeKit Gradient Heading widget has a lot of options. It can be configured as an h1 through h4 heading and can also be used in conjunction with the ThemeKit Gradient Scroll Nav configured as an anchor for smooth scrolling down to another section of the page.
Gradient Text
The ThemeKit Gradient Text widget can be used to replace the EverWeb default text box which is not really suitable for responsive page designs.
The text is contained in an HTML5 <article> element and has an optional heading, text, span styles and optional links.
Links
Text links are not user friendly for mobile device users and are less likely to be clicked than separate CTA(Call To Action) style links.
The module has the option for up to three links. These can be configured to open internal or external pages and have anew windwo option.
The links can be "Apple" style with a trailing double chevron or block links with a contrasting background and a border radius control.
Spans
Spans can be inserted for emphasis or as sub headings and there are controls for setting their font size and color.
Gradient Fade In
The ThemeKit Gradient Fade In widget fades in the page on load to give a smooth transition and to allow a little time for items like a hero image to load. It has controls for setting its height and the gradient background. The fade in animation has controls to turn it on and set the animation time.
On this page it is set at a height of 20px and inserted immediately above the footer.
Gradient Line
The ThemeKit Gradient Line can be used to divide sections on the page and can be configured as an anchor when used in conjunction with the ThemeKit Gradient Scroll Nav.
The line style can be set to dashed, dotted or solid. It has a maximum width setting and can be inset by adding left/right padding.
As can be seen from the demo the line has the option to add arrow heads and the background has controls for a two color gradient with adjustable angle.
There is a checkbox to make the line thicker if required.
Gradient Spacer
The ThemeKit Gradient Spacer widget is used to space out sections of the page and can be configured as an nachor. It is used on this page to add space between the various ThemeKit Gradient Text widgets to make them easier to find and focus on.
Exit Notice
When the vistor moves the mouse pointer into the browser address bar with the intention of leaving the site the notice pops up in the middel of the screen.
It can be used to notify visitors of a special offer or some other reason why they shouldn't leave the website.
The exit notice has options for a heading, text, a list and a CTA style link .
Gradient Footer
Many good web page designs are ruined by a huge messy footer littered with non essential info and links. The ThemeKit Gradient Footer has everything a footer needs and nothing that it doesn't.
Layout
The footer has a three column grid layout. On screen widths above the break point the info tab and info text are in columns one and two and the spam protected email and the smooth scroll to the top functions are stacked in column three.
Below the break point, all three icons are inline in row one and the text and copyright notice move to row two.
Like the other gradient widgets the footer has options for a two color background with adjustable gradient angle.
Popup Links
Clicking/tapping the info tab opens a popup navigation with the first link being optional phone number which switches to a phone icon on mobile phones.
Links can be internal and/or external and have a new window option.
STOP - Before You Leave
Check out the new EverWeb ThemeKit design system for easily creating a responsive website.
- Custom widgets
- Ready made roject file
- Demo media
- Copy & paste …
- … to your new project
- Build a professional class website …
- … with the latest features
- 100s of icons included
- Free Phone Simulator