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!!)
Article by
Sam Munoz
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
How to Position a Background Image in Divi
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.
How to Add reCAPTCHA to the Divi Contact Form Module
Stop spam in its tracks! Learn how to add reCAPTCHA to the Divi Contact Form module.
Must-Have Chrome Extensions for Choosing Brand Colors and Fonts
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!