EverWeb Widgets

Responsive Modules 5

This widget pack has items for commercial websites such as booking, surveys, comparison tables, star ratings, scroll and sticky links, a timeline and a Code Insert widget suitable for creating more advanced items.
Click any widget icon to see the demo …

View Cart Add To Cart

This is a container with a CTA style link that opens a modal with a booking form. The forms use the SimplyBook.me service.
The heading and text are optional and the CTA style link can be aligned left, center or right. The form is created when the SimplyBook.me URL is inserted in the widget settings.

The widget inserts a booking form in a responsive iframe. The form uses the SimplyBook.me service which offers a free account to try out and get you started with online bookings and payments.
The form container has options for adding a heading with contrasting background and a text block for info.
The container can be styled with a border and/or a box shadow.

The Code Insert widget is for those need to to create items by inserting code. It is much easier to create items using this widget than with the EverWeb HTML Snippet and the code boxes in the page inspector.
Apart from inserting raw code, there are functions for inserting external scripts and meta data and for accessing items like Google fonts and Font Awesome icons.

The table is for comparing features available in different items Each row in the comparison table has a feature name and up to 5 columns for categories. The table can have up to 48 rows and the caption and footer text are optional.
The row has a field for entering the feature name and drop down selector menus for selecting "yes" or "no". Yes creates a checkmark (✔) and no is signified by a heavy multiplication sign (✖).

The widget can create either three or four comparison modules which display side by side on computers and return to two or more lines on mobile devices.
The number of items per row can be set for each device type and orientation. Instructions are available for entering star or other type of rating.

The table can have three or four columns and up to 48 rows for creating price lists, food menus etc. The first and third columns - for ID and Description - are optional.
The price column has an option to add the currency symbol. These are expressed as CSS Hex values since the currency symbol is added as a CSS pseudo element so that it appears in very row without having to type it.

The table can have up to 16 columns and 100 rows. The table head can have a contrasting color and background and the border width and color are adjustable.
As the browser width gets smaller, the table will overflow and scroll on the X-axis. On smart phones, the table switches to responsive list view.

The responsive grid has controls for adjusting the number of items per row for each device type.
Each grid item has a heading, an image with alt text, optional fields for star rating and price, descriptive text and a CTA style link tab.
The heading can have a contrasting background and the item background has an opacity slider.

The sidebar can hold up to one hundred links which can be configured to open internal or external pages and in a new window if required. It can be used where a fairly large number of links need to be available but not take over the page layout.
The sidebar height is determined by the main container height. Any overflow of links is hidden and revealed on scroll.

This is an HTML5 section element with a maximum width set and centered in a full width wrapper. Inside the section is an article for the main content and an aside element for the sidebar navigation.
As the content is scrolled, the sidebar links stick to the top to remain in view until they reach the bottom of the parent container and then scroll with it.

Create a website survey that opens in a modal window using SURVS.

Create a website survey using SURVS.

A responsive timeline that switches from a horizontal display on wide screens to vertical on mobile devices.
Each item has a field for the date, a heading and text. Images and links can be added globally. The images have an alt text attribute and the links can be aligned left, center or right. They can have a relative or absolute file path and open in a new window if required.

This widget allows a Keynote project to be embedded into a web page so that others can view it or collaborate in its creation. The project is uploaded to iCloud and given the appropriate Share settings. The iCloud URL is entered into the widget settings to create a responsive presentation. There are options to style the container and add a title and description for the visitors and search engines.