How to Add Post Category Menu Widgets to Your Divi Global Footer

Aug 11, 2020 | Everything Divi for WordPress




When you’re building a custom footer inside Divi’s Theme Builder, there are several ways to approach adding the footer items. You could go for a module-based footer, where you add page footer items inside Text Modules with proper links, but you could also decide to add different footer widgets to your design, using Divi’s Sidebar Module, and style them using Divi’s built-in options. In today’s tutorial, we’ll show you how to go about the second option. More specifically, we’ll show you how to add post category menu widgets to your footer. The design style we’re using matches the Food Recipes Layout Pack perfectly. We’ll start by adding the different post categories to our website. We’ll then build the footer menus inside WordPress. Next, we’ll create our widgets and last but not least, we’ll add a the widgets to our custom-built Divi footer inside the Divi Theme Builder. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

how-to-add-post-category-menu-widgets-to-your-divi-global-footer How to Add Post Category Menu Widgets to Your Divi Global Footer

Download The Global Footer Template for FREE

To lay your hands on the free global footer template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Set up Post Categories for Your Website

Go to Your Post Categories

In the first part of this tutorial, we’re going to make sure all post categories are set up before we start adding them to custom footer menus. To do that, navigate to your post categories inside your WordPress backend.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-1 How to Add Post Category Menu Widgets to Your Divi Global Footer

Setup Post Category Structure of Your Choice

Set up all different post categories you want to include in your footer if you haven’t done that already. For this tutorial, we’ll need three different groups of post categories as we’re going to include three different post category menu widgets in our custom footer.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-2 How to Add Post Category Menu Widgets to Your Divi Global Footer

2. Create Several Category WordPress Menus

Go to Menus

Next up, we’ll create a separate menu for each group of post categories. Navigate to menus inside the appearance settings of your WordPress website.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-3 How to Add Post Category Menu Widgets to Your Divi Global Footer

Create First Footer Menu

Add a first footer menu and by giving it a recognizable name.

  • Menu Name: Footer Menu #1

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-4 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Post Categories

Add your first group of post categories to this new menu.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-5 How to Add Post Category Menu Widgets to Your Divi Global Footer

Create Second & Third Footer Menu For Other Post Categories

Do the same thing for two other post category groups.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-6 How to Add Post Category Menu Widgets to Your Divi Global Footer

  • Menu Name: Footer Menu #2

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-7 How to Add Post Category Menu Widgets to Your Divi Global Footer

  • Menu Name: Footer Menu #3

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-8 How to Add Post Category Menu Widgets to Your Divi Global Footer

3. Create Footer Widgets

Go to Widgets

Now that we have our post categories and post category menus in place, we can place them inside our footer area widgets. To do that, navigate to widgets in your WordPress backend.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-9 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Footer Menu #1 to Footer Area #1

There, add a first navigation menu widget to your Footer Area #1. Inside the navigation menu, select the first footer menu you’ve created in the previous part of this tutorial.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-10 How to Add Post Category Menu Widgets to Your Divi Global Footer

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-11 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Footer Menu #2 to Footer Area #2

Place the second post category menu in the second footer area.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-12 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Footer Menu #3 to Footer Area #3

And the third footer menu in the third footer area.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-13 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Recent Posts to Footer Area #4

The last widget we need, which we’ll add to the fourth footer area, is the recent posts widget. This widget will dynamically show your 5 last recent posts as links.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-14 How to Add Post Category Menu Widgets to Your Divi Global Footer

3. Build Global Footer Inside Divi Theme Builder

Go to Your Divi Theme Builder & Start Building Footer Template

Now that our post categories, post category menus and widgets are in place, it’s time to switch over to Divi! Go to your Divi Theme Builder and start building a global or custom footer.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-15 How to Add Post Category Menu Widgets to Your Divi Global Footer

Section Settings

Background Color

Once inside the footer template, you’ll notice a section. Open that section and add a background color to it. The style we’re using throughout this design matches the Food Recipes Layout Pack perfectly, but the approach will work with any kind of design you choose.

  • Background Color: #ff7864

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-16 How to Add Post Category Menu Widgets to Your Divi Global Footer

