Diviโs secondary menu can be a lot more than a place where you list social networks and host a search bar. It is a fantastic place to engage your audience and call them to action in some way. Many of our free header/footer packs make great use of the secondary menu. In this tutorial, weโre going to go through the process of adding a Call to Action to the secondary menu bar of your Divi website.
Preview the Call to Action Module
Desktop
Mobile
For this article, we are going to use the Creative CV layout pack and freebie header. Our first step is to go to the header post and download the .json file.
Next, head into your WordPress dashboard. Then navigate to Divi โ Theme Builderย and click on theย up-and-down arrows icon to open the Divi portability options.
Inside the pop-up, click theย Import tab, find theย .json file for the header that you downloaded, and clickย Import Divi Theme Builder Templates.
With this done, you can click into theย Global Header to enter the Divi Builder. If prompted, selectย Creative CV from the dropdown menu.
When you enter the Divi Builder for your header, be sure to identify which menu bar is the primary and which is secondary. We identify the primary as the menu bar with the main navigation bar. So weโre going to add our Call to Action in the top-most bar.
Add a New Row
Because of the header layout weโre using, we want the CTA to have as much space as we can without disrupting the design. We chose this layout packโs header because it uses the large center column with smaller side columns. This will give it prominence on the site, no matter what device a user is on. You can see which one it is below, if youโre using a different header than we are.
Adjust Visibility for Existing Modules
If you use the same header layout as this tutorial, you will want to go into theย Row options for all rows and make sure that each column is individually visible on all devices. This is under Row Settings โ Column Settings โ Advanced โ Visibility.
Be sure to uncheck any devices that you want to see the columnโs content on.
Add the Call to Action Module
Next, we will click on theย black + icon to add a new module to the new row. We are using the Call to Action module in Divi, and you can find it near the top of theย Insert Moduleย dropdown.
Edit the Call to Action Module
If you notice in the screenshot below, the defaultย Call to Action module size and styling is not quite suited for the header menu. Or most websites, straight out of the box. So weโre going to style it appropriately so it doesnโt seem out of place.
Change the Background Color
First thing, letโs adjust the background to beย transparent so that no matter where the CTA sits, it matches the design around it. You find this option in the Background area under theย Content tab of the Call to Action module. The option to turn the background transparent is the circle in the palette with a red slash over the checkered squares.
Adjust the CTA Content
The Call to Action module is versatile in that you can use this single module to have a header, body text, and a button at the same time. Additionally, the real utility comes in that you can use the CTA module to link out toย two different URLs depending on how you use it (one for the button and one for the body/title).
However, because so much information can be included, the module can get pretty large. So weโre going to keep things pretty succinct for our CTA, editing the headline, body, and button text to fit more easily in the headerโs secondary menu bar. These editing options are in theย Call to Action Settings under theย Content tab. You can adjust all of them under the Text heading.
Adjust the Call to Actionโs Size and Spacing
Making sure that the Call to Action module fits well into the header is very important. So go into theย Designย tab of the module settings and find theย Spacing section. Set theย Top Margin for the CTA module toย -3vh and the Bottom Margin to -10vh. This should pull the menu bar into a more narrow position.
Next, go into theย Responsiveness settings and set the margins forย mobile to beย -9vh on top andย -20vh on bottom.
Customize CTA Colors
A CTA needs to be eye-catching. How else will it call any of your visitors to action? With that in mind, we want to go into theย Design tab for the CTA module and find theย Button heading. Under it,ย enableย the toggle that readsย Use Custom Styles for Button.
We are going to keep it simple and have the button in the CTA match the existingย Portfolio button from the header layout. Setย Button Text Color toย white (#ffffff),ย Button Background toย #fe5a25,ย Button Border Width toย 4px, andย Button Border Color toย white (#ffffff).
Once youโve finished customizing the design to match your existing layout, save your work by clicking the greenย Save button in the lower-right corner and then click theย X icon in theย upper-right to return to the theme builder.
In the Theme Builder, make sure the green button above saysย All Changes Saved. If it saysย Save Changes, the updates youโve made arenโt live yet.
Final Results for the Call to Action Module
When youโre finished with all the customizations, your site should appear similar to this:
Desktop
Mobile
Conclusion
Adding a Call to Action into your Divi siteโs secondary menu bar is a pretty simple process. Having a CTA module appear at the very top of your pages can be an incredible way to engage your audience. Users can get desensitized to pop-ups and various modals, but a good, old-fashioned call to action never fails to get their attention.
How do you use Calls to Action on your websites? Let us know in the comments!
Great layout guys!
I’ve followed the tutorial but I’m not getting the CTA button showing fully on any display size. I’m not too sure what I am doing wrong on this one!