EverWeb Widgets

Mobile Elements

These widgets create elements for use on the mobile version of the website. They are designed to be used in conjunction with the mobile container widgets to create a fully responsive mobile site which will give a far superior user experience on all sizes of mobile phones.
Before attempting to use these widgets, please check out the info pages about responsive layout, mobile pages, redirects and testing.
Click any widget icon to see the demo …

View CartAdd To Cart

Header & Navigation

The responsive header has a built in optional logo, an h1 heading for the website name and a drop down, mobile style navigation.
The drop down button uses the familiar "hamburger" icon which is situated to right of the header.
There is an optional bottom border for use as a separator if required.

Dual Navigation Header

This full width, responsive header incorporates two navigation menus for use on sites with directories.
The navigation menus drop down by tapping an icon - a hamburger icon for the main menu and a four square icon for the sub navigation.
The header also inserts the h1 heading with the website name.

Footer

The sticky footer appears at the bottom of the device window on page load and disappears on scroll. It then reappears when the visitor has scrolled a preset distance down the page.
The footer has a text field for copyright info, an auto copyright year update option and can have up to four links to internal or external pages, phone and email buttons and a smooth scroll back to the top tab.

HTML Heading

The widget can create h1 through h4 HTML headings. Its main use will be for the h2 page name.
It can be use either a web safe font or a non web safe or Google hosted font with web safe fallback.
Checking a box adds a container which can be styled for background color and opacity, border and border radius and a box shadow.

Hero Banner Image

Nowadays, the hero banner image is replacing sliders on websites - especially on the home page which is required to download really fast.
The image is full width, responsive with a fixed height and has an overlayed h1 heading an optional h2 heading and an optional CTA style link tab for linking to an internal page. Several of these can be inserted to create a pictorial navigation or product display.

Icon Links

The inline link tabs can use either the FontAwesome or the Google icons. The widget can accommodate up to six links to social media or other external pages and a phone button and email link.
The tabs can be styled with a common background color and individual icon colors. There is a checkbox to change the tabs from square to round if required and the links can be fixed to the top or bottom of the window.

"Call Me" Button

The 32px in diameter round button with a phone icon is created using CSS rather than an image to make it suitable for use on a mobile website.
The button can be styled for icon color, background color and border color.
The phone number is then entered and the correct format is shown in the widget settings.

Warning Message

The widget creates a basic warning bar to satisfy the EU cookie law. It can also be used for any type of message required on page load.
The warning bar is fixed to the top or bottom of the browser or device window. It has a message and a close button. The text, button and background styles can be adjusted.

Redirect

This widget is used to direct visitors using a computer, tablet or mobile phone to the appropriate version of the website.
The redirect is created using javascript and redirects according to the screen width of a touch device or the browser width on computers.

Q & A FAQ

The FAQ can accommodate up to 100 questions and answers and has an optional header and footer. The widget uses the HTML5 details element to create an interactive item without using javascript. This makes it a better option to use on a mobile site than an accordion.
Questions and answers can have contrasting styles to make them easier to search through.

Map & Contact Info

The widget is designed to insert a static Google map rather than an interactive one since this is more suitable for a web page that will be viewed on a mobile phone. The map has options for zoom level, marker and marker color and to add a link to Google maps to view the interactive version.
The widget also has fields for adding a heading, text, location info and has an optional footer.

© EverWeb Widgets -