Background Image

Add a background image next. If you want to use the exact same one as in this tutorial, you can find it in the folder that you are able to download at the beginning of this tutorial.

  • Background Image Size: Fit

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-17 How to Add Post Category Menu Widgets to Your Divi Global Footer

Spacing

Move on to the section’s design tab and remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-18 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-19 How to Add Post Category Menu Widgets to Your Divi Global Footer

Gradient Background

Without adding any modules yet, open the row settings and apply a gradient background.

  • Color 1: rgba(10,10,10,0.05)
  • Color 2: rgba(10,10,10,0.18)

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-20 How to Add Post Category Menu Widgets to Your Divi Global Footer

Sizing

Move on to the row’s design tab and modify the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter width: 1
  • Equalize Column Heights: Yes
  • Max Width: 1680px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-21 How to Add Post Category Menu Widgets to Your Divi Global Footer

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-22 How to Add Post Category Menu Widgets to Your Divi Global Footer

Column 1 Settings

Spacing

Then, open the column 1 settings and add some custom padding values in the design tab.

  • Top Padding: 5%
  • Bottom Padding: 5%
  • Left Padding: 5%
  • Right Padding: 5%

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-23 How to Add Post Category Menu Widgets to Your Divi Global Footer

Border

We’re using a right border on desktop too.

  • Right Border Width:
    • Desktop: 2px
    • Tablet & Phone: 0px
  • Right Border Color: #ff7864

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-24 How to Add Post Category Menu Widgets to Your Divi Global Footer

Column 2 Settings

Spacing

Next, open the column 2 settings and apply the following padding values to it:

  • Top Padding: 5%
  • Bottom Padding: 5%
  • Left Padding: 5%
  • Right Padding: 5%

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-25 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Image Module to Column 1

Upload Logo

Time to add modules, starting with an Image Module in column 1. Upload a logo of your choice and style it however you want.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-26 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Text Module to Column 2

Add H2 Content

In the second column, we’re adding a Text Module with some descriptive H2 content.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-27 How to Add Post Category Menu Widgets to Your Divi Global Footer

H2 Text Settings

Move on to the design tab and change the H2 text settings accordingly:

  • Heading 2 Font: Cormorant Garamond
  • Heading 2 Font Weight: Medium
  • Heading 2 Text Color: #ffffff
  • Heading 2 Text Size:
    • Desktop & Tablet: 40px
    • Phone: 35px
  • Heading 2 Line Height: 1.3em

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-28 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Row #2

Column Structure

On to the next row. In this row, we’ll place all our widgets. Choose the following column structure:

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-29 How to Add Post Category Menu Widgets to Your Divi Global Footer

Background Color

Without adding any modules yet, open the row settings and apply a background color.

  • Background Color: rgba(10,10,10,0.05)

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-30 How to Add Post Category Menu Widgets to Your Divi Global Footer

Sizing

Move on to the design tab and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Max Width: 1680px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-31 How to Add Post Category Menu Widgets to Your Divi Global Footer

Spacing

Remove all default top and bottom padding as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-32 How to Add Post Category Menu Widgets to Your Divi Global Footer

All Column Spacing

Then, open the columns individually and apply the following padding values to each one of them:

  • Top Padding: 5%
  • Bottom Padding: 5%
  • Left Padding: 5%
  • Right Padding: 5%

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-33 How to Add Post Category Menu Widgets to Your Divi Global Footer

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-34 How to Add Post Category Menu Widgets to Your Divi Global Footer

Column 1 Border

Next up, we’ll add a border to column 1.

  • Right Border Width:
    • Desktop & Tablet: 2px
    • Phone: 0px
  • Right Border Color: #ff7864

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-35 How to Add Post Category Menu Widgets to Your Divi Global Footer

Column 2 Border

We’re using the same border, with some different responsive values, for the second column.

  • Right Border Width:
    • Desktop: 2px
    • Phone & Tablet: 0px
  • Right Border Color: #ff7864

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-36 How to Add Post Category Menu Widgets to Your Divi Global Footer

