EverWeb Widgets

Anchors

In HTML, anchors are mainly used to allow the visitor to move to a specific point on the same page although they can also be used to transition to a specific point on another page. This requires a source link and a destination link. These widgets use the term "link" to describe the source and "target" to describe the destination.
If used on their own, the transition from link to target is an abrupt jump. These widgets use javascript to create a smooth scrolling transition.
The various anchor links can also be configure to go to a point on another page of the same site or a different site. In this case, the link can be set to open in a new window if required.
Click any widget icon to see the demo …

View CartAdd To Cart

Chevron Down Link

This is a round tab with a border and a chevron icon with options to style it in the hover state too.
Since it is styled using pure CSS, it is suitable for using on the mobile version of the site too.
Like the other links, it's just a question of assigning the link the same ID number as the corresponding anchor target and setting the scroll time in milliseconds.

Chevron Down Hover

The link is a square with a chevron down icon. It has the option to expand on hover when viewed on computers.
Text to describe what happens when the arrow is clicked appears when it is hovered.
The widget can use a non web safe or Google hosted font if required with a web safe fallback and the background opacity is adjustable. It is ideal for use with the Hero Header widgets.

Hover Go Top

This is a sticky chevron up tab which can be positioned at the bottom left or right of the browser window and smooth scrolls to the top. It has the option to expand on hover to reveal text.
The tab appears on scroll after a preset distance. The fade in/out animation time and the scroll to the top time can be varied.

Chevron Go Top

This is a "Back To The Top" version of the Chevron Link and can be styled in the same way. It can be used on long pages which aren't making use of one of the footer widgets with the built in scroll top button.
Since it is simply returning to the top of the page, it does not require a corresponding anchor.
The scroll time can be adjusted to suit the page height.

Text Anchor Link

This can be set up as a paragraph or an h1 through h4 HTML heading. There are boxes for pre link text, link text and post link text.
The widget can use a web safe font or a non web safe font or Google hosted font with a web safe fallback.
The link color, hover color and text decoration can be adjusted as required.

CTA Tab Anchor Link

This tab can be styled like a CTA (Call To Action) with a border and/or box shadow, background color and opacity, hosted or web safe font, adjustable padding and text decoration.
The tab has an optional down arrow with its own color option. The arrow direction can be reversed so that it can be used as a link to scroll up to anchors or the top of the page.

Image Anchor Link

The image link has options for creating a box shadow and a contrasting shadow on hover. There is a check box to ensure that the box shadow conforms to round graphics.
There is an option to add a title element so that the title text will appear when the link is hovered and give visitors a clue as to where the link will take them.

Hidden Anchor Target

This anchor target widget appears on the page as a 20px square. The square can be assigned a background color so that it can be easily seen and differentiated from other anchors when there are several on the page.
After setup, checking a box will cause the anchor to disappear and not be visible on the published page.
These anchors can be set to "Allow free dragging" and be dragged out of the way into the browser background area.

Line Spacer Anchor Target.

The widget creates a horizontal line which remains vertically centered no matter what height the widget is set to. This allows it to be used as a vertical spacer, section divider and an anchor.
The line can be styled for width and color and the line type options are solid, dashed, dotted and double. It can be set to full with responsive and an inset margin can be applied.

Text Anchor Target

The text can be configured as a paragraph or an h1 through h4 HTML heading. The text can extend to two or more lines using the HTML line break <br> to create returns.
It can use web safe, non web safe and Google hosted fonts with web safe fallback and has options for font weight, style, text align, text decoration and padding.

Vertical Dot Navigation

The vertical dot navigation is used for smooth scrolling to anchors on a long page or a one page website.
The dots can be positioned at a fixed distance from the left or right of the browser window. They are positioned at a percentage distance from the browser top.
The dots can be styles for size, color, hover and active colors and border color.

Sticky Tab Navigation

This responsive tab navigation smooth scrolls to anchors fixed at the various sections of a long page or a one page website.
The navigation can either appear on page load or appear after the page is scroll a set amount. The tabs then fix themselves at a preset distance from the top of the browser to always remain in view.

Scroll Fix Graphic Link

The link is created using two graphics placed one on top of the other so that the image changes on hover.
The link can be dropped at any point down the page. On scroll, it will move up and stick at a preset distance from the top of the browser window.
Several of these can be placed in line to create a smooth scrolling navigation.

© EverWeb Widgets -