Traditional Splendour
City Living
Fix Up Potential
Waterfront Home

EverWeb Widgets

Tel: 012 345 6789

Showcase Slider

In this application the ThemeKit Logo Heading widget overlays the slider at the top to show the website logo and name. The ThemeKit RE Toolbar is inserted below the slider so that contact info is in view on page load.
The slider can have a fixed height in pixels or fill the viewport height by checking a box. The smooth wiping transition gives a more professional and memorable experience.
Images
Each image is inserted in three sizes for each device type and has an alt text attribute, The image that appears on mobile phones in portrait mode has a 9:16 aspect ratio.
Before importing into EverWeb the images in the demo were sized to 1200 x 720px, 720 x 480px and a 9:16 aspect ratio image for phones in porttrait mode 375 x 666px.
To increase efficiency even more the images are lazy loaded.
Captions & Controls
The captions are centered and aligned with the previous/next controls which are inserted together at the bottom right for a better UX (user experience).
Viewport Height
When the slider is set to fill the viewport height there is a checkbox to show a smooth scroll function which scrolls the page down by 100vh.

RE Navigation Menu

The ThemeKit RE Overlay Navigation is probably about the best type to use for all devices. Research has shown that a centered vertical navigation is far more likely to get visitors to click through to other pages than a horizontal one.
Using an overlay helps the visitor to focus on the links without being distrated by the content behind it.
Action Tab
The tab has the usual "trigram for heaven" icon and a span for text which helps to make it a lot more visible.
The tab is position at the top lef when viewed on browser/device screen widths above the break point and has controls for adjusting its position on the X and the Y-axis.
Below the break point the text is removed, the tab moves to the bottom of the device screen to make it easy for mobile users to reach and can be positioned on the left or right.
Links
The navigation can have any amount of links. When its height becomes greater then the screen any overflow will scroll into view.
The links have a background hover animation and the current page can be indicate by using a different color for the "active" background.
There are controls for adding a styled link separator if required.
Overlay
The overlay has controls for background color and its opacity. It can be closed using the "close" icon at the top right or by clicking anywhere outside of the navigation.

Side Note

Popups appearing on page load after a delay can be really irritating and cause visitors to quickly lower their opinion of the website. A gentle slide in animation with a highly visible close button is a much better option for leading visitors to specific content such as newsletter/blog signup, free stuff, specia offers etc.
The Polite Note
The ThemeKit M1 Side Note slides in from the left at a fixed distance from the top of the browser/device window. It has a control for setting the z-index to bring it to the front of other items on the page.
The container has a maximum width setting and can have a two color background gradient with adjustable angle to add some class.
Content
The note has a paragraph for text and an optional CTA style link which can open an internal or external page. The link can be aligned left, center or right.
When viewed on mobile phones in landscape mode the maximum width is fixed at 300px.
Close Tab
The close tab has its own controls for the icon color and the background color and its opacity.
Animation
The translate animation has controls for the animation time and delay. Both are set in seconds. The clos animation is preset.

Check out or fixed & reduce price items

Sale