One of the problems with long articles is that it can be hard to persuade a user to take some action. Sometimes the user gets “scroll fatigue”, where they whizz past your content, no matter how much you try and get them to engage. I’ve written before about how to break up content, but often this doesn’t work either. In this tutorial, I’ll show you how to create a floating Call to Action (CTA), that’s always visible no matter how much your visitor scrolls. This gives them an “off-ramp”, where they’re scrolling and not sure what to do. I’ve tested it, and it works.
The Floating CTA in Action
Here’s what my floating CTA looks like on my NameHero review page on my website WP-Tweaks.com:
This is a fixed position CTA that disappears when the viewport shrinks so as to not interfere with the content. You can experiment with various color combinations so that it meshes well with your theme.
Creating this is dead simple. Just follow these steps.
Create the Button in Your Editor and a Custom HTML Block
If you use WordPress, you can use the in-built button creator to make a button like the one above. I place this at the bottom of the page, right at the end of my article.
Then right on top of the button, create a custom HTML block that will hold the CSS code like this:
I use a variable shortcode system to display prices on my website, so that’s why the button above looks so weird 🙂 .
Into the custom HTML block, paste the following code:
<style>
@media only screen and (min-width: 1220px) {
#button-test {
position: fixed;
top: 40px;
right: 40px;
}
}
</style>
Then save your changes, and you’re done!
Positioning via the “Fixed” Value
The way we position our CTA, we use the “position: fixed;” CSS statement and then set the “top” and “right” values in pixels to put it where we want. Because it’s fixed, it won’t move when the viewer scrolls the page and will always be visible.
This sounds good, but there’s a problem. How do we deal with mobile phones, and how do we prevent the CTA from obscuring the text of the article when the visitor resizes the page?
Make the CTA Disappear on Mobile Phones
Depending on how wide your button is, you should make the button vanish from the top of the screen when the screen width goes below a certain point. To do this, experiment with various screen sizes for a given button size, and determine the minimum width in pixels where you can safely show it. A good way to get this number is to remove the line containing “media only” and the last closing bracket. This will make the button visible constantly, and you can experiment with the screen size to see the exact width at which the button starts covering the screen.
After you’ve found the value, plug it into the “min-width” variable in the CSS code. Repeat this for each new CTA button because the width of each button will change. Now you’re done!
Break up Your Article with CTAs
Another strategy to increase click-throughs is to break up your long article with large CTAs. You have to experiment to see what works. Don’t confront your visitor with a large amount of text without showing them some CTAs. This is often exactly what they’re looking for, and far from being annoying. Try it and see!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Leave a Reply