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.

Preview

Setup Menu

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.

Result

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.