EverWeb Widgets

ThemeKit M1 Vertical Slide 1
Vertical Slider
ThemeKit M1 Vertical Slide 2
Multi Position
Caption
ThemeKit M1 Vertical Slide 3
Arrows
& Swipe
ThemeKit M1 Vertical Slide 4
Option
Image
Links

Vertical Slider

Think Vertically

I wonder who decided that website slideshows should slide horizontally who the page in most cases scrolls vertically? Vertical scrolling is much easier for the majority visitors using mobile touch devices.
Images
The ThemeKit M1 Vertical Slider inserts the images in two sizes using the HTML5 <picture> element. The images used in the demo were sized to 1000 x 600px and 720 x 480px and optimised before importing into EverWeb.
The picture element allows the inclusion of an alt text attribute for the search engines and screen readers.
Captions
The captions have controls for inserting them left, center or right and top, center or bottom and can appear on hover when viewed on computers.
Controls
The arrow tabs are located at the irght above the break point and them move left and right for mobile device users.
Links
Images can be configured as hyperlinks and the link icon can appear on hover if required.
Stage
The slideshow stage has controls for adding a border and a bottom box shadow for definition and depth.
Container
The container has options for spacing controls. The separate bottom spacing is used to add space for the bottom box shadow.

Email Tab

If yvisitirs don't see contact info immediately they tend to mistrust a website and leave.
The ThemeKit M1 Email Tab widget has an SVG "contact" icon with controls to adjust its color, hover color, background color and opacity and the padding. Adjusting the padding changes the relative size of the icon.
Spam Protection
The email name, domaim and extension are entered in separate fields. The dot and the @ are entered using Javascript to protect the email address against spammers using scraping software.
Position
The tab can be positioned top or bottom and left center or right with controls to adjust its position on the X and the Y-axis.
There is a control for adjusting its z-index to bring it to the front of other items on the page.
NOTE: To hide the email function on other devices check the box and select "phone landscape" from the Break Point dropdown.

Smooth Scroll To Top

Most pages need a scroll totop the top function. For pages that will be viewed on smart phones this is a necessity rather than an option and it helps if the action tab is always in view.
The ThemeKit M1 Go Top Tab widget has an SVG "contact" icon with controls to adjust its color, hover color, background color and opacity and the padding. Adjusting the padding changes the relative size of the icon.
Position
The link can be positioned top or bottom and left center or right with controls to adjust its position on the X and the Y-axis.
There is a control for adjusting its z-index to bring it to the front of other items on the page.
In this example the scroll top tab is centered at the bottom so that ThemeKit Info Footer widget is given 40px of bottom padding to allow its content to clear the scroll top tab when the bottom of the page is reached.
NOTE: The tab can be hidden on tablets and/or computers if required.
Animation
The smooth scroll to the top has a control to adjust the scroll time in milliseconds.