EverWeb Widgets

Responsive Links & Anchors

Responsive pages require a different approach to creating links since they need to give a good user experiemce on both computers and touch devices like the iPad and iPhone.
The CTA (Call To Action) link has establised itself as the best all round link type and, along with tab and icon links, is used to replace text and image links in modern responsive web designs.
NOTE: These widgets require EverWeb V2.8 and above. They should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View CartAdd To Cart

Using Responsive Widgets

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

CTA Links

CTA (Call To Action) links have mostly replaced text and image links in modern web design and are the preferred method for creating links in responsive pages.
This link bar can have up to eight links - the last two of which are for email and phone. Each tab can have a different background and font color.

PNG Scroll Links

The links are created with PNG images and the link bar can scroll and then stick to the top of the browser or device window. Each links can be set up to open an internal page or as a scroll link to an anchor on the same page.
The last two links can be configured as an email link and an external link respectively. The external link can open in a new window if required.

Tab Links

The tab link bar can have up to 48 links which can be configured to open internal or external pages. The tabs can be styled as CTAs or link tabs with a border and transparent background.
They can be used for creating a main or sub navigation or any other type of links. The tabs can be aligned left, center or right and will return to two or more lines when there is enough of them.

Font Awesome Links

The Font Awesome links can be set up as square or round links. Each link can have its own background color. The link bar can accommodate up to 48 links and these can be to internal or external pages and open in a new window if required.
The links can show a title and box shadow on hover when viewed on computers.

Font Awesome Link Tabs

These have similar functions to the Font Awesome Links except they create a CTA style tab - each with a common icon color and an individual background color.
Both versions of the FA links have a button built in to the widget to access the Font Awesome cheatsheet to find the appropriate icons.

Ionicon Links

Ionicon icons are an alternative to Font Awesome and create a more professional look. The widget creates a navigation system suitable for more advanced users with internal or external links, smooth scroll to an anchor links, an email link and a phone button which can be made to appear only on mobile phones.
The link bar can animate in on page load.

Ionicon Social Links

This link bar is for creating links to social media sites using the Ionicon icons. The icon range and codes can be accessed via a button in the widget settings.
The link bar can be made to scroll and stick or be fixed at the top or bottom and can have an animation on page load and on hover.

Round Icon Links

This link bar has round icons for each of the popular social media sites which are built in to the widget. The links can have a border if required and a scale animation on hover when viewed on computers.
The last two links can be configured as a "Share By Email" link and an "Email Me" link with fields for email address, subject line and content.

Social Media Links

This link bar uses the popular Socialise icon set to create social media links. These icons have the advantage of being widely used on websites and are familiar to most. There are twenty four icons to cover all the popular sites and these are built in to the widget.
The last two links can be set up as "Share By Email" and "Email Me" links.

Sticky Scroll Top Link

Even pages with a moderate amount of content can stretch to quite a large height when the page is viewed on a mobile phone. A smooth scroll to the top function therefore becomes an essential rather than a convenience.
The chevron up icon sticks to the bottom of the browser or device window and can be positioned left or right. It has options for setting the icon color, hover color and background.

Breadcrumbs Navigation

Breadcrumbs navigation is used on larger sites with directories and perhaps sub directories. The widget has tabs for home, directory, optional sub directory and page name.
The tabs have chevron separators and can be aligned left, center or right. On mobile phones the inline tabs switched to a vertical stack.

Theme Break Anchor

The theme break creates vertical spacing between items on a responsive page. It is dropped onto the page and the height adjusted to give the required spacing.
It can show a line which is vertically centered in the container. The line can be solid, dashed, dotted or double and there is a control for setting an anchor ID number .

Anchor Spacer

The spacer creates a full width, responsive item with a fixed height. The background can be a solid color to create a visual break or have its opacity set to zero.
The spacer is used between items and becomes the anchor for scroll down links created using the link bars which include this function.

© EverWeb Widgets -