Full Page Media

The full page media widgets are responsive so they can be used on a full site which is responsive down to the size of an iPad in portrait mode. They will work on smart phones but the media file size is far too great for downloading over cell phone networks.

Page Inspector Settings

The general settings are shown below

Notes:
[1] The content width should be reduced to 320px if the page will be viewed on mobile phones.
[2] The value for content height is arbitrary since the default height of the widgets will adjust this to the correct value.
[3] Media players like slideshows perform better when the background is black to prevent "white flash" as content is loaded.

General Widgets Settings

All the widgets require the "Full width" box in the Metrics inspector to be checked.
All the media widgets need to be the first item inserted on the page.
In the Metrics inspector, make sure the Position Y is set to zero.
If the Navigation or Overlay widgets are used, these will be inserted after the media player or image.

Individual Widget Instructions

For more experienced EverWeb users, most of the widgets are fairly straight forward to insert. Here are some general guidelines …

Media

These widgets require large image (and video) files. Make sure they are optimised for best performance before importing them into EverWeb. Using oversized files will effect the page download speed quite radically.
In theory, images could be up to about 2400px wide for displaying them at there best on compueters with large screens. In practice an image of around 1600 x 1000px is a good compromise between quality and download speed if the number of images in a slideshow is kept to ten or less.
Images are easily adjust using Tools/Adjust Size in Preview.app. Use the freeware Miro Video Converter to adjust video file sizes for any device type.

Overlay

If the Overlay widget is being used in conjunction with the navigation widget, it needs to be inserted before the navigation so that the navigation links are not covered by it.
Note that the transparent overlay covers 50% of the area vertically when viewed on computers and horizontally when viewed on tablets. The position can be switched left/right or top/bottom respectively.

Navigation

The navigation can be placed at the top or bottom of the page. It may seem a little odd that it has a control for setting the distance from the top or bottom. This is so that it can be used in conjunction with the time /progress bar which is an option for the Vegas slider. If both are used in the same position, the navigation can be raised or lower by an amount equal to the height of the timer progress bar.

Gallery

The Full Page Gallery widget requires separate thumbnail images. Thes should be cropped to around 160 to 200px wide and a suitable height to give the required aspect ratio. The thumbnails in the example are 160 x 100px.
The height of the thumbnail carousel should be set to 20px more than the height of the thumbnail images.
Note that the first image is a placeholder and needs to be selected twice - first as the placeholder with a caption which shows on page load and the second one in the Assets List with the actual image caption which displays when the image is repeated in the slide sequence.

Vegas Slider

This slideshow has a large number of transition types and Ken Burns animations so it is worth experimenting with different combinations to get an effect which will wow and excite your website's visitors!