If you frequent the Divi groups on Facebook, you’ve likely seen or been helped by “Jonathan Forney”.  His extensive knowledge of website design plus his proclivity to go the extra mile when helping folks in the Divi community made a huge impression on us, and we are super excited that he agreed to contribute to the Divi Help tutorials. And as is typical of Jonathan, he went above and beyond and totally knocked this out of the park!

In the following video, Jonathan will be walking you through the steps on adding a call to action to the Divi menu.  While this customization does require some CSS, you can find the snippet of code directly below the video.  As is the Divi Help way, all you have to do is copy and paste. If you’re feeling creative, you can replace the hex codes in the CSS snippet to better suit the color palette of your website.

Once you’ve assigned the custom class as Jonathan instructed, copy and paste the following CSS into your child theme stylesheet (if applicable) or in the e-panel custom CSS box. You can customize the button further by replacing the hex codes (identified below by the bolded text)  with the color of your choice. To find a hex code for a color, check out the various color tools listed on our resource page.

@media only screen and ( min-width: 981px ) {
.divihelp a {
display: inline-block;
margin-left: 1em;
height: 10px;
padding: 1em;
padding-bottom: 2em !important;
border: 1px solid #000000;
border-radius: 5px;
color: #000000 !important;
}
.divihelp a: hover {
color: #ffd700 !important;
background-color: #000000;
}
}

To see more of Jonathan’s work, please see his portfolio.  If you’d like to get in touch with him, please leave a comment below, or email him directly at jonathan@jdscdw.com.