Hero Wipe Slideshow

A full width, fixed height hero slider makes a great first impression when viewed on a computer but not so much on mobile devices where the fixed height doesn't show off the images at their best.
This slideshow improves the situation by changing the image to responsive width and height on tablets and phones.
The switch is achieved by making the images responsive using an intrinsic aspect ratio which is automatically calculated from the image width and height.
Images
The images in the demo were cropped and optimised before importing into EverWeb.

• Large image 1200 x 800px optimised to 120KB
• Medium image 720 x 480px optimised to 77KB
• Phone portrait image 375 x 540px optimised to 49KB

Captions & Controls

The captions can run to two or more lines and can be aligned at the top or bottom and left, center or right.
The captions and the directional action tabs share the same color and background color.
The tabs are placed togetther at the bottom right for the conveniemce of computer users. On mobile devices they are vertically centered at the left and right.
The wipe transition can be either horizontal or vertical.
Image Links
The images can be configured as internal or external links if required and have a new window option.

Social Media Links

Iocn links should use SVGs for the best quality and efficiency. They have much better quality than font icons like Font Awesome. Never use PNG images for icons - they are too inefficent and will compromise the download time..
The ThemeKit Expo Social Links widget has all the popular social media built in and adds the option for an internal link and for phone and email.
The icons show a tooltip on hover when viewed on computers and have a tap-to-go function on touch devices.
The icons can have a common background or individual background colors. There are controls to add a border with a radius and checkbox to turn the icons round.

Responsive Website Links

Links in text are redundant now that the largest proportion of visitors are using mobile devices.
Websites now use CTA (call to action) style links which need to have a clear area of at least 42px around them to avoid being penalised by Google.
If a text block requires related links they should be inserted below the text or outside the container if more than one is required.
The ThemeKit Expo Links widget creates links with four hover background animation styles and a choice of five icon styles.