EverWeb Widgets

Tel: 011 123 4567
Phone

Animated Banner

accordion banner

Hashbash Indian Restaurant

Fine Food & Wine

Accordion Banner

The banner image is full width fixed height and has a control for setting a different height on mobile phones.
The overlay has controls for background color and opacity and has options for a heading and text.
The overlay, heading and text can animate in and each has a control for setting the animation time and delay.

Header

The header at the top of this page is full width, responsive with an h1 heading for the website name and options for adding a logo and/or a phone number. These can be placed left or right.
The phone number is seen as text when the page is viewed on a computer or tablet device. On mobile phones, it switches to a "Call Me" button.
If viewing this page on a computer, reduce the browser width to see the change.

Page Setup

Accordion Panel

The accordion widgets consist of a header with heading which can be aligned left or center, a down arrow when the panels are closed and an up arrow when they are open. The arrow colors can be changed to suit the design.
Clicking or tapping a panel opens/closes it. When a panel is opened, a previously opened one will close.
Normally, the first panel would be open on page load to show the "Home" page. There is a check box in the widget settings to close the panel after inserting the content. Leaving this unchecked will cause the panel to be open on page load.
The accordion container can have a border with border radius and the widgets can be stacked and their vertical spacing adjusted.
Arranging Panels
Set up all the panels and close them. Uncheck the "closed on page load" box for the panel which will appear at the top below the header. Drag it up into position and then arrange the rest of the panels in the required order prior to publishing the page.

Content Panel

Accordion Panel

The panel widget has options for an image with alt text, a heading, text and a CTA style link.
The image has a percentage width and can either be centered or floated left to allow the text to wrap around it. It will become full width when viewed on mobile phones.
The link can be configured to open internal or external pages and in a new window if required.
The link tab can be aligned left, center or right and can be a solid tab or have a border with rounded corners. There is the option to add a hover color on the text and border.
Spans
Spans can be used in the text to created sub headings or to highlight certain words. There are options in the widget settings for the font size, color and style of the text contained in the span.
Spans are created by inserting HTML like this …
<span>Span Text</span>

Image Grid

A La Carte
A La Carte
Dinner
Dinner
A La Carte
Lunch
Wines & Spirits
Wines & Spirits

Grid Info

The grid can have up to 48 images. The number of images per row can be adjusted for each device type - computer, tablet and phone and the grid items can be spaced out horizontally and vertically if required.
Captions are turned on globally and overlay the bottom of the image with a background which can be adjusted for color and opacity.
Captions be set to display on page load or on hover on computers and on page load on touch devices.

Slideshow

Accordion Slider

Swipe On Mobile

Image Hyperlink Option

Image Hyperlink Option

Lazy Loading Images

Lazy Loading Images

Fade or Slide Transition

Fade or Slide Transition

Lazy Loading Slider

The slideshow is navigated by directional arrows when viewed on computers and tablets in landscape mode and by swiping on tablets in portrait mode and mobile phones.
The arrows can be shown only on hover if required and the transition can be either slide or fade.
The centered caption background color and its opacity can be adjusted and the images can be configured as hyperlinks.

MP4 Video

MP4 Video JS Player

The player use Video JS for a uniform appearance in all browsers. The player displays a poster image on page load and the video file is prevented from downloading until the play button is clicked or tapped.
The content heading should be used for the video title and the text block for a description of the video content for both the visitors and the search engines.

YouTube Video

YouTube

The responsive iframe's intrinsic aspect ratio is set for a standard 16:9 YouTube video. If the video being inserted has a different aspect ratio, enter the file's width and height in the boxes provided.
The content heading should be used for the video title and the text block for a description of the video content for both the visitors and the search engines.

Price List

Price List or Food Menu

The list has a column for a description and one for price. The item ID column to the left is optional. When this is not present, the item names move to the left.
As can be seen from the example below, the list items can be zebra striped.

All prices subject to seasonal variations

List

Content Heading

The list is contained in an HTML5 <article>. It has a header for the trigger and a "body" for the content.
The header is the trigger and has an h1 heading and an arrow down marker when closed. When the panel is open, the marker switches to arrow up and the color changes.
The panels can be spaced out vertically by applying a top margin.

  • The list is created using the EverWeb widget API Assets List
  • It can contain up to 99 list items
  • The list styles available are disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha
  • The list position, inset and item vertical spacing can all be adjusted
  • The text blocks before and after the last are optional

Spans
Span tags can be inserted in the text with controls for font size, color and style.
The CTA style link tab shown below is optional and can be configured as internal or external and open in a new window if required.

Location

Google Map My LocationGoogle Map My Location
View on Google Maps

Business Name
105 West Argyll Street
Helensburgh
G84 8ZS
Scotland

Static Map

This is a static map downloaded from Google. A static map is often more useful than an interactive one for pages that will be displayed on smart phones. There is a link to an interactive version on Google maps.
The map requires the coordinates of the center point and has the option to enter a Google Map Key. The initial zoom level and the marker color can be adjusted.
Note how the map height changes when viewed on mobile phones. This change in height can be adjusted in the widget settings.
This section is for directions and any helpful local information. The address block is centered and can have a border of required. The text inside it can be aligned left, center, right or justified.

Contact

Contact

Contact Info

Please fill out and submit this contact form so that we can hound you with emails advertising our useless products.
If you don't trust us with your email address, you can send a letter to …
Useless Products
79 Bleak Street,
Grimsburgh
Ohio 838383
Phone: 123-456-7890

Footers

There are two types of footer available. The one below is the Footnotes widget which has three info sections with icons that are created from SVG files rather than images. SVGs have no file weight and make it easy to change the icon color.
The footer bar is not an accordion panel. It is a bar which can be either the same width as the panels or full width like the header. It contains copyright info with auto update of the copyright year and options for an email link and a phone number which switches to a phone link on mobile devices.

Footnotes

Contact Info

Tel: 012-345-6789

Office Hours
9am to 6pm
Monday - Saturady

EMAIL

Click the icon to email the support staff 24/7

Location

180 California Street, #24
San Francisco
CA 94116

© EverWeb Widgets -

Accordion Footer Bar
© EverWeb Widgets -

Tel: 012-345-6789