EverWeb Widgets
Scroll & Stick Links
EverWeb Widgets
Scroll & Stick Icon Links
The links are created using the Iconicon range of icons. There is a button in the widget settings to open a cheatsheet which lists all the available icons. It as a search function for quickly finding an icon and exposing its name to be copied and pasted into the widget settings.
The links can be placed anywhere on the page and will scroll up with the rest of the content and stick at a preset distance from the top. If srcoll and stick is not required, the function can be turned off and the widget used as a regular link bar.
Phone Link
When viewed on computers and tablets, there is an option to show a phone number at the far left. On mobile phones, this switches to a phone icon which slides over to join the rest of the icons and, when tapped, will call the number inserted in the widget settings.
Links
The bar can accomodate up to six links which can be configured to open internal pages or can be used to created a smooth scroll down to an anchor using the include anchor widget.
External Link
There is a link which can be configured to open an internal or external page with a new window option.
Email Link
The email tab has a checkbox to turn it on, and fields for the tab text, email address and the email subject. It is situated to the right of the link bar and to the left of the scroll to the top link if used.
Smooth Scroll To The Top
This link appears to the right of the other icons when selected. It shows a chevron up icon by default but this can be changed if required. The link includes the smooth scroll to the top script and the scroll time can be set in milliseconds.
Link Styles
There are controls for adjusting the tab size, icon size and for adjusting the icon position relative to the top. The icon color, border width and color and the background color and its opacity can all be adjusted.
There is an adjustment for the horizontal spacing of the links and one for the vertical spacing if/when the links return to two or more rows.
When viewed on computers, the links can show a box shadow and/or a scale animation on hover if required.
Container Styles
The container background color and its opacity and the vertical spacing can be adjusted.
Scroll Fix
The scroll and fix option is turned on last and the "fix" distance from the top set.
Scroll & Stick Tabs
These links can be placed anywhere on the page and will scroll up with the rest of the content and stick at a preset distance from the top. If srcoll and stick is not required, the function can be turned off and the widget used as a regular link bar.
Links
The first six links can be set up as either internal links to other pages of the site or, by checking a box, can be set up as links which smooth scroll down to an anchor on the same page.
There are also option for a "Call Me" tab which only appears when the page is viewed on a mobile phone, an external link which can open in a new window if required, an email link and a smooth scroll to the top link.
The links are inline and will return to two or more lines on narrow device screens if there are enough of them.
Link Setup
Check the box to show the link tab, enter the link text and either choose the "Link to:" page or check the "Anchor Link" box and enter the ID. The widget pack contains a suitable anchor widget which can also be used as a variable height spacer. The spacer height should be enough so that the scoll to text appears below the scroll & stick link bar.
In this case the height is set to 100px since there are two link bars to clear.
Phone Button
The phone tab only appears when the page is viewed on a mobile phone and is situated to the left of the link bar. It has controls to turn it on and fields for entering the link text and the phone number.
Email
The email tab has a checkbox to turn it on, and fields for the tab text, email address and the email subject. It is situated to the right of the link bar and to the left of the scroll to the top link if used.
External Link
The external link has no scroll option but can be also configured as an internal link if needed. A checkbox turns on the external option and there is a field for the URL and a checkbox for the new window option.
Styles
The tabs can use a web safe font or a non websafe or Google hosted font with a web safe fallback. The background color has an opacity slider and there are controls for border width, color and radius.
The top/bottom and left/right padding can be adjusted and ther are controls for adjusting the horizontal and vertical spacing and the minimum width.
The container can be adjusted for background color and opacity and vertical spacing.