The most important information on your site should exist above the fold (roughly the top 600px of your screen). Divi takes advantage of this concept with their secondary menu bar. The menu bar sits at the very top of your site to showcase important elements like share buttons, a secondary menu, a phone number, and an email address. Users should always be able to find this important information no matter what page they land on and without having to scroll to find it.

If you are looking for your site to generate more signups, offer a discount, or have a page that you’re looking to direct traffic to, this post is for you. We’ll work on creating a call to action (CTA) that is embedded in Divi’s secondary menu bar. There are a few popular plugins like the Hellobar and Sumome’s Smart Bar that are dedicated to capturing leads. I recommend looking into a powerful plugin like these if you are serious about taking lead generation to the next level. But for today I’m keeping it simple.

I’m going to show you how to add a simple CTA to Div’s top bar, without the use of a plugin. I will even show you how to change the position of Divi’s top bar elements. Who knows? You may even decide to use that space for something completely unique.

Let’s get started.

Implementing the Design with Divi

Adding a Secondary Menu Bar with Header Elements

In the WordPress Admin go to Divi → Theme Customizer. Select Header & Navigation → Header Elements

Under Header Elements, make sure the option to show social icons is unchecked and enter a phone number and an email address in the two text boxes.

Styling the Secondary Menu Bar

Now go back to Header & Navigation and select to customize the Secondary Menu Bar. Make changes to the following settings:

Make Full Width: yes
Text Size: 14px
Font style: TT (uppercase)
Background Color: #eb593c
Dropdown Menu Background Color: #eb593c

Adding the CTA to the header.php file in your child theme

In order to add the CTA section to the top bar, you will need to add a line of html code to the header.php file in the Divi theme folder.

If you haven’t created a child theme yet, it is a good idea to do so before you start making changes to the theme template files. Click here to learn how to add a child theme.

Once you have a child theme created and active on your site, access your child theme files using an FTP client like FileZilla. Copy the header.php file from your Divi theme folder and paste it into your child theme folder. Make sure you keep the file name exactly the same (header.php) and you copy over all of the code that was in the original file.

Once the header.php file is placed in your child theme folder, use a text editor to open/edit the file (make sure you are editing the child theme version).

Locate the div with an id of “et-secondary-menu”. This is the div that contains the secondary menu items.

Add the following code just above the secondary menu div:

<div class="cta"> Want to Learn More ... <a href="#">Click Here</a></div> 

Notice the class “cta” attached to the div. This is what we will use to style the CTA later on.

You will need to replace the hashtag (#) in the href attribute with the url of the page you want the user to visit when they click the CTA link. For example, if you want to drive more users to your contact page, you would put the url to that page.

Also, once you know what your CTA will be, you can change the text “Want to Learn More…” and the link text “Click Here” to whatever you want. Remember to keep it short since there is not a lot of space to work with.

Now let’s view your site to see what the top bar looks like so far.

Right now your top bar contents are out of place and need styling. You can add some custom CSS to fix this.

Final Touches

In WordPress Admin, go to Divi → Theme Options. Scroll down to the custom CSS box and enter the following css:

#top-header .container {
    padding-top: 1.3em;
    font-weight: 600;
    padding-bottom: 0.75em;
}

#et-info {
    width: 33.3%;
    float: right;
    text-align: right;
}

.cta {
width: 33.3%; 
text-align:center;
float: right;
margin-top: -3px;
}

.cta a {
background: #fff;
    color: #eb593c !important;
    padding: 5px 10px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 700 !important;
    transition: all 0.5s;
}

.cta a:hover {
background: #555;
color: #fff !important;
}

#et-secondary-menu {
width: 33.3%;
float: left; 
text-align: left;
}

@media (max-width: 980px){
#et-info {
    width: 50%;
    float: right;
    text-align: right;
}

.cta {
width: 50%; 
text-align:center;
float: left;
margin-top: -3px;
}

#et-info {
padding-top:0px;
padding-bottom: 0.75em;
}
}

@media (max-width: 740px){
.cta {display:none;}
#et-info {width: 100%;}
}

This CSS code does four key things to your top bar. 1) It divides your header info, CTA, and secondary menu into a one-third column layout (each with a 33.3% width). 2) It positions the header info to the right column of the top bar, the CTA to the middle, and the secondary menu to the left (this menu is currently inactive but is there if you decide to use it). 3) It styles your CTA. 4) It optimizes the top bar for mobile devices.

That’s it!

Now your top bar is complete with an elegant call to action.

Closing Thoughts

When deciding on the structure of this top bar, I thought it fitting to have the CTA in the center with nothing to the left of it in order to stand out as the first thing the user sees when naturally reading the content from left to right.

Also, you may need to adjust the width of each of the top bar sections in your custom CSS to make more room for your CTA. I tried to keep it small for this example in case you wanted to keep the full functionality of the header info and the secondary menu.

Of course, there are different ways to use this space other than for a CTA. You could use it to display a tagline, a logo/graphic, or a short testimonial.

I hope you enjoy this feature. Feel free to post any input in the comments.

The post Customizing Divi’s Secondary Menu Bar with A Call to Action appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!