EverWeb Widgets

Responsive Grid Layout Toolbars

Toolbars are necessary for responsive web page designs for grouping items like phone number/phone tab, email tab, social media links and links to other pages. These widgets create toolbars with both inline content and popup items such as links, signup form and contact form.
Click any widget icon to see the demo …

View Cart Add To Cart

The toolbar uses Ionicon icons. The widget has a link to the Ionicon cheatsheet to make finding icons use the search function very easy.
Each link can have a different background color. The icons can be set globally for size, color and hover color. There are options to add a phone tab and a spam protected email function.

The widget has options for a phone number/icon to the left and an email tab to the right. The center icon pops up the icon links. The links can be seen below the toolbar when viewed on the EverWeb design canvas. Each link can have a different background color. The icons can be set globally for color and hover color. Links are added as required and there are fields for entering the icon name, title, URL and a checkbox for the new window option.

The toolbar uses Font Awesome icons. The widget has a link to the Font Awesome cheatsheet to make finding icons use the search function very easy.
Each link can have a different background color. The icons can be set globally for size, color and hover color. There are options to add a phone tab and a spam protected email function.

The widget has options for a phone number/icon to the left and an email tab to the right. The center icon pops up the icon links. The links can be seen below the toolbar when viewed on the EverWeb design canvas. Each link can have a different background color. The icons can be set globally for color and hover color. Links are added as required and there are fields for entering the icon name, title, URL and a checkbox for the new window option.

The toolbar has a phone number which switches to phone button on mobile phones, a popup contact form and an email button. The tab for the popup form can either be an icon or a CTA style link tab.
The form uses a CSS Grid layout with the form fields sitting side by side on wider screens and changing to a single column on mobile phones.

The toolbar has a centered signup/subscribe icon with options for previous and next page links to the left and right.
The form has optional intro text, fields for name and email address and a submit button. Rather than show a message on submission, the form will redirect the visitor to a web page - internal or external. For a better appearance, the form uses placeholder text rather than labels.

The contact bar has an optional phone number which switches to a phone icon on mobile phones, a contact link and an email link. The contact link can open an internal or external contact page.
The icons are SVGs so their size, color and hover color can be adjusted. The contact and email icon links can show a title on hover when viewed on computers.

Custom icons have been added to create phone, contact info and settings links. The toolbar has the phone number/phone icon to the left and the email icon to the right. The navigation icon in the center pops up the links on click or tap. The popup link bar has a container with adjustable background and rounded corners and the links can be configured to open internal or external pages.

The social icons don't need any introduction as their distinctive fold over design is seen on many websites. The icon set is included inside the widget and has been supplemented with custom icons for phone, info and contact.
The toolbar has options for a phone number/icon to the left, inline links in the center and a spam protected email link to the right.

This type of scroll function is very useful for long pages. It is very simple to set up because doesn't require anchors. Clicking or tapping the scroll down chevron will move the content down by an amount equal to the browser or device screen window height. Clicking the chevron up icon smooth scrolls to the top,.
The toolbar also has options for a phone number/phone icon and an email tab.

The search toolbar has options for a phone number/phone icon to the left and a spam protected email icon to the right. The spyglass icon in the center pops up a Google Custom Search widget on click or tap.
The search box can be styled and there an option to add a info text. The search results appear on the web page so that the visitor will not have to leave the site while searching.

The contact bar has an optional phone number which switches to a phone icon on mobile phones, a tab to trigger the popup map and an email link.
The map has fields for inserting the street address and the initial zoom level. The popup has the options to add a border and for adjusting the spacing around it.

The spacer can be set to any height for computer, tablet and phone. It can have a solid color background or an image can be inserted in two sizes - one for computers and the other for mobile devices.
The spacer has an option for a horizontally aligned header which can be positioned at the top center or bottom. It has a multitude of uses including adding bottom padding below the footer for the scroll widget described above.