EverWeb Widgets

Modals

Modals are similar to lightbox style popups in that they have an overlay which covers the page content to allow the visitor to focus on the popup window content.
The overlay opacity can be adjusted to completely or only partially obscure the rest of the page content.
Modals are available to display images, text content and content created on another page in EverWeb and displayed in the popup window using an iframe.
Modals can be opened on click or on page load - after a time delay if required.
Modals are a good way to include extra content without cluttering up the visible page content with too much stuff.
Click any widget icon to see the demo …

Text Modal

The modal launches when a CTA style link tab is clicked or tapped. The tab can be styled to suit the rest of the page content.
The modal window has an optional h1 heading, text and an optional CTA style link tab. The link can open either an internal or external page and can be configured to open in a new window.

Image Modal

Clicking the CTA style link tab opens an image in a modal window with an overlay to obscure the web page content.
The image is responsive up to the maximum width of the image file.
These modals can be closed by clicking or tapping the close button or the modal overlay.

iFrame Content Modal

Content is create on another page in EverWeb and then displayed in the popup modal window using an iframe.
The link to open the modal can be either a CTA or an image.
The iframe method is used when the image or text modals don't have enough features to display the required content.

iFrame Scroll Modal

This widget can be used when a large quantity of content needs to be displayed in a modal via an iframe. The modal has a fixed width and height so any extra content is made visible by scrolling.
Scrolling iframes don't work when the page is viewed on an iPad so the widget contains some extra code to overcome the problem.

PDF

The popup window displays a PDF file.
The PDF can be multi page and will scroll when viewed on a computers.
If the page is going to be viewed on an iPad or other type of tablet device, the PDF MUST be uploaded to Google Drive of it to work properly.

Image Links

The widget was design for an EverWeb user who wanted visitors to be able to launch a modal with logo links to retailers to purchase an item.
The modal window can accommodate any number of image links which have a title option which shows on hover and can open in a new window if required.

Time Delay Text Content

This version of the time delay modal has an optional heading, text content and an optional CTA style tab link.
The link can be configured as an internal one or to an external page with the option to open in a new window.
Like the image version, this modal can be made responsive and the modal content can be seen while editing by increasing the height and then reducing it again before publishing.

Time Delay Image

The image can have an optional caption and be created as a hyperlink to an internal page or external page or file with a new window option.
To make the modal responsive, the width is set as a percentage with a maximum width setting.
Unlike the iframe version, the modal content can be brought into view while editing it.

Time Delay iFrame

The modal window pops up after a time delay. Any type of content can be created on another page in EverWeb and displayed in the iframe.
The overlay has adjustable background color and opacity. The delay time is set in seconds and both the fade in and fade out animation can be adjusted.

MailChimp Signup Time Delay

For those who already have a MailChimp signup form set up, this widget provides an easy way to insert it as a time delay popup. It also allows many styling options for the form and the ability to set the overlay color and opacity.
The form only requires the URL from the MailChimp insert code and the delay time before the modal opens can be set to the required number of seconds.

Time Delay Caption Image Links

This time delay popup window has image links to sponsors, suppliers or related websites. Each image has alt text and a caption which can extend to two or more lines.
The number of images per row can be set using a percentage value so that the popup is responsive up to the maximum width and will work when viewed on the mobile version of the site.

© EverWeb Widgets -