How to create a Vertical Footer Menu in Divi

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.

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.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

3 Comments

  1. Chris

    Makes a good first impression.
    However, I cannot change most of the settings under Design like Title Text size, color, or font, Menu Text would allow changes of text size but not of Color or Font, and lots more. I also would like to set the links left aligned with the title. Some things are working like Title Text Shadow or vertical gaps and text sizing in Menu text.

    Reply
    • Chris

      Wait a moment – I just found out that most settings work – they just won’t show in the Divi Visual Builder. When I check my site live all colors, fonts, text sizes and so on are as I set them up. The only thing I couldn’t do was making ul and li left aligned (so no gaps before the list elements)

      Reply
      • Divi Supreme

        Hi Chris. It won’t show up in Visual Builder? Maybe some conflict or etc. Have never heard of such issue. Quite curious what went wrong. All of our modules are Visual Builder compatible. Do you want to send us an email at support through our contact form along with the divi supreme version and URL for us to inspect? Our team will look into it 🙂 Otherise, you can also join our facebook community, i’m sure the community will also help out 🙂

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

three × four =