EverWeb Widgets

Responsive Grid Row Widgets [5]

Responsive widgets to create info overlays, toggle overlay, flip cards, show more dropdowns, header and footer with popup info nav, switch style header & navigation and a standalone drop down navigation.
Click any widget icon to see the demo …

View CartAdd To Cart

Toggle Image Info

The image is inserted in two sizes - one for computers and one for mobile devices. The image has an info icon at the top right which opens the drop down overlay on click or tap.
The overlay has a heading and text and an optional link. The heading and text can have an optional line separator which has a width control. The link can be configured to open internal and external pages..

2 x Toggle Image Info

This is a two image version of the previous widget. They sit side by side on wider screens and then stacked below the break point. The images can have a border and/or a box shadow and there is a border radius control.
The overlay has the same features as the single image version. Since this is a grid layout the spacing between the images is easily adjusted using the "grid-gap" property.

Image Overlay

Hovers aren't much use nowadays since more than 50% of a websites visitors are using touch devices like tablets and mobile phones. However, hovers can be useful for desktop and laptop users.
This item has an overlay which animates in on hover when viewed on computers. On mobile devices, an info icon appears at the top right to toggle the overlay open/closed.

2 x Image Overlay

This is a two image version of the previous widget. They sit side by side on wider screens and then stacked below the break point.
The info overlay has a heading, an optional line separator, text and an optional link tab. The link can open internal or external pages and has a new window option.

Switch Nav

This is a header with a CSS Grid layout where the logo and h1 heading are in row 1 and the inline navigation is in row 2 at browser/screen widths above the break point. On narrower device screens the navigation switches to a "hamburger" icon with a drop down menu. This is inserted in row 1 to the right with the logo remaining in row 1 to the left. The heading drops down to row 2 to keep it clear of the other two items.

Drop Nav

Rather than be incorporated in a header, this navigation is standalone and can be positioned over the header at the top right. The position can be absolute so that the navigation scrolls with the rest of the page content or fixed to make it stick in position. Links can open internal or external pages and there is an option to indicate the current page item with a different color.

Flip Card

The image is inserted in two sizes - one for wide browser/screen widths and the other for narrower mobile devices. The image has an alt text attribute for the search engines and an optional overlay caption.
There is an optional title on hover animation and clicking or tapping the image will flip it on the X or Y axis to reveal the info on the back side.

2 x Flip Card

This is a two image version of the previous widget. They sit side by side on wider screens and then stacked below the break point.
The flip side has a heading, text block and a link tab for internal or external use. The info section can have several lines of text.

Info Footer

The footer is designed to get rid of large, messy footers by incorporating the extra links on a menu that pops up on clicking an info icon.
The center text section can contain any number of lines and has a function to add and automatically update the copyright year. The other functions are smooth scroll to the top and an email icon.

Info Header

The header on this page works in conjunction with the Drop Nav widget to create a fully functional header with logo, h1 heading for the website name and a drop down info nav.
The drop trigger is an info icon and the menu can accommodate a phone number that switches to a phone icon on mobile phones, an email link and links to other info such as contact form, location, terms and conditions etc.

Show More Info

The widget creates an image and a text section which sit side by side on wider screens and stack on mobile devices. The text section has a chevron down icon which opens the "more" section on click.
The drop down has a heading, text and an optional link which can be configured to open internal or external pages with a new window option. The icon changes to chevron up for closing the drop down.

2x Show More Info

This is a two image version of the widget described above. The images sit side by side on wider screens and then stack at screen widths below the break point.
Each image has a chevron down icon which opens the "more" section to reveal a heading, text and an optional CTA style link tab.

© EverWeb Widgets -