EverWeb Widgets

Responsive Modules 2

The second pack of responsive modules includes a header with lightbox option, a hero image with animation, ahero iamge which switches to fully responsive on mobile devices, a responsive image frame, three types of tabs, a scroll box, two types of timeline, a checklist and an overlay responsive navigation.
Click any widget icon to see the demo …

View CartAdd To Cart

Header Lightbox

When viewed on computers, the header consists of a content area to the left and an image to the right. At narrow browser widths and on mobile devices, the image switches position to below the content area.
When the lightbox option is turned on, a play button appears at the center of the image. This can open either a large image, a Vimeo video or a YouTube movie in a responsive lightbox window.

Image Frame

The responsive image is loaded in three different sizes for the various devices and adds various styling functions using CSS . There are options for an inset shadow to create the "vingnette" effect, an image border, padding to create the "frame mask", an overall border for the frame, a box shadow around the frame and a drop shadow extending off the bottom edge.

Tabs

The widget can have up to eight tabs which are displayed inline above the content area. They can be aligned left, center or right when viewed on computers and then align center and return to two or more lines on mobile devices.
The content areas can have an image with alt text, a heading, descriptive text and a CTA style link. The link can open internal or external pages.

Metro Tabs

The Metro style tabs are for those who enjoy color. Up to eight tabs can be used - each with its own color which matches the tab content background color.
The content areas can have an image with alt text, a heading, descriptive text and a CTA style link. The link can open internal or external pages.

Switch Tabs

The switch tabs are a little more sophisticated since they switch from tabs when viewed on computers and tablets to a more appropriate accordion style when viewed on mobile phones.
Content blocks have options for an image with alt text, a heading, a span for price/date info, a text block and a CTA style link which can be can be aligned left, center or right and can open internal or external pages.

Scroll Box

The scroll box has a header with the h1 heading and optional scroll arrows and a content area. The height of the container is set to a fixed amount and any overflow content will be hidden and revealed on scroll.
The content area has options for an image, an h1 heading, a paragraph, a list with style options, another paragraph and a CTA style link.

Timeline JS

A jQuery plugin is used to create a timeline using images. Each item has a label, a marker and a content block. The label sits on the opposite side of the timeline when viewed on computers. On mobile devices, the label repositions itself on the same side as the content block.
The content blocks have an optional heading, an image with alt text and an optional text description.

Timeline CSS

The responsive timeline widget is used here to create step by step instructions. It uses a pure CSS solution which makes it more suitable for responsive pages than one using javascript. It can also create a timeline without images.
Each item can have a title, an image with alt text, a contrasting field for date, time etc, a text block and a link. The image, time and link options are turned on globally if required.

Checklist

This widget creates a checklist. It has an optional h1 heading and a list with checkboxes.
The list can accommodate up to 100 items which should be enough for most situations! There is a choice of eight list style types.
Each item is preceded by a checkbox. When clicked, a colored checkmark on a contrasting background appears.

Top Navigation

This creates an inline navigation when viewed on computers and switches to a hamburger drop down on mobile devices with up to fourteen links. The last two links can be configured as external.
The navigation can be situated above or below a full width item like a hero image and be made to overlay it - at either the top or bottom.

Image Zoom Up

The widget creates a text wrapped image in an HTML5 figure element which will zoom up above the page content on click. The widget uses two images - one for the wrap image and the other for the zoom image.
The image has alt text, a caption in the <figcaption> element, descriptive text and an optional CTA style link tab. The link can open an internal or external page and in a new window if needed.

Scrolling Text

Scrolling text is not quite so easy to achieve with responsive width pages as it is with fixed width. The wider the item is, the longer it takes for the text to scroll at a given scroll speed. The other problem is that using javascript to create constantly moving items is not good news for mobile device users. This widget overcomes the problems by having adjustable scroll time for the various devices and using CSS animation rather than battery draining javascript.

© EverWeb Widgets -