Divi footer WordPress menus are a very powerful a part of any footer. Menus can also be created with textual content hyperlinks, menu modules, or widgets. The Divi menu module puts the hyperlinks on a horizontal line. Alternatively, footers continuously make the most of menus with hyperlinks that stack vertically. Thankfully, those menus are simple so as to add to Divi footers. On this article, we’ll see the right way to upload WordPress menus in your Divi footer.

Divi Footer WordPress Menus Preview

Listed here are the Divi footer WordPress menus that we will be able to create. They are going to permit us to modify them simply. Slightly than including the Divi footer WordPress menus with the Divi menu module, we’ll upload them with widgets. This permits the menu pieces to stack vertically, and it’s simple to modify them later.

Desktop

That is the desktop view. We’ll create the Store Classes and About Us menus.

Cell

Right here’s how they are going to glance on cellular.

Create Your Divi Footer WordPress Menus

We’ll get started by means of developing the Divi footer WordPress menus. I’m developing two menus: one for a store with the store pages and one for details about the corporate.

Create the About Us Footer Menu

First, create the menus you need to incorporate for your footer. Within the WordPress dashboard, move to Look > Menus. Click on Create a brand new Menu. Identify your menu and click on Create Menu. You gained’t want to set them as footer menus as a result of we’re going to choose them inside of Divi.

Create the menu and reserve it. Subsequent, upload the pages you need. Then, prepare them within the order you need to show them. Whilst you’re in a position, click on Save Menu.

Create the Store Classes Footer Menu

For the store menu, I’m the use of WooCommerce. Create a brand new menu by means of settling on Create a New Menu on the most sensible of the menu editor. Supply a reputation within the menu identify box and click on Create Menu.

WooCommerce provides new choices to the menu construction. Choose Product Classes within the left sidebar. Select the types you need to incorporate within the menu. Click on Upload the Menu. Organize them within the order you need. Click on Save Menu. We will be able to upload those menus to widgets.

Upload the Footer Widgets

Subsequent, upload the menus to the footer widgets. First, move to Look > Widgets within the WordPress dashboard. Subsequent, choose a Footer Space that you simply’re no longer the use of. Divi has six Footer Spaces to make a choice from and you’ll upload a brand new widget space the use of the instrument on the backside of the web page if you wish to have to. I’ve decided on Footer Space #1.

Inside the Footer Space that you need to make use of, click on the plus image to open the record of blocks. Seek for “menu” and choose Navigation Menu out of your possible choices.

Upload the About Us Menu

Give the menu a reputation and make a selection the menu you need to show. Click on Replace within the higher proper nook. Now it’s time to copy this procedure for the following menu.

Upload the Store Menu

For this one, I’ve decided on Footer Space #2. Insert the Navigation Menu block, upload a name, make a selection Store Menu, and choose Replace.

Your menus are actually in a position to be added in your Theme Builder templates.

Upload a Footer Template within the Theme Builder

First, you’ll desire a footer template. You’ll create your individual or add one. I’m the use of the footer template from the free Header and Footer Template for Divi’s Essential Oils Layout Pack. To find extra within the Divi weblog by means of in search of “unfastened footer”. Obtain the template and unzip it.

Subsequent, upload a template to the Divi Theme Builder. Within the WordPress dashboard, move to Divi > Theme Builder. Choose Portability and click on Import within the modal that opens. Click on Select Record, navigate to the report, choose it, and click on Import Divi Theme Builder Templates.

This may come with a header report. Delete it in case you don’t need to use it. Save your adjustments and navigate to the front-end of your website online. We’ll do the remainder of the paintings the use of Divi’s new full site front-end editing feature.

Edit the Divi Footer WordPress Menus at the Entrance-end

At the front-end of your website online, choose Allow Visible Builder on the most sensible of your display screen. For the reason that footer is world, it doesn’t topic what web page you’re on.

Hover over the footer and choose Edit Footer Template. We will be able to upload the 2 menus by means of changing the Our Merchandise and About Us spaces. On this structure, each spaces have been created with a couple of textual content modules. We’ll exchange them with sidebar modules to show the menus we created.

Upload the About Us Sidebar

First, delete the 2 textual content modules that create the About Us menu.

Subsequent, we want to upload a sidebar module the place you need to show the menu. Hover over the realm you need so as to add the module and click on the black plus image. Seek for “sidebar” and click on the Sidebar module.

The module’s atmosphere will open. Choose Footer Space #1. This may show the menu beneath the textual content module that we need to exchange.

Taste the About Us Sidebar

Structure and Textual content Settings

Choose the Design tab for the sidebar module settings. Disable Display Border Separator. Underneath Textual content, choose Heart Alignment.

• Display Border Separator: Disable
• Textual content Alignment: Heart

Telephone Textual content Settings

Hover over Textual content Alignment and choose the software icon when it seems that. Click on at the Telephone icon and choose Heart Alignment.

• Textual content Alignment
  • Telephone: Heart



Name Textual content

Scroll right down to Name Textual content. Select Spartan for the Name Font and choose Daring for the Name Font Weight.

• Name Font: Spartan
• Name Font Weight: Daring



Go away the Name Textual content to 18px. Set Name Line Top to 1.4em.

• 18px
• Line Top: 1.4em



Hover over Name Textual content Measurement and choose the software icon. Select the Telephone icon and set the Name Textual content Measurement to 13. Go away Name Line Top at 1.4em.

• Name Textual content Measurement
  • Telephone: 13px
  • Name Line Top: 1.4em



Frame Textual content

Underneath Frame Textual content, go away the Font at Default. Set the Font Weight to Mild. Set the Font Taste to Underline.

• Frame Font: Default
• Font Weight: Mild
• Font Taste: Underline



Set the Frame Textual content Measurement for the Desktop to 18px. Set the Frame Line Top to 1.4em.

• Desktop
  • Frame Textual content Measurement: 18px
  • Frame Line Top: 1.4em



Choose the Tool icon for the Frame Textual content Measurement. Set the Telephone Frame Textual content Measurement to 14px. Choose the Tool icon for the Frame Line Top and set the Telephone Frame Line Top to 1.2em.

• Telephone
  • Frame Textual content Measurement: 14px
  • Frame Line Top: 1.2em

Upload the Store Classes Sidebar



Subsequent, we’ll exchange the Our Merchandise menu with a sidebar that may display our store classes. First, delete the 2 textual content modules.



Subsequent, reproduction the About Us sidebar module and drag it into the positioning of our Store Classes menu.

Choose the Store Classes Menu



Open the Sidebar module. Within the Widget Space settings, choose Footer Space #2.

• Widget Are settings: Footer Space #2

Now save the adjustments and go out the Visible Builder. We’re carried out.

Divi Footer WordPress Menus Effects

Now we have two new menus which might be simple to modify. Right here’s how they give the impression of being on desktop and cellular.

Desktop



Listed here are the 2 menus at the desktop. They paintings neatly inside of their house.

Cell



Listed here are the 2 cellular menus. They stack typically and mix neatly with the menu within the center that we didn’t exchange.

Finishing Ideas on Divi Footer WordPress Menus

That’s our take a look at the right way to upload Divi footer WordPress menus in your website online. Those menus are simple to create the use of the footer widgets and including them with Sidebar modules. They have got the good thing about being simple to modify. While you’ve arrange your sidebar module you’ll exchange the menu simply.

We need to pay attention from you. Have you ever added Divi footer WordPress menus in your website online? Tell us within the feedback.

The publish How to Add WordPress Menus to Your Divi Footer seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more