How to Add a Top Call to Action Bar in WordPress
Having a powerful top call to action bar can increase the conversion power of any website. This highly effective banner shows up on every page and is a constant reminder to visitors what the most important action to take on the site is. In this tutorial, we show 3 ways to implement a top bar call to action on a WordPress website. 2 of the methods require the Divi theme, and 1 will work on any WordPress site.
We know everyone learns differently – if you prefer video, please watch the video tutorial below! If you’re more of a step-by-step person, we’ve written out the steps under the video.
Watch the Tutorial:
How to Add a Top Call to Action Bar in WordPress – Step by Step
Method 0ne: Use the HelloBar free plugin
- Download and install the HelloBar plugin.
- Create a free HelloBar account.
- Select Target a URL
- Select Hello Bar.
- Customize the Hello Bar design, content, and target URL.
- Publish the changes.
- Copy the site snippet and add it to the website by going to Dashboard > HelloBar.
Note: If the HelloBar doesn’t display on the website immediately, go back to the HelloBar account and change the display settings.
Method Two: Use the Divi Theme Builder
- With the Divi theme, go to Divi > Theme Builder.
- Select Default Website Template and create a global header.
Note: With this method, you’ll need to recreate the menu using the Menu module.
- Create the top bar call to action by adding a new section with a single row.
- Add a text section and add the content for the call to action.
- Customize the content and link the target URL.
- Save changes.
- Adjust the padding in the Section settings and give the section a bold background color.
Tip: You can also add the target URL to the entire section for easier access on mobile devices.
Method Three: Use an Effortless Website Kit with a Built-In CTA Bar
- From your Effortless Website Kit, go to Theme Customizer and add your call to action in the Make It Yours section.
- Publish changes.
Don’t Yet Have the Divi Theme?
We absolutely LOVE building with Divi. Not only is it an extremely flexible page-building Wordpress theme, but it is also very user-friendly for our clients. One of the best things about Divi is it is a powerful tool for both web designers AND developers alike.
Whether you're more of a visual, front end person or you like to dig into the code and create dynamic websites - Divi is flexible enough for any project.
(Note this is our company affiliate link & should you choose to purchase through our link we will earn a commission. Thank you, you will adore Divi!!)
Sam is the CEO and lead web developer of Sam Munoz Consulting, LLC. Through years of coding, development & design experience - she is all about simplicity, minimalism & making websites that align with her client's business models & goals.
Keep Learning & Reading
Ensure the background image you use on your site shows up the way you want it to! Learn how to position a background image in Divi.
Stop spam in its tracks! Learn how to add reCAPTCHA to the Divi Contact Form module.
Ever see a font or color on another website and wonder what it is? Use these google chrome extensions for choosing brand colors and fonts & find out!