EverWeb Widgets HTML5

Image Modal Widget

Open Image Modal Window Social Media

Text Or Image Hyperlink

A modal window can quite often be more appropriate for opening a larger version of an image from a hyperlink.
Modals tend to require a lot less supporting code than a lightbox style image would.
When using the image link, there is a lot of scope for adding info for SEO. The small image has both a field for alt text and another for a caption. The large image that appears in the modal window can also have a descriptive caption using the same font but with variable size, color and text align.
The opacity of the modal overlay is variable. In a lot of cases it is better to use zero opacity so that the visitor can relate the expanded image to the page content they have just been reading when using an image to support, and expand on, a text description.

Open Modal

Widget Settings

For an image link with caption, check the box and choose the image file.
Adjust its size using the drag handles or the Metrics inspector. Enter alt text for SEO and a caption if required.
If a box shadow is required, set the color and radius.
For a text link, check the appropriate box and enter the pre link, link and post link text and set the hyperlink color.
Set the text styles by entering the Font Family and choosing a suitable web safe fallback font.
Set the font size, color, alignment and line height. Choose the modal image, enter a caption and the required image width.
Set the modal image caption font size, color and alignment.
Set the overlay opacity to a suitable value.

Widget Settings

Image Modal Widget
Image Modal Widget
Get The Widget