EverWeb Widgets

Responsive Images

Images for responsive pages need special consideration. It might be OK to use large image files on a page which will be viewed on home computers but it is not acceptable on responsive pages which will also be viewed on smart phones and sownloaded over wireless cellular networks.
Images must be optimised for size before importing into EverWeb. The absolute maximum width should be around 1600px and a lot less is much better.
NOTE: These widgets require EverWeb V2.8 and above. They should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View CartAdd To Cart

Using Responsive Widgets

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

Styled Image

This widget simply inserts and image with alt text and has a maximum width setting to stop it spreading too wide on computers.
The image can be styled with padding, a background color and opacity and it can have a border and/or a box shadow if required.

Image + Caption

Most website images need a descriptive caption in addition to the alt text for both the visitors and the search engines.
Using this widget, a caption can be inserted below the image or as an overlay with a transparent background. The image can be an internal or external hyperlink if required.

Image Set

For best performance and fast download time, images should be inserted with different file sizes for the various device types - large for computers, medium for tablets and small for mobile phones.
The widget inserts the various files with alt text and options for styling with a border and/or box shadow and padding to reveal the background.

Image + Caption Set

This widget has all the functions of the Image Set widget and adds the ability to insert a caption below or an overlay caption with transparent background.
Like the other image widgets, it can be configured as a hyperlink to an internal or external page and open in a new window if required.

Two Inline Images

Two images are displayed side by side when viewed on computers and tablets. On mobile phones, the right hand image slides below the left.
The images can have a caption which can be displayed on hover on computers and on page load when viewed on touch devices.

Three Inline Images

Three images are displayed inline. As the browser or device width decreases, the first image goes full width and the other two slide below it. On mobile phones the images stack themselves.
Like the two image version above, an icon link can be added to the overlay. This is a much better option for a responsive image than an image link.

Lazy Load hero Image

This widget is ideal for an image which appears in the viewport on page load and is very efficient since it loads a different size of image for each device type.
It comes into its own when used to insert hero images further down the page. Not only does it load the appropriate size of image for the device type but also defers the loading of images outside of the viewport until the rest of the content has downloaded.

Hero Banner

This is a simple hero banner which uses a single image file and has on optional info overlay which can have a heading, descriptive text and a CTA style link.
It has an overlay with options for a heading, text and a CTA style hyperlink which can be configures as an internal link and overlay can have a background color with transparency.

Hero Image Set

The hero image set should be used where image quality and fast download speed are necessary. It inserts four different sized image files for each situation and the height of each can be set to ensure the best image quality on each device type.
The image can have an overlay with a heading, text and an image which can animate in if required.

Viewport Height Image

A responsive item with viewport height means that it fills the browser or device window no matter what size it is. The image is inserted in three different sizes for each device type.
The image can have an optional overlay header with the website name and an overlay with a heading, text and a CTA style link. It has a scroll down link and anchor built in.

Viewport Height Banner

The viewport height banner is similar to the image except it doesn't have the header but has a full overlay which can be adjusted for color and opacity.
The smooth scroll down is a chevron down icon which - when clicked or tapped - scrolls to the item below the banner and can have its own color and hover color.

Parallax Scrolling

The widget inserts background images to create a parallax scrolling effect. Each image can have an overlay with options for an h1 and h2 heading and a CTA style hyperlink.
Use this widget in combination with header version in the Responsive Headers pack to create a full page layout with parallax scrolling.

Image Rotate

Rotating a responsive image is not to easy so this widget takes all the hard work out of it by using controls to add and adjust the extra spacing required.
The image is inserted in a figure element and has options for a caption which can be positioned anywhere in relation to the image itself.

© EverWeb Widgets -