Menu Call To Action Button

by | Jun 2, 2019 | tutorials

Menu Call To Action Button

by | Jun 2, 2019 | tutorials

It’s about conversions

 

Part of optimizing a page for conversions is making sure there is a clear call-to-action (CTA).  You often see that CTA repeated several times on the page, whether is is ‘BUY NOW’ or ‘SIGN UP’ or whatever the case may be, you want to have it in front of the user fairly frequently.

One trick you can employ to help with this is turning one of the navigation items into a call to action button.  If you have a sticky menu, then your CTA will always be on the screen.

Here is the CSS that you need to make this happen.  You can edit the style of the button to match the buttons already on your website.

 Once you have this code in place, you may notice that nothing is happening yet.  We need to specifiy which navigation item is the CTA button.  We do that by assigning a CSS class.   In the WordPress dashboard, go to Appearance > Menus.

 

/*Menu CTA Button*/
@media only screen and (min-width: 981px){
#page-container .menu-cta a {
    background-color: #de3831;
    color: #ffffff!important;
    padding: 13px;
    padding-bottom: 13px !important;
    margin-top: -5px; 
    border-radius: 0px;
    border-width: 2px;
    border-style: solid;
    border-color: #de3831!important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.7s cubic-bezier(.25,.8,.25,1);
}

#page-container .menu-cta:hover a {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    background: #ce2821;
    color: #fff!important;
    opacity: 1!important;
    padding: 13px;
    padding-bottom: 13px !important;
    margin-top: -5px; 
    border-radius: 0;
    border-width: 2px;
    border-style: solid;
    border-color: #ce2821;
	}}

/*End Menu CTA Button*/

The Screen Options menu is a handy contextual menu found in the upper-right corner of the WordPress dashboard

The first thing you will want to do is enable the CSS class box in the WordPress menu editor.  CSS classes are not enabled by default.  Once on the menu page, click on screen options in the upper right corner of the screen, and enable the CSS Classes checkbox from the menu.

Next you can open the menu item your want change into a CTA button, and enter a css class of menu-cta.  I said item, and not items because you don’t want to use this on multiple items, or else you’re defeating the purpose.

Once the class is assigned, the button will appear, and you can adjust the styling as needed.

By Steve Law
Steve founded Mission Bell Communications in 2015. Before that Steve worked in the technology industry and also worked for a nonprofit organization in Mexico. Steve has always loved technology, and all things creative.