Would you like to create a Vertical Menu in Footer with Divi Theme Builder or like to create a vertical menu in your sidebar without having to code using the Standard Text Module? Just like the image below.
Then you’ve come to the right place because Divi Supreme has a perfect Module for this problem.
Divi Supreme Menu Module provides a vertical menu structure within Divi and using it, you can easily create a Footer with nice underline hover animation effects rather than putting your links in the Text Standard Module.
In this article, we will go through step by step on how to create vertical footer menu using the built-in WordPress menu with Divi Supreme’s Menu Module.
Let’s get started.
To create a vertical Footer you’ll first need to set up your Menu in your Dashboard. Go to Appearance > Menus and set up your Menu
Let’s create this
Let’s start creating a Vertical Footer Menu. First of all, you’ll need to set up your Footer. For this tutorial, we’ll be using the Footer of Donut Shop Landing Page Layout. First, we’ll need to delete the Text module which was already added in the footer.
At that same place Add the Supreme Menu Module to start working.
In the Module Content Settings enter any sort of Title (Remain Empty if you don’t want a title) and Choose your Menu that you just set up.
Under the Text Panel, you can change the Text Alignment and Change the Text Color to Light (If you’ve got a dark background ) or Dark (If you’ve got a white background). For us, the background was Dark so we choose the Light Color.
Now under the Menu Panel, You can design your Menu Items text. You can change their fonts, size, Type and more. But you’re supposed to make these changes (You can design in your own way)
- Menu Link Color: #fff
- Space Between: 7px
- List Style Type: None
- Menu Font: Poppins
- Menu Font Size: 16px;
You can also add some Gap between the Title text and Menu Links. Just open the Title Panel and add some Spacing in the Bottom Gap. We’ve set it to 25px.
- Bottom Gap: 25px
Adding Underline Animation to Menu Link
It’s now time to add a Really cool animation to the Menu Link. Open up the Animation Panel and enable Use Link Hover Animation. You can change the direction of the Underline from 3 different types.
- Left to Right
- Right to Left
- Center Out
We’ve set the Animation to Left to Right and changed the color to white (#fff).
All Done! Now have a look at your Footer Menu. You see how easy it was to add a vertical menu to Footer with the Supreme Menu module.
So that’s it. That’s how easy you create beautiful Navigation links for your Footer using the Divi Supreme Menu Module.
The Divi Supreme Pro Menu Module comes with schema markup and underline hover animation.
What is Schema Markup
Schema markup tells search engines a lot of important things. They are optional, but helpful in websites. For reputation management, we use schema to help Google and Bing know which sites are related. For example, we recommend schema be placed on the main website of a company and use “sameas” markup (more on this later) to show search engines the websites of sites related to the company, like it’s Facebook page, Twitter, and more. By adding this type of schema to the HTML code, search engines know for certain which sites are related to the company. They don’t have to guess. This often results in a better search engine profile for the company. It works for people too.
If you found this post helpful don’t forget to leave your thoughts in the comment section below we’d love to hear.
How to access the Divi Supreme Menu Module
To use the Divi Supreme Menu module with schema markup and hover animation, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.
Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.
So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Divi Supreme Menu Module extension in the comments below.
Or try out the Divi Supreme Lite
Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.