How to Add WordPress Menus to Your Divi Footer

by | Nov 18, 2021 | Etcetera | 0 comments

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

Desktop

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

Cell

Mobile

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

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 About Us Footer Menu

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

Create the Shop Categories 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.

Create the Shop Categories Footer 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.

See also  How to Set Up Taxes in WooCommerce

Upload the Footer Widgets

Add 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.

Add the Footer Widgets

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

Add 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

Add the Shop 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

Add a Footer Template in 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.

Add a Footer Template in the Theme Builder

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

Edit the Theme Builder Footer on the Front-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.

See also  How to Use the WordPress Scribd Embed Block

Edit the Theme Builder Footer on the Front-end

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

Add the About Us Sidebar

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

Add the About Us Sidebar

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.

Add the About Us Sidebar

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

Style 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

Style the About Us Sidebar

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
  • Style the About Us Sidebar

    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

    Style the About Us Sidebar

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

    • 18px
    • Line Top: 1.4em

    Style the About Us Sidebar

    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
    • Style the About Us Sidebar

      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

      Style the About Us Sidebar

      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
      • Style the About Us Sidebar

        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

          Add the Shop Categories 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.

          Add the Shop Categories Sidebar

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

          Choose the Store Classes Menu

          Select the Shop Categories 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

          Desktop

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

          Cell

          Mobile

          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.

See also  Find out how to Upload a Seek Shape in a WordPress Publish With a Shortcode
WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment