EverWeb Widgets

Hero Widgets [3]

Mosy EverWeb users who want the "full width" look to their website don't seem to consider how poorly these designs perform when the visitor is using a tablet like an iPad in portrait mode.
Hero widgets are full width, fixed height so they can be responsive in width but stacked vertically just like the items on a fixed width design. The maximum width setting is used to stop them spreading out too wide and causing the visitor neck fatigue while trying to follow text content.
The Hero widgets are ideal for those who want the site to appear responsive but don't have the skill or desire to use a responsive design. Hero widgets can be combined with a responsive widget with built in footer to finish off the content.
Once the full site is designed, use the Mobile widgets to create a responsive site which performs well on all sizes and orientations of smart phones.
Click any widget icon to see the demo …

View CartAdd To Cart

Parallax Background

Parallax scrolling helps to give the illusion of depth but can be complicated to set up, difficult to create in EverWeb and is not really suitable for use on mobile devices.
This widget inserts a background image which scrolls at a slower rate then the foreground objects. When used with hero widgets with background transparency it gives that floating effect.

Text Content

Since responsive text content increases in height as the browser or device width decreases, it needs a different approach to allow it to be created as a fixed height object.
The container has responsive width and the text content is vertically centered within it. The text content can then expand in height within the confines of the container

Header & Navigation

The full width, responsive header has an optional logo, h1 heading for the website name and a navigation. The header background has a control for adjusting the opacity.
The navigation is inline when viewed on computers and switched to a mobile icon drop down when viewed on tablets. The navigation can have up to fourteen items the last two can be configured as external links.

Compact Footer

This is a small responsive footer with one line for copyright info and has variable background color and opacity.
The copyright year is automatically entered and updated via javascript.
The footer has a built in smooth scroll to the top chevron tab which inherits the text color. The footer can be made sticky by checking a box to fix it at the bottom of the browser or device window

Content Blocks

The content blocks can added rows of three up to a maximum of 48 items.
Each block contains an image which can be configured as a hyperlink, a caption and a text description.
The height of the blocks is kept uniform even if they contain content of varying amounts. This is achieved using the jQuery match height plugin.

Header Blocks

Like the content blocks, these can be added in rows of three and are responsive from the maximum width setting down to the width of an iPad in portrait mode.
Each block has a heading with contracting background, an image with alt text, descriptive text and a CTA style link tab which can be configured as an internal or external link with new window option.

Focus Links

The focus links consist of rows of three images which animate on hover. The hover turns a square image round and a rectangular image oval and a caption with variable background opacity appears in the center
On touch devices, the round mask and the caption appear on page load. The links can be configured as internal or external with new window option if required.

FX Slider

The full width fixed height slider has 28 different types of transition to choose from or can be set to show random transitions. The slides can be hyperlinks if required.
The caption animates in and can also contain a hyperlink. The slides are navigated using arrows or swipe and there is a play/pause button if the visitor wants the images to autoplay.

Image Scale & Tint

The full width, fixed height responsive image can either scale up or show an overlay - or both - on hover when viewed on computers. The overlay can be either turned on or off when the page is viewed on a tablet device.
There is a caption and CTA style link tab which overlay the image and are centered both horizontally and vertically. The link can be to an internal or external page and open in a new window if required.

Lightbox Images

Thumbnail images can be added in rows of three up to a maximum of 48. When viewed on a computer the image caption slides up on hover. On tablet devices, it is displayed on page load.
The full size image opens in a lightbox. It is responsive up to the width of the image file. The lightbox is closed by clicking the close button or anywhere on the overlay.

Lightbox Video

This is similar to the image lightbox except a full overlay appears on hover with the video title and the option for a brief description. The overlay has transparency and appears on page load when viewed on tablets.
The widget can have a mixture of Vimeo and YouTube hosted videos. When inserting the video URLs, it is important to use the format shown on the demo page.

Lightbox Gallery

The gallery grid consists of rows of three thumbnail images and can cope with up to 48 items. On computers, an overlay slides down on hover to reveal a caption and description. When viewed on a tablet device, the transparent overlay appears on page load.
The lightbox slideshow has image captions, an optional counter and navigates using arrows or swipe.

© EverWeb Widgets -