EverWeb Widgets

Responsive Grid Row Widgets [4]

These responsive grid row widgets create inline, hero and full page items for FAQ, postcard grid and slideshow, contact, list, sticly scroll top, events and sales
Click any widget icon to see the demo …

View CartAdd To Cart

Stylish Contact Form

The form can animate in over a coloured or image background. It has two columns, placeholder text instead of field labels for a better appearance and an optional paragraph for instructions.
Form fields are added using the EverWeb widget API Assets List with a control for setting the input type. The text field is optional with a control for setting its height.

Event Card

The card has background image inserted in two sizes and an optional countdown timer and a text field which animate in when the item enters the viewport.
The info section has a heading, paragraph and optional CTA style link tab. The paragraph has several spans for the various types of info.

FAQ

The container has two columns when viewed on wider screens - one with a heading, text and optional link and another with the FAQ section. Below the break point the FAQ sits below the intro text.
It can have up to 48 items with a separator which open on click. When one item opens the previously open one closes.

Q & A

The Q&A widget is similar to the FAQ described above in many respects. It shows a + icon when a section is closed and a - icon when it is open.
In this case, any opened items will remain open until the icon is clicked or tapped to close it. This is useful for when facts need to be left open compare them.

Postcard Grid

The postcard layout is quite complex to create using positioning and floats but is much easier and required less code when using the CSS grid layout.
The overlay animates in and there are captions and options for image links. The images can have a scale up animation on hover when viewed on a computer.

Postcard Lightbox Slider

This widget is the same as the Postcard Grid described above and has the same options for captions and animation except for the image links.
When any image is clicked or tapped, it opens a lightbox slideshow which has a slide counter, image captions and is navigated using directional arrows or swipe.

Column Footer

The column footer was designed to pack a lot of info into a small area. The four main items are a list of links, info section with © notice, scroll to the top chevron icon and an email link which has basic spam protection.
The links can be internal or external and the first one is an option to show a phone number on computers and tablets and a "Call Me" tab on mobile phones.

Sale Card

The Sale Card has two main sections - a <figure> with an image, alt text, caption and optional sales tag and an <article> with a heading, text and optional CTA style link tab.
These items sit side by side on wide screens and then the text area slides below the image when the device screen width is less than the break point setting.

Product Card

The product car has the same features and layout as the Sale Card but adds a third layer.
This layer is an info window that slides down when the info icon is clicked or tapped.
The window has a heading and a list for product features and/or specifications. The icon remains in view to close the panel on click or tap.

Inline Text & List

This text area is an HTML5 <article> element with an h1 heading, a paragraph and an optional CTA style link. The link can be configured to open internal or external pages and in a new window if required.
The right hand item has a heading, an intro paragraph and a list. The list can have up to 48 items and the available styles are disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha.

Click Drop Navigation

Now that most potential visitors are used to the fact that a "hamburger" icon indicates a navigation menu, many sites are using this as the main and only menu rather than an inline one which switches to a mobile version.
The navigation has a lot of options for styling the icon - including the icon size in relation to the tab. The current page can be indicated with a different color if required.

Sticky Scroll Top

The smooth scroll to the top button sticks to the bottom of the browser or device window and can be positioned left or right and its distance set in relation to the browser/device window edge and bottom.
There are controls for setting the icon color, hover color, background color and its opacity and the background hover opacity. The hover delay animation and the scroll to the top time are set in milliseconds.

© EverWeb Widgets -