EverWeb Widgets

Image Insert Widgets

Although EverWeb allows the user to simple drag images and drop them anywhere on the design canvas, there are quite a number of good reasons why it is better to use a widget.
Inserting an image in an HTML5 figure element with alt text and a caption will achieve far better search engine results.
Experienced users will know that adding the EverWeb default frames & shadows to images is really not a good idea since these frames are also images and contribute to poor web page download performance. Using CSS to style the image or its container is a much more efficient way to go.
Full width images can be inserted as fixed height or fully responsive with a maximum width using the appropriate widget.
Graphic artists can now insert both GIF and SVG format images.
Important: Make sure image files are cropped to the actual size required on the web page and that their files names have no spaces or special characters in them. Use hyphens to separate individual words.
Click any widget icon to see the demo …

View CartAdd To Cart

Image Insert

Insert an image in an HTML5 figure element with alt text an optional caption for improved search engine results. Configure the image as a hyperlink to an internal or external page with an option to open in a new window.
Style the image with options for padding, background color and opacity, border with and color, border radius and box shadow radius and color.

Image Watermark

The widget uses jQuery to implant a text or image watermark to discourage those who like to rip off website images. The text watermark can have the opacity of both the text color and background color adjusted so that the mark can be anywhere from obvious to discrete.
The widget includes a download link for some copyright images.

Overlay Caption

The overlay caption can be positioned top or bottom, left or right and can be styled with a background with adjustable opacity.
The image can be styled with a border, radius box shadow, padding and background with adjustable opacity.
The hyperlink and title options are the same as the Centered Caption widget.

Centered Caption

This has all the options of the previous widget except that the overlay caption is centered and can be position at a variable distance from the top or bottom of the image.
The image can be created as a hyperlink to an internal or external page with new window option.
Title text can be added which displays when the image is hovered.

Hover Caption

The center caption appears on hover when viewed in the browser on a computer. The caption can extend to two or more lines using the HTML line break <br> to create returns.
The image can be created as a hyperlink to open an internal page or an external page or file and has the option to open in a new window.

Click Caption

This version of the centered caption widget is used on the mobile version of the site where hovers don't work.
The caption appears in the center of the image or click or tap and is dismissed by doing so again. In this case the image cannot be a hyperlink.
The caption has a number of styling options including background color and opacity.

Caption On Hover & Click

Use this widget when the image is on a page of the full site which will also be available to visitors using a touch device like an iPad.
The overlay caption appears in the center of the image on hover when viewed on computers and on click when viewed on mobile devices.

Full Width Fixed Height

A full width fixed height image is useful for creating a wide banner across the top of a web page beneath the header.
This widget uses the CSS background-size selector to reduce the viewport width rather than the image width when the browser width is reduced. This prevents the image from distorting.
The widget has numerous styling options including a centered caption.

Responsive Image

A responsive image responds to changes in browser or device width in both width and height. For this reason, the widget centres the image and has a control for setting a maximum width to prevent the image getting too large when viewed at wide browser settings on large screens.
The widget has the same styling options as the fixed height version.

Image 3D Effect Drop Shadow

Insert an image with padding, background color and opacity, box shadow and border.
The bottom drop shadow is created using CSS rather than another image.
The image has an option for a caption and can be configured as an internal or external hyperlink to open in a new window if required.

Animated GIF

Insert an animated GIF file with the option to configure it as an internal or external hyperlink with the option to open in a new window.
The optional title element will display the title text on hover.
The image can be styled with padding, background color and opacity, border, border radius and a box shadow.

Graphic Icon Link

The widget is used to insert graphic icons with the option of creating them as internal or external links to open in a new window if required.
There is an option to add a title element. The title text will show on hover.
The image can have a box shadow and/or a box shadow on hover.

Scalable Vector Graphics (SVG)

This widget allows graphic designers who appreciate the many advantages of the format to insert SVG graphics into web pages.
EverWeb adds SVG (.svg) format files into the external files folder rather than the images. The widget uses a different type of control to select the SVG graphic file.

© EverWeb Widgets -