October 18, 2023

Learn to Design a Custom Divi Footer Area from Scratch

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Designing a custom Divi footer can elevate your website’s user experience by providing essential information and quick navigation options. In this tutorial, we’ll walk you through the process of creating a custom footer using Divi’s visual builder.


Before you start, make sure you have the following resources installed and activated:

Footer Layout

The layout of your footer is crucial for its functionality. Divi allows you to create multiple columns and rows, providing flexibility in how you arrange your footer elements. You can start by adding a section and dividing it into four columns to place different types of content.

Adding Logo and Text

In the first column, you can add your brand’s logo and some descriptive text. Divi’s visual builder makes it easy to upload an image and adjust its size. For the text, you can use Divi’s text module and style it to fit your brand’s aesthetic.

  1. Add a new Image Module and upload your logo.
  2. Insert a Text Module below the logo and type your text.

Quick Links

Quick links provide easy navigation to essential pages on your website. In the second column, you can add a text module with the title “Quick Links” and list the links to important pages like “Our Work,” “Blog,” and “Contact.”

  1. Add a Text Module and type “Quick Links.”
  2. List the important pages and link them.

Services and Contact Info

The third column can be dedicated to listing the services you offer and providing contact information. You can use Divi’s Blurb module to create visually appealing lists with icons.

  1. Insert a Blurb Module for each service and add an icon.
  2. Use another Blurb Module to display your contact information.

Social Media Icons

Social media icons offer a quick way for visitors to connect with you. Divi has a dedicated module for social media icons, allowing you to add and link icons easily.

  1. Insert a Social Media Follow Module.
  2. Add the social media platforms you use and link them.

Footer Bottom Area

The bottom area of the footer is often used for copyright information and legal links. You can add another section below the main footer area for this purpose.

  1. Add a new section with a single column.
  2. Insert a Text Module for copyright information and legal links.


Making your footer responsive ensures it looks good on all devices. Divi allows you to adjust the layout and elements for different screen sizes.

  1. Switch to tablet and mobile views in the Divi Builder.
  2. Adjust the layout and sizing for each view.

Custom Divi Footer – Conclusion

Creating a custom Divi footer is a straightforward process with Divi’s visual builder. By following these steps, you can design a footer that not only looks good but also enhances the user experience on your website.

Required Resources

Divi Logo
Payment required
Credit to Ferdy Korpershoek
Discover a YouTube channel about WordPress, web design, and online marketing! With easy-to-follow tutorials, comprehensive guides, and expert tips, this channel helps beginners and professionals alike create stunning websites, optimize SEO, and harness the full potential of tools like Elementor and WooCommerce.
Learn to Design a Custom Divi Footer Area from Scratch
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.