Header customization: Add a call-to-action button to the header of the Beaver Builder theme

Conversion optimization is a process you undertake to ensure the traffic to your website is converting into leads and sales.

You do this because more leads and sales = more profit.

A great way to optimize your website’s conversion rate is to add a large call-to-action button up the top that, once clicked, begins to guide your customer down the road to handing over their credit card or contact details.

What we’ll be creating

We’ll be creating a button like the ENER IN GO SERIES one below.

header-customization-call-to-action-button

Step 1: Add a CSS class to the menu item you want to be styled to stand out

Go to your WordPress Dashboard and navigate to Appearance > Menus.

 

Next, you may need to show the CSS Classes menu property. To do this, as per the animation below, click on Screen Options in the top right hand corner, and once it slides down, make sure you CHECK the CCC Classes checkbox.

header-add-cta-button

Next, let’s add the CSS class to the menu link we want to stand out. See the below screenshot. To follow this tutorial we recommend you add the same CSS class link-cta as we have done.

header-add-cta-show-css-classes

Step 2: Add the necessary CSS

Next, go to where you add your CSS (we recommend in your themes style.css file) and add the below code.

NOTE: This code below will only work for the Beaver Builder Theme when you have the navigation set to the right hand side. If you have the navigation set to the left or centered below, you will need to update the CSS.

https://gist.github.com/ec5cceacc2d4077faa1db29e2fcf5767

And that’s it! How easy was that!

Comment below to show us where you use this technique

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

2 thoughts on “Header customization: Add a call-to-action button to the header of the Beaver Builder theme”

  1. Thanks for the tip, this is great.
    I’ve implemented this on a clients site and he has requested that the CTA on mobile not be hidden in the menu. So on a mobile phone a user can just got to the website and click to call. Do you an easy solution for this?
    The site is http://www.millardandhoganbuilders.com.au
    Thanks

    1. Hi Tim. Thank you for your comment. As you are using the Beaver Builder Theme what you could do is add a button to the top bar in the theme and then only show this on mobile devices. So, you’d login and go to appearance > Customize and then Header > Top Bar Layout and make it one column. Then, add some html like Call Us and then in your style.css I would hide this top bar on larger devices using a CSS media query like
      @media (min-width: 993px) {
      .fl-page-bar{display:none;}
      }

      Let me know how that goes 🙂

Leave a Comment

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

row-general-opt-in
row-general-opt-in
Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top