• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Startup Hero

The Official Blog Of Name Hero

Learn To Fly Above The Competition Get Started
  • HomeWelcome
  • CoursesVideo Training Center
  • About UsWhat is StartupHero?
  • BlogGet the latest
  • Start HereStartup 101
  • SpeakingPodcast & Media
  • ResourcesTools to help You
    • Reselling WordPress Hosting
    • Resell Hero
    • How To Start A Blog
  • NameHeroCloud Web Hosting

How To Create A Floating CTA That’s Always Visible

By Bhagwad Park on May 23, 2022 0

How To Create A Floating CTA That’s Always Visible

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:

NameHero Floating CTA Always Visible

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:

Button and CSS Visible in the Editor

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!

Bhagwad Park Profile Picture
Bhagwad Park

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!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Connect With Us!

Superhero Resources

Fix Common Issues

  • How To Setup Free And Automatic SSL Certificates
  • How To Setup Cloudflare With Railgun
  • How To Fix Memory Exhausted Errors In WordPress
  • How To Edit PHP Version/Upload Limit/Add Extensions
  • How To Move/Migrate Your Business To Name Hero

Free Guides

  • How To Setup NameHero Hosting
  • How To Create A Web Hosting Business With WordPress
  • How To Start A WordPress Blog
  • How To Migrate WordPress To A VPS
  • How To Speed Test And Optimize Your WordPress Website
  • Magento 2.X Installation Guide
  • How To Clean Up A WordPress Hack

Training

Recent Posts

  • The Best WordPress Plugin To Combat Plagiarism
  • Is It Time to Bring Back Blog Comments?
  • Two Filters That No Longer Work In Gutenberg (And Workarounds)
  • Migrating To The New Cloudflare Managed Rules Interface
  • How To Sort Posts By The “Last Modified” Date
  • How To Make WordPress Send E-mail From Another Address
Subscribe in a reader
  • Web Hosting
  • WordPress Hosting
  • Reseller Hosting
  • VPS Hosting
  • Twitter
  • Facebook
  • LinkedIn
  • YouTube
  • FTC Disclosure
  • Earnings Disclosure
  • Privacy Policy

Copyright © 2023 · Smart Passive Income Pro on Genesis Framework · WordPress · Log in