How To Build A Custom Footer With Divi Builder

Rifat Divi Tutorials Apr 11, 2022

As a result of the Divi Theme Builder, a new era in website creation has begun. With this new functionality, you may dynamically add global footers to your pages and articles. To add a footer to any page or post, simply use Divi's Theme Builder (which is included with the Divi theme). Now, in this article, we'll show you how to create and add a global footer to your website. Additionally, you may download the JSON file for free!

Preview

Let's first have a look at how the global footer looks on various-sized screens before we get started.

Design Procedure

First, log in to your WordPress Dashboard. In your Divi Theme Options, navigate to the Theme Builder.

There, you have the option of using a pre-existing global footer or creating a new one from scratch using the Divi library. We'll be creating a custom footer from scratch in this lesson, so go ahead and select option one.

Create Amazing Websites

With the best free page builder Elementor

Start Now

Section No 1

BG Color

Time to get creative now! Open the section on the page and alter the background color of the section.

  • Background Color: #000000

Spacing

Next, update the section spacing according to the following values.

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

Border

The next step is to add a border to the top, left, and right.

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

Box Shadow

A box-shadow should also be included in the section settings.

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

Add New Row

Now add a new one-column row to the section.

Add New Text Module

Next, add a text module and add some copy to that module.

H2 Text Settings

Change the H2 text settings in the module's design tab as needed:

  • 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

Text Module Sizing

The module should also have a maximum width.

  • Max Width: 700px

Add Button Module

Just beneath the Text Module, add a Button Module and fill it with any copy you like.

Button Alignment

Change the button alignment to the center on the module's design tab.

  • Button Alignment: Center

Button Settings

Now let's style the button.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #000000
  • Button Background Color: #FFFFFF
  • Button Border Width: 0px
  • Button Border Radius: 100px
  • Button Letter Spacing: 1px
  • Button Font: Poppins
  • Button Font Weight: Semi Bold
  • Button Font Style: Uppercase

Button Spacing

It's time to add some custom padding.

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

Section No 2

Background Color

The next normal chapter is here! Select a white background color for the section.

  • Background Color: #ffffff

Spacing

Remove all of the cushioning from the top and bottom.

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

Border

The section should also have a border-radius added to it.

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

Box Shadow

Now finish the section editing by adding a box shadow.

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

Add New Row

You can now add a new row to your section by following these instructions:

Row Sizing

Open the row settings and enable the row to take up the entire screen without adding additional modules.

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

Row Spacing

Remove the row's padding at the top and bottom.

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

Column Spacing

Go to the column settings and add specific padding values for the different screen widths.

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

Text Module 1

It's now or never for module additions! Add a standard Text Module to column 1 and fill it with whatever you choose.

Text Settings

Change the text settings in the module's design tab as needed:

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

Spacing

The next step is to add some unique top and bottom margins.

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

Divider Module Visibility

Divider Modules can be added just below the Text Module if the 'Show Divider' option is checked.

  • Show Divider: Yes

Line

Now change the color.

  • Line Color: #000000

Sizing

The divider's sizing can also be changed.

  • Width: 15%
  • Module Alignment: Center

Text Module 2

Text Modules can now be added to the column.

Link

Include a URL to the page to which you want to point this module.

Text Settings

In the design tab, adjust the text settings as follows:

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

Spacing

Also include some space at the top and bottom of the page.

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

Text Module 2 Cloning

It's possible to clone the second Text Module in the column an unlimited number of times once it's finished being constructed (depending on how many clickable footer items you want to include).

Change Links

For each copy, be sure to update the module's content and links.

Clone Column Twice

You can clone a column two times once you've finished building it and all of its modules.

Column 2 BG Color Change

You can clone a column two times once you've finished building it and all of its modules.

  • Column 2 Background Color: #f9f9f9

Add New Column

A fourth column should then be added.

Background Color

Colorize the backdrop of the new column.

  • Background Color: #0fffc7

Spacing

In addition to the padding values in the column.

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

Social Media Icon

Add a Social Media Follow Module to Column 4 to complete the table.

Alignment

On the Design tab, adjust the module's position.

  • Module Alignment: Center

Icon

Now modify the icon color.

  • Icon Color: #000000

Email Module

Keep going by inserting an email opt-in module in column 4, then deleting the title and body content. Next, link a personal email account. If the email account isn't added, the module won't appear once you quit the builder.

Also, remove BG from the email module.

Fields Setting

Go to the design tab and make the following adjustments to the fields:

  • Fields Background Color: rgba(0,0,0,0)
  • Fields Text Color: #000000
  • Fields Font: Poppins
  • Fields Text Size: 13px
  • Fields Border Width: 1px
  • Fields Border Color: #000000

Button

Now change the button style.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px
  • Button Text Color: #000000
  • Button Background Color: #FFFFFF
  • Button Border Width: 0px
  • Button Border Radius: 100px
  • Button Letter Spacing: 1px
  • Button Font: Poppins
  • Button Font Weight: Semi Bold
  • Button Font Style: Uppercase
  • Top Padding: 15px
  • Bottom Padding: 15px

Add Dynamic Text Module

Finally, we need to add a Text Module to finish this design. In the content box, select the dynamic content option. From there make the following changes.

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

Text Settings

From the design tab, change the following settings.

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

Spacing

You're done with the module's settings if you add some top margin.

  • Top Margin: 50px

Final Preview

Let's take a final look at the results on various screen sizes now that we've completed all the processes.

Closing Thoughts

We've taught you how to use Divi's new Theme Builder to create a stunning custom global footer in this guide. With the help of the Theme Builder and Divi's built-in modules and design options, you can create beautiful websites in a matter of hours. It's our goal that you'll use this tutorial to construct some lovely Divi global footers in the future. Feel free to leave any questions or comments in the comment section below!