EverWeb Widgets

Icons

Using icons in place of text or tab links gives a website that professional touch.
The social icon set is used on many websites and has images for all the popular social media sites. All the images are included in the widget.
The Font Awesome icons are hugely popular and cover just about every situation. The widgets load the fonts from the Font Awesome Stylesheet and there is a field for updating the version number when new icons are released.
There is a a link to the Font Awesome Cheatsheet in the widget settings for easy access to the individual icon codes.
Click any widget icon to see the demo …

View Cart Add To Cart

Social Icons

The social icons are very popular and appear on many commercial websites. The advantage of using them is that they are familiar to most visitors. The widget contains the 24 social media icons and the "email" and the "About Me" icons.
The links can be set to open in a new window and the icon can show a title and box shadow on hover.

Icon Link Maker

There are lots of free icon sets available - free or paid. This widget turns these into hyperlinks to internal or external pages with a new window option.
There are controls for adding a box shadow to indicate the hover state. There are also options to add a scale or rotate animation on hover.

SVG Icon Link

Icons created using SVG files are becoming more popular than PNGs due to their obvious advantages in file size and quality. When SVG files are added to the EverWeb Assets List they are inserted into the External Files section. This widget provides the appropriate selector button.
The SVG link widget has the same options as the Icon Link Maker.

Icon Insert

Font Awesome uses scalable vector icons which can be styled for color and size using CSS. They display well at all sizes and are suitable for use on pages which will be displayed on retina devices.
The Icon Insert widget inserts any one of the 675 icons by entering the icon code and adjusting the icon sixe and color.

Icon Link

The icon link can be made square or round and can link to an internal or external page and open in a new window if required.
There are options for hover colors and the icon container can be styled with background opacity and a border and/or a box shadow.

Go Top Link

The smooth scroll, back to the top link has the same styling options as the others. It can be placed at the bottom of long pages.
The widget uses jQuery to create the smooth scrolling effect.

Scroll Link

The scroll link is used in conjunction with the Scroll Anchor widget to smooth scroll down to any point on the same page.

Scroll Anchor

The anchor widget is used with the Scroll Link widget It creates the point on the page which is the target for the smooth scrolling link.
The anchor can either show an icon or be hidden once it is set up.

Email Link

The Email link is created in the same way as the other but adds some options. On click, it opens the visitors email client.
It has fields for the email address, email subject and email content. Content can include hyperlinks but these need to be set up using HTML.

Phone Link

The Phone link is mainly for use on the mobile version of the site. If the phone number is entered into the title tribute, it will show on hover when the page is viewed on a computer.
The phone number is enter as normal into the title field. The actual phone number that creates the link to make the call should have the number groups separated by a hyphen like: 123-456-7890

PDF View & Download Links

The easiest way to allow a multi page PDF to be viewed by the visitors is to open it in a new browser window and let the browser do the work of displaying it properly. It is also good practice to include a download link to a ZIP file so that it can be read at a later date.
The widget has a field for text and options to add the "View" and/or "Download" icon.

Icon Left Tab

The rectangular tab has the icon to the left of the text. The width is adjusted for the amount of text using a drag handle or the Metrics inspector and the height using the value for TB padding.
The link can be to an internal or external page and open in a new window if required. There are hover styles for use when the widget is used on a page which will be displayed on a computer.

Icon Right Tab

The rectangular tab has the icon to the right of the text. The width is adjusted for the amount of text using a drag handle or the Metrics inspector and the height using the value for TB padding.
The link can be to an internal or external page and open in a new window if required. There are hover styles for use when the widget is used on a page which will be displayed on a computer.

Font Awesome List

The widget allows any of the Font Awesome icons to be used in place of bullet points in a list. The widget has options for a header and lead in text and the container can be styled with a border and/or a box shadow.
It can use a web safe font or a non web safe or Google hosted font with web safe fallback and the inset and vertical spacing can be adjusted.