Easily Create ‘Sticky’ Buttons in EverWeb

July 16th, 2015

Many websites today have social media buttons pinned to the side of the page so that they are always clickable as you scroll up and down the screen.

This is a great feature for your website and is easy to do with EverWeb 1.8. To achieve the effect need to use the new ‘Fixed Position’ feature in the Metrics Inspector. ‘Fixed Position’ lets you lock the position of an object on its x-axis. This means that as you scroll up and down your page (i.e. along the y-axis), the object remains fixed in place.

Just follow the simple steps below to easily have social media buttons on the vertical and always visible.

  1. First add  the social media buttons that you want to your page, e.g. Facebook, LinkedIn, Pinterest, Email, Google Plus etc. Using the ‘Insert > Button menu to add buttons to your page or use drag and drop your buttons from the Widget Inspector on to your page. When placing buttons line them up vertically close to the left or right hand edge of the page.
  2. When you add each button, make sure that you tick the box ‘Fixed Position’ on the Metrics Inspector. This will lock your button in place on the horizontal x-axis (see screenshot below.)

    screenshot_11

    To fix the social media button in place, first select it, then checkmark the box ‘Fixed Position’ in the Metrics Inspector, as shown in the example above.

  3. Remember to make sure that your Social Media buttons are properly aligned and distributed.
    Select all of the buttons that you have placed on the page. Next use the ’Arrange > Align Objects > Left’ menu so the buttons appear flush to the left, and use ‘Arrange > Distribute Objects > Vertically’ to evenly space the buttons.
  4. If you are adding buttons to a Master Page, you may need to use ‘Always on Top’. Objects on Master Pages lie underneath those on your normal web page. If you find your buttons are not visible use ‘Always on Top’ so that they appear above all other objects on your page.
  5. The last  step is to use Preview to see how your design looks and to test out your ‘Sticky’ buttons before publishing (see screenshots below.) Always remember to test your buttons. Once you have published your website, don’t forget to test each button to make sure that your links work properly!
screenshot_12

Use Preview to see how your ‘Sticky’ buttons work.

screenshot_13

As you scroll up and down your web page, the social media buttons remain in place as the page content slides under the buttons.


Leave a Reply