Column 3 Border

And last but not least, we’ll add a right border to the third column as well.

  • Right Border Width:
    • Desktop & Tablet: 2px
    • Phone: 0px
  • Right Border Color: #ff7864

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-37 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Sidebar Module to Column 1

Time to add our post category menu widgets! To do that, we’ll use Divi’s built-in Sidebar Module. Add one to the row’s first column.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-38 How to Add Post Category Menu Widgets to Your Divi Global Footer

Select Footer Area #1

Select the first footer area. This is linked to our first post category menu we’ve created.

  • Widget Area: Footer Area #1

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-39 How to Add Post Category Menu Widgets to Your Divi Global Footer

Layout

Move on to the module’s design tab and disable the border separator.

  • Show Border Separator: No

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-40 How to Add Post Category Menu Widgets to Your Divi Global Footer

Body Text Settings

Modify the body text settings as well.

  • Body Font: Montserrat
  • Body Font Weight: Medium
  • Body Text Color: #ffffff
  • Body Text Size: 13px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-41 How to Add Post Category Menu Widgets to Your Divi Global Footer

Spacing

And complete the module settings by adding some top and bottom padding to the spacing settings.

  • Top Padding: 5%
  • Bottom Padding: 5%

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-42 How to Add Post Category Menu Widgets to Your Divi Global Footer

Clone Sidebar Module Twice & Place Duplicates in Column 2 & 3

Once you’ve completed the first Sidebar Module, you can clone it twice and place the duplicates in column 2 and 3.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-43 How to Add Post Category Menu Widgets to Your Divi Global Footer

Change Footer Areas

Modify the widget area for each duplicate to display the different post category menus you’ve created.

  • Widget Area: Footer Area #2

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-44 How to Add Post Category Menu Widgets to Your Divi Global Footer

  • Widget Area: Footer Area #3

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-45 How to Add Post Category Menu Widgets to Your Divi Global Footer

Add Sidebar Module to Column 4

Now, in the last column, we’re adding a new Sidebar Module.

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-46 How to Add Post Category Menu Widgets to Your Divi Global Footer

Select Footer Area #4

In this module, we’re selecting the fourth footer area we’ve created containing our recent posts.

  • Widget Area: Footer Area #4

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-47 How to Add Post Category Menu Widgets to Your Divi Global Footer

Title Text Settings

Move on to the module’s design tab and modify the title text settings as follows:

  • Title Font: Cormorant Garamond
  • Title Text Color: #ffffff
  • Title Text Size: 30px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-48 How to Add Post Category Menu Widgets to Your Divi Global Footer

Body Text Settings

Make some changes to the body text settings too.

  • Body Font: Montserrat
  • Body Font Weight: Medium
  • Body Text Color: #dddddd
  • Body Text Size: 13px

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-49 How to Add Post Category Menu Widgets to Your Divi Global Footer

Spacing

And complete the module settings, and this tutorial, by adding some custom top and bottom padding to the module’s spacing settings. That’s it! Make sure you save all Divi Theme Builder changes before viewing the outcome on your website.

  • Top Padding: 5%
  • Bottom Padding: 5%

how-to-add-post-category-menu-widgets-to-your-divi-global-footer-50 How to Add Post Category Menu Widgets to Your Divi Global Footer

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

Mobile

how-to-add-post-category-menu-widgets-to-your-divi-global-footer How to Add Post Category Menu Widgets to Your Divi Global Footer

Final Thoughts

In this tutorial, we’ve shown you how to combine the Divi Theme Builder with WordPress footer widgets and the Divi Sidebar Module. More specifically, we’ve shown you how to add post category menu widgets to your global footer to make your visitors’ navigation journey easier. This approach will help you style the footer items using Divi’s built-in options while keeping the footer menus and widgets inside your WordPress backend. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Source

WordPress Development

SEO NEWS

seo news

Domain Registration
GET YourName.com Today

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.