EverWeb Widgets HTML5

  • Facebook
Sticky Social Media Button Widget

Sticky Social Media Buttons

Stick 'em Left or Right

The container accommodates a variable number of social media button links.
They can be position on the left or right of the browser window and set to stick at a fixed distance from the top of the window.
Get the social media icon download folder.
The icons can be inserted into the widget either by dragging them all into the EverWeb Assets List and selecting them one at a time or by command clicking the required icons in the folder, dragging them altogether and dropping them directly onto the Assets box in the widget settings. The icons can then be dragged around in the widget settings to get them into the required order.

Widget Settings

Sticky Social Media Buttons widget
Sticky Social Media Buttons

social-media-button-links

Widget Settings

After the icons have been chosen, select each one in turn in the Assets List and enter the URL and alt text.
Select the position for the buttons in the browser window - either left or right.
Enter the distance down from the top of the browser window.
Open the color window and choose the required background color.
Click the "Color Sliders" icon at the top of the color window and select "RGB Sliders".
Enter the values for red, green and blue into the boxes provided in the widget settings.
Set the desired background opacity.
It should now look like the widget shown to the right which has been set to appear 100px down from the top of the browser window.

Positioning The Widget

Select the widget, open the Metrics inspector and check the box next to "Allow Free Dragging".
Drag the widget off the page content area into the browser background.
Note that the position and size of the widget doesn't matter at all. Once the widget has been styled, it can be reduced to a small square as shown to the right and positioned anywhere out of the way.

social-media-button-links
Get The Widget
  • dropbox

Stacking Order

If the visitor has the browser window set fairly narrow - or the web page is wide - the icons will overlap the page content area.
Before publishing the page, select the widget and bring it to the front using the EverWeb Arrange drop down menu.
Preview the page to make sure the chosen background color and opacity are suitable for viewing on both the browser background and the page content area before publishing to the server.