EverWeb Widgets

Responsive Grid Stack [1] Widgets

These stacks widgets are designed to contain two or more items in layers and there is a navigation and toolbar to overlay other items.
Click any widget icon to see the demo …

View CartAdd To Cart

Contact

The contact form sits side by side with an info section and can have a full width image background. The phone number switches to a "Call Me" icon on mobile phones.
The form has background opacity, placeholder text instead of field labels and an adjustable text area. Fields are added using a modified version of the EverWeb WidgetAPI Assets List

Footer

A three column footer with link bar and copyright notice. The phone number switches to a "Call Me" icon on mobile phones. The © notice has an auto update function.
The first column has info text and the phone number, the center on has info text and the last one has stacked quick links to other internal or external pages.

Header

The header has two sections - the heading and logo on top and an optional toolbar with phone function, h2 heading an an email tab.
The header height can be adjusted to allow for adding an overlay navigation and the background can be a color or an image. The image is inserted in two sizes for greater download efficiency on mobile devices.

Hero Image Header

The full width, fixed height image is inserted in three sizes for the different devices and becomes full height when viewed on phones in portrait mode. The animated overlay has a centered section with heading text and an optional link and has controls for animation time and delay.
The heading can be fixed for scroll over on all device types.

Hero Switch Header

This hero image header is similar to the previous widget except it switches from full width, fixed height on computers to responsive height on tablets and phones in portrait landscape and then to full height on phones in portrait mode. The header can be fixed for scroll over both on computers and iOS devices by using the <img> tag rather than a background image and some advanced CSS.

Text & List

Two HTML5 <article> elements - one with a heading, text and optional link and the other with a list - sit side by side over a hero image background.
Below the break point, the background image is replaced by a solid color. The list has options for style type. inset and vertical spacing.

Navigation

The navigation is inline when viewed on wider screens and switches to a "hamburger" icon on touch devices. The links can be to an internal pages, an external page or file or an internal file.
The navigation can be fixed in position to make it sticky at the top of the page and overlay the header. It can also animate in and down from the top on page load.

Text Grid

This is an offset grid layout with four text blocks sitting on columns 2 and 3 of a 3 column grid. The columns overlay a full width, fixed height background image.
Each grid item has a heading, text and an optional link tab which can be configured to open internal or external pages and in a new window if required.

Text 2 Columns

This is a full width, fixed height background image inserted in three different sizes. Two text blocks overlay the image and sit side by side on wider screens and one above the other on small screens.
Each module is vertically centered and has a heading, text and a CTA style link tab which can be configured to open internal or external pages and in a new window if required.

Toolbar

The toolbar has an optional phone number which switches to a "Call Me" icon on mobile phones, a smooth scroll to the next section via a chevron down icon and an email function.
The email function has basic spam protection and the toolbar can animate in and overlay the bottom of the item above it.

Text Auto Columns

CSS auto columns are useful for breaking up large expanses of text and, on responsive pages, for shortening the line length to make the text easier to follow.
The number of columns can be set using the column-count property and the space between the columns using the column-gap property. A vertical divider can be set using the column-rule property.

Info

Offset text over a background image is becoming popular in web design. This widget has a background image with a text overlay. The text section has a heading, paragraph and options for phone and email.
The position of the offset text overlay can be changed using a slider and there is an option to add a © notice if the item is used as a footer.

© EverWeb Widgets -