Why Your WordPress Site Should Have Sticky UI Elements, and How to Create Them

When you first start building a website you’ll hear many different opinions about sticky UI elements. Some say that they — which can include everything from social media sharing options to company information — make for a bad user experience. However, even the detractors concede that these can be highly effective design choices when done right.

Sticky elements (buttons, content blocks, along with other forms of so-called “sticky navigation”) are fixed elements on the page that stay in place as the user scrolls down. When sticky UI elements are designed well and with a clear purpose, the research shows^[1] they’re a great way to get the desired action from a visitor to your website.

In short, your WordPress site can use sticky UI elements in order to maximize the value of each visit to your site. These elements can help lead to newsletter signups, social media follows and other important calls to action.

Perhaps most importantly, they can improve the user experience. With all those benefits, it’s no wonder sticky navigation is growing in popularity.

Why sticky UI elements in WordPress work

Using sticky elements in WordPress effectively can help convey important information and ease the visitor’s journey through your site. One eCommerce website discovered that incorporating sticky navigation helped increase conversions from 30 percent to 33 percent.

A separate A/B test conducted for research purposes found that 100 percent of the visitors^[2] preferred the sticky design elements — even though many of them weren’t exactly sure why.

To harness the power of sticky UI elements in WordPress, you can’t just download a WordPress plugin and watch your numbers improve across the board. You have to carefully plan which elements will work best for your site. You also have to ensure that these elements — which can sometimes be finicky if you don’t have coding experience — work as intended.

Fortunately, there are a number of different types of UI elements and plugins to help you incorporate them into your WordPress site:

Sticky social media share buttons

The way people come across websites has changed. Long gone are the days where most visitors arrive by typing in an URL and then poking around for the content. While that’s still the case at times, so much more traffic now comes from social media.

On average, social media drives 31 percent of all traffic^[3] to websites. While that figure is undoubtedly lower for some websites (and higher for others), it highlights the importance of creating compelling content.

(Chart by WordPress Charts and Graphs Lite.)

Good content, however, is just the first step. You can also nudge users and increase referral traffic by making it ridiculously easy for people to share your content. A good way to do that is through sticky social media buttons to accompany your content.

WordPress has no shortage of plugins for adding sticky/floating social media buttons. The important thing is to choose one that behaves intuitively with your theme’s design. There are so many examples of floating social media buttons that behave rather strangely on mobile, or when desktop browser windows are changed in size.

Poor design can have the opposite effect as intended, as sticky social media buttons that obscure text and photos aren’t going to lead to any social media shares. Take a look at sites that manage to get the user experience right.

Experiment with WordPress’ numerous plugins over as many devices and operating systems as you can, to make sure your social media buttons are behaving as intended.

You may also be interested in:

• How to Start a Photography Blog: From Zero to Launch
• Weebly vs WordPress: Which Is Best for Building a Site in 2023?
• 15 Best Programming Fonts for Coding and Development (Free!)

Sticky information box

Depending on your website, sometimes all your sticky element needs to do is to convey some additional information in the sidebar. Placing contact information prominently on your site is a simple but effective call to action. 12Keys does this to great effect by providing at-a-glance contact information, which is especially important for visitors who may be in crisis.

This can also be a place where you help build trust by highlighting your credentials, awards and anything else along those lines. It’s also a good place to add a personal touch by explaining a little more about yourself or your website.

Fortunately, this is the easiest type of element to implement on your site. You don’t need to worry about anything except for the text and maybe a hyperlink to your email. This plugin should be able to help you:

Sticky Element

Author(s): Stew Heckenberg

Current Version: 1.3.5

Last Updated: January 26, 2019

sticky-element.1.3.5.zip

74%Ratings 300+Installs WP 3.0+Requires

The goal is to not make the sidebar element too flashy or distracting. It’ll be there for as long as the visitor is on the site, so you don’t want to turn them off with something poorly designed or overly obtrusive. Err on the side of simplicity, as the floating sidebar should be the icing on the cake for the accompanying content.

Sticky menus

Sticky menus are perhaps the most down-to-earth kind of all sticky UI elements in WordPress, but they’re also one of the most useful.

The idea is simple. As the user scrolls down, the menu remains firmly in place.

But you can implement this in a number of different ways:

a) You can go for the standard placement at the top.

This is what the Themeisle team has done with their Zerif theme, for example (you can see the live demo here):

One additional bonus here is that the menu is not a simple one-row menu, but a mega menu – when you hover over each of the items, they reveal a more elaborate structure:

b) Put the menu to the side.

This is a nice option for some designs, and especially for photo-heavy sites that bet on visuals to tell their story.

Here’s an example from RichBrown.info:

The menu is fixed to the right as you scroll down.

c) Put it at the bottom.

The bottom is another interesting placement for a fixed menu, and especially if you want to make the menu a bit taller than a single row of text.

Here’s an example by bulletpr:

As you can see, the menu features images + text, so it was placed at the bottom so that it doesn’t take up the valuable space in the site’s header.

Sticky email signups

As you probably know, one of the best ways to reach your audience is through email. An email sent to your subscriber list is five times more likely^[4] to be seen than a post on Facebook.

Building up a quality list of email subscribers is critical for taking your business to the next level. Thanks to sticky forms, obtaining subscribers is easier than you think.

There are plenty of ways to encourage a site visitor to sign up for your mailing list. A sticky form, either on the sidebar or the top of your page, can be a big help. One site that does this well is TwelveSkip, a digital media company. Their call to action at the top of the page is clear and attracts attention without being overly in-your-face or distracting.

The top of your sidebar is another good place to obtain email subscribers. It sometimes doesn’t hurt to have multiple places where people can sign up. Email subscribers are so valuable that it’s worth putting in extra effort to build out your list.

CodeinWP, for example, uses multiple forms for this purpose, and many of the sticky. Like this one:

Sticky ads

Let’s face it — ads are a necessary evil for most of us. Our readers don’t like them and neither do many website creators. However, they’re essential to pay the bills, and that’s where digital advertising comes in.

Time Magazine uses their advertising as a sticky block, so it scrolls down when you’re reading any article.

It’s far less intrusive than a giant splash ad or a pop-up, so it’s not a bad way to generate some revenue without turning off too many readers.

Like all advertising, this should be done only in moderation. A wall of ads to the left or right of an article is an immediate turn off. One or two, coupled with links to more articles, is a good way to go about advertising.

Creative sticky UI elements in WordPress

Apart from the things listed above, you can be a lot more creative with your use of sticky UI elements in WordPress, but this will also mean potentially more work to get them implemented.

Here’s one example, by Gavick.com:

If you go to that site, you’ll notice that the whole island remains in the center for the most part as you scroll down. It shifts between foreground and background, but it’s always in the center. This sort of thing really catches the user’s attention.

It seems there really is no limit to creative uses of sticky UI elements in WordPress … since someone was able to make an island sticky.

How to find the right plugin?

There’s no shortage of plugins on WordPress.org that can help you implement sticky elements into your theme. Some might work wonderfully with your theme, while others might not be optimized for your site. It’ll take some trial and error to find the ones that work best.

The end result will be worth it, whether you’re hoping to drive social media traffic or convey important information to readers. Just make sure you test your plugins extensively to ensure there are no design quirks.

About the author: Lexie Lu is a freelance designer and blogger. She enjoys researching the latest trends and always has a cup of coffee in close proximity. She manages Design Roast and can be followed on Twitter @lexieludesigner.

All edits and witty rewrites by Karol K.