Tel: 012-345-6789
EverWeb Widgets
Toolbars [1]
When designing responsive pages it's not possible to drop items like phone and email links, social media icon links etc anywhere on the design canvas. They need to be incorporated in containers and a well designed toolbar actually improves the appearance of the page design.
Search Toolbar
The search bar has an optional phone number which switches to a phone icon on mobile phones, a spyglass icon and an email icon.
The search icon opens a Google Custom Search widget and the email link inserts the email name, domain name and domain extension in separate boxes. The @ and period are inserted using Javascript and this prevents spammers for harvesting the email address using scraping software.
The icons are SVGs so their color and hover color can be adjusted. The search and email icon links can show a title on hover when viewed on computers.
Google Custom Search
The search function requires an ID from Google. Login to your Google account and then follow the link below to set this up for the site.
The search box text inherits the toolbar's font family and has its own controls for font size and color. The box has controls to adjust the background color and its opacity, the padding and for border width, color and radius.
Social Icon Toolbar
The toolbar above uses the Social Icons which are used on many websites and have the advantage of being familiar to visitors. Additional custom icons have been added to create phone, info and settings links.
The toolbar has the phone number/phone icon to the left and the email icon to the right. The icons in the center are added as required and are selected from a drop down in the widget settings.
Phone
The phone item is optional and shows the number on computers and tablets. It switches to a "Call Me" phone icon on mobile phones.
The widget includes code to prevent the phone number appearing as a nasty looking link when viewed on iPads.
Links
The icon links can be configured to open internal or external pages using absolute or relative file paths and can open the linked page in a new window if required. Follow the link below to find out about file paths.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
Contact Bar
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 and the email link inserts the email name, domain name and domain extension in separate boxes. The @ and period are inserted using Javascript and this prevents spammers for harvesting the email address using scraping software.
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.
Font Awesome Popup Toolbar
The toolbar above uses Font Awesome icons. The widget has a link to the Font Awesome cheatsheet to quickly find icons.
The main toolbar icons can be adjusted for size, color and hover color.
Phone/Contact Link
By default, a phone number is shown on the left of the toolbar and it switches to a "Call Me" button on mobile phones.
If the phone facility is not required it can be switched to an internal link. The default icon is for a link to a contact form page but it can be changed to anything else.
Popup
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.
There is a checkbox to hide the popup prior to publishing. The links will popup above the toolbar on the published page.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.