Sticky or Non Sticky Notes

These notes can be positioned relative to the left or right of the browser edge, stuck in position or left to move with the rest of the content and be set to fade on scroll if required.
The notes have a heading and text with an optional CTA style link buttom which can be set to open the linked page in a new window if required.
As can be seen from the examples, the notes can have an offset or all around box shadow and be skewed to the left or right.
Vary the browser width to see the responsive action.

Sticky Note widget
Full Width Sticky Note Widget

Widget Settings

Set the required width for the note and enter the heading and text.
Check the box to display the CTA link button, enter the text and set its width.
Choose the "Link to:" page and check the box if the linked page is to open in a new window.

Full Width Sticky Widget Styles

Font Styles

Enter the font family name, check the box if it is Google hosted, choose a suitable web safe fallback font and set the overall font color.
Set the background color and its opacity.
Set the font size, style and weight for the headings.
Set the text font size and text align and adjust the line height if required.

Shadow & Angle

Adjust the overall padding if required and set the values for the box shadow.
For an all around shadow, set the values for X and Y to zero.
Set the angle if required. 5° skews it to the right and 355° skews it to the left.

Position & Animation

Check the "Position fixed" box in the Metrics inspector to fix the note but make sure the "Relative to browser left" box is not checked.
To position the item relative to the browser left or right, check the "Full width" box in the Metrics inspector, select left or right in the widget settings and set the required distance from the browser edge.
To allow fade on scroll animation, check the box and set the scroll distance.

This widget is included in the Full Width widget pack.

Sticky Note

This note is stuck by using the "Fixed position" control in the Metrics inspector and positioned relative to the browser right in the widget settings.
It is set to fade on scroll.

Get Widgets

Non Sticky Note

This note is position relative to the browser left and moves with the rest of the content.
The CTA link opens in a new window.

Get Widgets
Full Width Sticky Widget Shadow
Full Width Sticky Widget Position & Animation

Close On Click

To create a sticky note which will close on click, check the first box to add the javascript, check the second one to show the "close" button and set the button color and background color.

Full Width Sticky Close On Click

Close On Click

This note is position relative to the browser left and is fixed in position
The CTA link is hidden and the "Close On Click" function has been enabled.

Get Widgets

Hide On Tablets

If there isn't a version of the web page for tablets, the widget can be arranged to hide on these devices using a media query.
Check the box and enter the maximum screen width. The widget will disappear at screen widths narrow than this value.

Full Width Sticky Hide On Tablet Widget

Hide On Tablet

This note is position relative to the browser right.
The widget will disappear when the browser or screen width falls below 1061px.

Get Widgets

EverWeb Widgets | Full Width