EverWeb Widgets Blog

Responsive Toolbars

Using Toolbars

Toolbars

When setting up a responsive page, it's not so easy to add and organise items like phone, email and social media links since they can't be dropped onto the page and dragged into the desired position. EverWeb's Responsive Row is much help because of its limited options.
Grouping Items
Toolbars are a good solution for organising these items and making them easy for visitors to find. Adding a popup function to a toolbar allows items like a signup/contact form or an interactive map to be added to page without taking up much space or overpowering the rest of the content. They are absolutely essential for a one page website.
Check out the Toolbar widget pack contents and the demos by followint the link below …

Toolbar Widgets

Icon Links

The widget shown below is one of the toolbars that create icon links. These can be either inline links or in a popup bar,
The widgets are available for use with Font Awesome or Ionicon icons and the Social Icon set.
The Social Icon set has all the icons available in the widget and these have been updated by removing the redundant ones adding and some custom icons which are only available to EverWeb users.

Forms & Maps

Signup and contact forms and interactive maps are features required on many websites by tend to spoil the overall design by their presence. Contact forms like those produced by the EverWeb default widgets are really outdated and make a web page look really tacky.
Both of these items are there to help visitors make contact and to find the location of the business or service so it makes sense to group them together.
The toolbars with popup items have an option to show a phone number to the left and an email link to the right. The phone number switches to a "call me"l icon on mobile phones and the email link has basic spam protection.

Interactive Google Map

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 above the toolbar and the distance from the left/right browser/device window edge.
Aspect Ratio
The widget has controls for adjusting the map's aspect ratio for computers, tablets and on mobile phones in landscape mode. The default value is 9/16 where the upper value represents the height and the lower one the width.
There is a separate value for phones in portrait mode. The default value is 5/4 which gives good results.

Popup Contact Form

Hiding the contact form in a popup saves space and removes it from sight to help improve the overall page design and layout. The much more up to date form design adds a touch of class rather than detracting from the design in the way that standard forms do.
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.
Using a grid also allows the item vertical spacing to be easily adjusted using the grid-row-gap property.
Instead of labels, the form fields have a placeholder attribute. This specifies a short hint that describes the expected value of an input field. The placeholder text is displayed in the input field before the user enters a value.
The form background has controls for setting the background color and its opacity and there is an optional paragraph for entering instructions.

More Toolbars