(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

How to Create a Custom Footer with Divi’s Theme Builder

The Divi Theme Builder marks a new era and changes the way we design websites. One of the most important parts of this feature is being able to dynamically add global footers to your pages and posts. Once you’ve designed a footer, you can automatically add it to whatever kind of page or post you want using Divi’s Theme Builder. Now in this tutorial, we’ll guide you step by step through the process of creating and adding a global footer to your website. You’ll be able to download the template 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 global footer design across different screen sizes.

Desktop

global footer

Mobile

global footer

Download The Custom Global Footer for FREE

To lay your hands on the free custom global footer, 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.

Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

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

Subscribe To Our Youtube Channel

1. Go to Divi’s Theme Builder

Start by going to the Theme Builder in your Divi Theme Options.

global footer

2. Add & Build Global Footer

There, you can add a global footer from your Divi library or start building one from scratch. In this tutorial, we’ll create a custom footer from scratch so go ahead and pick the first option.

global footer

Add Section #1

Background Color

Time to start creating! Open the section you can find on the page and change the section’s background color.

  • Background Color: #000000

global footer

Spacing

Modify the section’s spacing settings next.

  • Top Margin: 6vw
  • Left Margin: 6vw
  • Right Margin: 6vw
  • Left Padding: 30px
  • Right Padding: 30px

global footer

Border

Add some top left and right border next.

  • Top Left: 20px
  • Top Right: 20px

global footer

Box Shadow

Include a box shadow in the section settings too.

  • Box Shadow Blur Strength: rgba(0,0,0,0.18)
  • Shadow Color: rgba(0,0,0,0.18)

global footer

Add New Row to Section

Column Structure

Continue by adding a row to your section using the following column structure:

global footer

Add Text Module to Column

Add H2 Content

Add a Text Module with some H2 content.

global footer

H2 Text Settings

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

  • Heading 2 Font: Poppins
  • Heading 2 Font Weight: Semi Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #ffffff
  • Heading 2 Text Size: 31px (Desktop), 24px (Tablet), 18px (Phone)
  • Heading 2 Line Height: 1.6em

global footer

Sizing

Add some max width to the module as well.

  • Max Width: 700px

global footer

Add Button Module to Column

Add Copy

Add a Button Module right below the Text Module in your column and enter some copy of your choice.

global footer

Alignment

Move on to the module’s design tab and change the button alignment to center.

  • Button Alignment: Center

global footer

Button Settings

Continue by styling the button.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #000000
  • Button Background Color: #FFFFFF
  • Button Border Width: 0px

global footer

  • Button Border Radius: 100px
  • Button Letter Spacing: 1px
  • Button Font: Poppins
  • Button Font Weight: Semi Bold
  • Button Font Style: Uppercase

global footer

Spacing

Add some custom padding values as well.

  • Top Padding: 14px
  • Bottom Padding: 14px
  • Left Padding: 40px
  • Right Padding: 58px

global footer

Add Section #2

Background Color

On to the next regular section! Choose a white section background color.

  • Background Color: #ffffff

global footer

Spacing

Remove all top and bottom padding next.

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

global footer

Border

Add some border radius to the section too.

  • Top Left: 20px
  • Top Right: 20px

global footer

Box Shadow

And complete the section’s settings by adding a subtle box shadow.

  • Box Shadow Blur Strength: 135px
  • Shadow Color: rgba(0,0,0,0.18)

global footer

Add New Row to Section

Column Structure

Once you’ve completed the section settings, add a new row using the following column structure:

global footer

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

global footer

Spacing

Remove the row’s default top and bottom padding next.

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

global footer

Column Spacing

Continue by opening the column settings and add some custom padding values across different screen sizes.

  • Top Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Left Padding: 50px
  • Right Padding: 50px

global footer

Add Text Module #1 to Column

Add Content

Time to start adding modules! Add a regular Text Module to column 1 and insert some content of your choice.

global footer

Text Settings

Move on to the module’s design tab and change the text settings accordingly:

  • Text Font: Poppins
  • Text Font Weight: Bold
  • Text Color: #000000
  • Text Size: 17px
  • Text Alignment: Center

global footer

Spacing

Add some custom top and bottom margin next.

  • Top Margin: 10px
  • Bottom Margin: 30px

global footer

Add Divider Module to Column

Visibility

Right below the Text Module, add a Divider Module and make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

global footer

Line

Change the line color into black.

  • Line Color: #000000

global footer

Sizing

Modify the divider’s sizing settings too.

  • Width: 15%
  • Module Alignment: Center

global footer

Add Text Module #2 to Column

Add Content

Continue by adding another Text Module to the column.

global footer

Add Link

Add a link to the page you want this module to refer to.

global footer

Text Settings

Then, move on to the design tab and change the text settings as follows:

  • Text Font: Poppins
  • Text Font Weight: Light
  • Text Color: #777777
  • Text Size: 15px
  • Text Alignment: Center

global footer

Spacing

Add some top and bottom margin too.

  • Top Margin: 10px
  • Bottom Margin: 10px

global footer

Clone Text Module #2 As Much as Needed

Once you’ve completed the second Text Module in the column, you can clone it up to as many times as you need it (depending on how many clickable footer items you want to include).

global footer

Change Content & Links

Make sure you change the module content and links for each duplicate.

global footer

Clone Entire Column Twice

Once you’ve completed the column and its modules, you can clone the entire column twice.

global footer

Column 2 Background Color

Then, open the column 2 settings and change the background color.

  • Column 2 Background Color: #f9f9f9

global footer

Change Content & Links

Make sure you change all the content and links in each duplicate column.

global footer

Add New Column

Then, add a fourth column to the row.

global footer

Background Color

Change the new column’s background color.

  • Background Color: #0fffc7

global footer

Spacing

Along with the column’s padding values.

  • Top Padding: 70px
  • Bottom Padding: 70px
  • Left Padding: 50px
  • Right Padding: 50px

global footer

Add Social Media Follow Module to Column 4

Add Social Networks

Continue by adding a Social Media Follow Module to column 4.

global footer

Reset Social Network Styles

Reset the item styles for each social network you add.

global footer

Alignment

Then, move on to the design tab and change the module alignment.

  • Module Alignment: Center

global footer

Icon Settings

Modify the icon color too.

  • Icon Color: #000000

global footer

Add Email Optin Module to Column 4

Remove Content

Continue by adding an Email Optin Module to column 4 and remove the title and body content.

global footer

Email Account

Add an email account next. Without adding the email account, the module won’t show up once you’ve exited the builder.

global footer

Remove Background Color

Continue by removing the module’s background color.

  • Use Background Color: No

global footer

Fields Settings

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

  • Fields Background Color: rgba(0,0,0,0)
  • Fields Text Color: #000000
  • Fields Font: Poppins

global footer

  • Fields Text Size: 13px
  • Fields Border Width: 1px
  • Fields Border Color: #000000

global footer

Button Settings

Style the button of your module as well.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #000000
  • Button Background Color: #FFFFFF
  • Button Border Width: 0px

global footer

  • Button Border Radius: 100px
  • Button Letter Spacing: 1px
  • Button Font: Poppins
  • Button Font Weight: Semi Bold
  • Button Font Style: Uppercase

global footer

  • Top Padding: 15px
  • Bottom Padding: 15px

global footer

Add Dynamic Text Module to Column 4

Dynamic Content

The next and last module we need to complete this design is a Text Module. Enable the dynamic content option in the content box.

global footer

Then, select the ‘Current Date’ option.

  • Dynamic Content: Current Date

global footer

And modify the dynamic content’s settings as follows:

  • Before: Copyright ©
  • After: | All Rights Reserved
  • Date Format: Custom
  • Custom Date Format: 20y

global footer

Text Settings

Then, move on to the design tab and change the text settings accordingly:

  • Text Font: Poppins
  • Text Color: #000000
  • Text Size: 16px

global footer

Spacing

Complete the module’s settings by adding some top margin and you’re done!

  • Top Margin: 50px

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

global footer

Mobile

global footer

Final Thoughts

In this tutorial, we’ve shown you how easy it is to create a beautiful custom global footer with Divi’s new Theme Builder. The Theme Builder and Divi’s built-in module and design options help you save a lot of time and create stunning websites in no time. We hope this tutorial inspires you to create beautiful global footers for your upcoming Divi projects. 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.

The post How to Create a Custom Footer with Divi’s Theme Builder appeared first on Elegant Themes Blog.

Recent Posts

  • Busting the Biggest WordPress Myths

    Busting the Biggest WordPress Myths

  • You’re Not Too Small for a Great Website

    You’re Not Too Small for a Great Website

  • Top Web Design Trends to Watch in 2025

    Top Web Design Trends to Watch in 2025

  • Lock Down Your Site: WordPress Security Made Easy

    Lock Down Your Site: WordPress Security Made Easy

  • Is It Time to Redesign Your Website?

    Is It Time to Redesign Your Website?

  • Don’t Ignore These Website Pages

    Don’t Ignore These Website Pages

  • AI Tools in Web Design: Hype vs. Real Help

    AI Tools in Web Design: Hype vs. Real Help

  • How to Make Your Website Feel Brand New Again

    How to Make Your Website Feel Brand New Again

  • No Leads? Here’s Why (And How to Fix It)

    No Leads? Here’s Why (And How to Fix It)

  • 7 Website Mistakes That Hurt Your Business

    7 Website Mistakes That Hurt Your Business

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.