Slide One Heading

The image is a hyperlink

Slide Two Heading

The image hyperlink opens a new window

Slide Three Heading

This is a text hyperlink.

Full Width Fixed Height Animated Layer Slider

Full Width Fixed Height & Fixed Position

This full width, fixed height slider can also be fixed in position to prevent it moving on scroll as in this example. The Full Width Rectangle is used to create the slide over layer beneath it.
The text can have links inserted but, in most cases, this won't be necessasry since the image itself can be a hyperlink to open in a new window if required.
The slideshow can be manual or autoplay. Pause on hover can be added in auto mode and the arrows on hover can be hidden if required.
Slide time and transition time can be adjusted.

Full Width Layer Slideshow Widget
full width fixed height animated layer slideshow

Animated Layers

Each slide has two animated layers - a heading and a text block.
These can be styled and the background color has an opacity control.
The heading and the text block each have controls for the animation. These control the final position of the item - which is a percentage distance relative to the top and left - and the animation direction which is up, down, left or right.

Slideshow Images

The images used in the demo are 2000px wide by 600px in height.
They are composite images made up in Keynote. The Document/Slide Size is set to Widescreen(16:9).
The product images have their background removed in either Keynote or in Preview before import using the Instant Alpha control.
A screenshot of the item is then cropped to the required aspect ration and size before importing into EverWeb.
2000px is wide enough for most purposes although the images should be more like 2500px wide to fill the screen of a 27 inch iMac and twice that width for retina quality.
NOTE: Using retina images is not recommended for banner/sliders fo this type as their file size is so large that they will have a noticeable effect on page download time.

Full Width Layer Slideshow Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the required height using a drag handle or the Metrics inspector.
Choose the first image and enter the heading and text. Use <br> to create line breaks.
Choose the "Link to:" and check the box if the image hyperlink is to open in a new window.
Set the text styles, layer background color and its opacity and the text link styles if required.

The settings for the heading and text block are the same.
Set the animated in position both horizontal and vertical. Thes are percentage values.
Set the amination direction choosing up, down, left or right. Set the animation delay time in seconds.

Slider Controls:
The slider has controls for showing the navigation arrows on hover, autoplay, slide time in seconds, pause on hover when in auto mode, fixing the position of the slider and setting the transition time.

Adding Slides

The second slide is obviously obligatory and more slides - up to a maximum of six - can be added after that by checking the boxes.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width