EverWeb Widgets

Responsive Widgets

These widgets are used to create fully responsive content. They can be used in combination with the Hero widgets.
Check out the Responsive Info page to find out how to set up responsive content in EverWeb.

Header & Navigation

A full width, responsive header with logo, heading and navigation. The logo can be configured as a hyperlink with a hover show if required.
The navigation is inline when viewed on a computer and switches to a mobile "hamburger" icon with drop down on tap menu on touch devices

Transparent Header Nav

This widget has most of the same features as the Header & Navigation widget but is fixed in position and adds a function to change the background color and its opacity on scroll.
It can be used when the first item on the page is a hero image, slider or video and the header sits on top of it. When the page is scrolled a certain distance, the header background color and/or opacity changes.

Text Wrap Image

The widget creates a heading, paragraph and text wrapped image in an HTML5 section element.
The heading and first paragraph are optional and there is also an optional footer with auto copyright update and smooth scroll to the top function.
The text wrapped image can be configured as an internal hyperlink if required.

Styled List

The list is created using the EverWeb widget API Assets list so it can accommodate up to 100 items. Items can be easily reorder by dragging them to a new position in the list.
There are numerous styling options and the available list style types are disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha.

Scroll Box

The scroll box has responsive width and fixed height to allow it to be used in combination with the Hero widgets or above any fully responsive widget with a built in footer.
It has a header with scroll arrows which appear at the appropriate time, an optional h2 heading and full width text, an optional image which can be configured as a hyperlink and an h3 heading and wrap text.

Table

The table can have up to six columns and one hundred rows. It has an optional caption element for the table name and the header can have a contrasting background.
On mobile devices, the table layout switches to block level items so that each row becomes a mini table with labels generated using the CSS :before selector to replace the column headings.

Sidebar Layout

At wide screen widths, the layout consists of a main section occupying two thirds of the width and a sidebar to the right of it.
On narrower screens, the layout switches so that both sections are full width and the sidebar slides below the main section.

Two Column Layout

The layout consists of two equal columns with an h1 heading, optional image which can be configured as a hyperlink and text.
When viewed on mobile devices, the layout changes so that the right column slides below the left one and both become full width.

Three Column Layout

All three columns sit side by side when the page is viewed on a computer. Each column has a heading, an image which can be configured as a hyperlink and text.
When viewed on tablet devices, the first two columns remain as they are and the third switches below them with the text wrapping the image. On mobile phones, the columns align themselves vertically.

Four Column Layout

Each column has a heading, image which can be configured as a hyperlink and text.
On computers and tablets in landscape mode the columns sit side by side.
On Tablets in portrait mode and mobile phones in landscape mode the columns align themselves in pairs and on mobile phones in portrait mode they stack vertically.

Light Box Image or Slider

A text wrapped thumbnail which opens a lightbox image or slideshow. The thumbnail has a lightbox icon in the top right corner and can have an optional overlay caption with variable background color and opacity.
The container has an optional heading and paragraph, the thumbnail and wrapped text and an optional footer to create a fully responsive page.

Share Links

The links use the FontAwesome icons and link to all the popular social media sites. When viewed on computers they stick to the left of the browser and animate on hover.
On touch devices like the iPad and iPhone, the links become inline and stick to the bottom of the device window and assume a percentage width.

© EverWeb Widgets -