Compatibility:

WebSite X5 Evo and Pro

Let's start with an example: let's assume you own a car parts store, and it is crucial for your Home page to clearly report the phone number, so that people can easily get in touch for orders or information. A different example now: let's assume you are the admin of an online store, and you would like to make an active promotion stand out on your search page. In both cases, you need a button that stands out from the rest of the page, is always available and also easily clickable.


In these and other situations, you can use the Sticky Button Object: you can use it to create buttons that stay visible at the edge of the page when scrolling, so that the user can quickly perform important action such as calling you, subscribing to your newsletter or place an order. Check out some examples on the Preview page.



In this guide, we will cover the following topics:


What are Sticky Buttons and what can you use them for

Let's start by defining the so-called Sticky Buttons. They are buttons sharing three main features, namely:

  1. Fixed position: These buttons remain in a fixed position relative to the browser window, regardless of page scrolling.
  2. Constantly visible:  They are always visible, anchored at the edge of a page, and it is clear they aren't part of the page contents. They make it easy for users to rapidly perform specific actions.
  3. Specific functions: They are often associated to specific functions, such as sharing on social media, starting a chat, subscribing to a service etc. 

Because of these characteristics, Sticky Buttons are perfect social media share buttons, contact or support buttons or Call-To-Action buttons (newsletter subscription, app download, order placement, etc.).


How to add a Sticky Button on your website pages

In WebSite X5, you can add a Sticky Button:

  • in a specific page of your website, so that it will be displayed on the selected page only, such as the Home page.
  • in the template Header or Footer, so that it will be displayed on all your website pages.


That's what you need to do:

  • If you want to add the Sticky Button on a specific page, choose the page in question on Step 3 - Sitemap and open it: add the Sticky Button Object in a cell of the layout grid. 
  • If, on the other hand, you want the same Sticky Button to be displayed on all your website pages, go to Step 2 > Template Content, access either the Header or the Footer section and add the Sticky Button Object there. 
#tip - It doesn't matter what cell of the layout grid you add or the position of the Header/Footer you add the Object in: the Sticky Button will be displayed on top of the page.
  • In any case, after having added it, double-click on the Sticky Button Object to access the settings window and setting it up.

 

How to set up the content for a Sticky Button

Now you can move on to the Sticky Button Content: you can use a text as well as an image.

  • In the settings window, type in the Text you want to be displayed in the Sticky Button. You can of course format it and define its Color.
  • If you want to, you can import an Image from your PC or from the Online Libraries. You can then set the Size in pixel and, the Alignment to the left or to the right of the text.


How to define the style for a Sticky Button

Let's not move on to the Sticky Button style, which you can work on in the Style section:

  • Start by choosing the button Background Color, set the possible Shadow to be displayed as well as the Rounded Corners.
  • Define the Margins, namely the space between the content and the button borders.  
  • Define the button Position. You can decide which side of the browser window it should be anchored to: the top, the bottom, the right or the left edge. 
  • Finally, define if the button Alignment, whether is should be aligned on the top/right, in the center or on the bottom/left side of the screen section it is anchored to. 
#tip - If the Sticky Button is placed on the right or left side of the browser window, contents are automatically aligned vertically.
  • You can also set the Sticky Button to be displayed with an Animation and after an Initial Delay whose duration you can set: find these items in the Options pane.


As we said, usually Sticky Buttons are used to make it possible for the visitors to perform an action.

  • In the Options section, you will find the Link entry: click on  and select the Action to be associated to the Sticky Button you are working on from the following window. 


Are you curious to use this Object on your website pages? Install Sticky Button now 


You don't have enough Credits to buy this Object? Check out our Credit Packs