Divi’s secondary menu is usually a lot greater than a spot the place you listing social networks and host a search bar. It’s a unbelievable place to have interaction your viewers and name them to motion in a roundabout way. Lots of our free header/footer packs make nice use of the secondary menu. On this tutorial, we’re going to undergo the method of including a Name to Motion to the secondary menu bar of your Divi web site.
Preview the Name to Motion Module
Desktop
Cell
Add a Header Menu with a Secondary Menu Bar
For this text, we’re going to use the Artistic CV format pack and freebie header. Our first step is to go to the header publish and obtain the .json file.
Subsequent, head into your WordPress dashboard. Then navigate to Divi – Theme Builder and click on on the up-and-down arrows icon to open the Divi portability choices.
Contained in the pop-up, click on the Import tab, discover the .json file for the header that you just downloaded, and click on Import Divi Theme Builder Templates.
With this achieved, you’ll be able to click on into the International Header to enter the Divi Builder. If prompted, choose Artistic CV from the dropdown menu.
Add the Name to Motion to the Secondary Menu Bar
If you enter the Divi Builder to your header, you’ll want to determine which menu bar is the first and which is secondary. We determine the first because the menu bar with the principle navigation bar. So we’re going so as to add our Name to Motion within the top-most bar.
Add a New Row
Due to the header format we’re utilizing, we would like the CTA to have as a lot area as we will with out disrupting the design. We selected this format pack’s header as a result of it makes use of the massive heart column with smaller aspect columns. This may give it prominence on the positioning, it doesn’t matter what gadget a person is on. You’ll be able to see which one it’s under, in the event you’re utilizing a unique header than we’re.
Modify Visibility for Current Modules
In case you use the identical header format as this tutorial, you’ll want to go into the Row choices for all rows and make it possible for every column is individually seen on all units. That is beneath Row Settings – Column Settings – Superior – Visibility.
Be sure you uncheck any units that you just need to see the column’s content material on.
Add the Name to Motion Module
Subsequent, we’ll click on on the black + icon so as to add a brand new module to the brand new row. We’re utilizing the Name to Motion module in Divi, and you will discover it close to the highest of the Insert Module dropdown.
Edit the Name to Motion Module
In case you discover within the screenshot under, the default Name to Motion module measurement and styling is just not fairly fitted to the header menu. Or most web sites, straight out of the field. So we’re going to model it appropriately so it doesn’t appear misplaced.
Change the Background Colour
Very first thing, let’s modify the background to be clear in order that regardless of the place the CTA sits, it matches the design round it. You discover this selection within the Background space beneath the Content material tab of the Name to Motion module. The choice to show the background clear is the circle within the palette with a pink slash over the checkered squares.
Modify the CTA Content material
The Name to Motion module is flexible in that you should use this single module to have a header, physique textual content, and a button on the similar time. Moreover, the true utility is available in that you should use the CTA module to hyperlink out to two completely different URLs relying on how you employ it (one for the button and one for the physique/title).
Nevertheless, as a result of a lot data may be included, the module can get fairly giant. So we’re going to maintain issues fairly succinct for our CTA, modifying the headline, physique, and button textual content to suit extra simply within the header’s secondary menu bar. These modifying choices are within the Name to Motion Settings beneath the Content material tab. You’ll be able to modify all of them beneath the Textual content heading.
Modify the Name to Motion’s Measurement and Spacing
Ensuring that the Name to Motion module matches properly into the header is essential. So go into the Design tab of the module settings and discover the Spacing part. Set the High Margin for the CTA module to -3vh and the Backside Margin to -10vh. This could pull the menu bar right into a extra slender place.
Subsequent, go into the Responsiveness settings and set the margins for cell to be -9vh on high and -20vh on backside.
Customise CTA Colours
A CTA must be eye-catching. How else will it name any of your guests to motion? With that in thoughts, we need to go into the Design tab for the CTA module and discover the Button heading. Below it, allow the toggle that reads Use Customized Kinds for Button.
We’re going to maintain it easy and have the button within the CTA match the present Portfolio button from the header format. Set Button Textual content Colour to white (#ffffff), Button Background to #fe5a25, Button Border Width to 4px, and Button Border Colour to white (#ffffff).
When you’ve completed customizing the design to match your current format, save your work by clicking the inexperienced Save button within the lower-right nook after which click on the X icon within the upper-right to return to the theme builder.
Within the Theme Builder, ensure the inexperienced button above says All Adjustments Saved. If it says Save Adjustments, the updates you’ve made aren’t reside but.
Closing Outcomes for the Name to Motion Module
If you’re completed with all of the customizations, your web site ought to seem just like this:
Desktop
Cell
Conclusion
Including a Name to Motion into your Divi web site’s secondary menu bar is a fairly easy course of. Having a CTA module seem on the very high of your pages may be an unbelievable technique to interact your viewers. Customers can get desensitized to pop-ups and numerous modals, however a very good, old school name to motion by no means fails to get their consideration.
How do you employ Calls to Motion in your web sites? Tell us within the feedback!
The publish Customizing Divi’s Secondary Menu Bar with a Name to Motion appeared first on Elegant Themes Weblog.