A site footer appears across every page, carries your essential business details, reinforces your brand, and gives visitors one last clear path to contact you.
That makes it the ideal place to bring Divi 5's Theme Builder, Design Variables, and Element Presets together into one reusable global layout.
By the end of this guide, you'll have a global footer with three styled columns at the top - a brand block, an address-and-socials block, and a contact CTA on an accent background - plus a single-line copyright row that pulls in the current year automatically.
Because the footer is styled almost entirely with the Design Variables from Part 3 and the Element Presets from Part 4, this is a fast build.
Set up the Global Footer Template
The Theme Builder workflow for the footer mirrors the global header from Part 6.
From the WordPress dashboard, go to Divi → Theme Builder.
In the Default Website Template, click Add Global Footer → Build Global Footer.
Save the template once before you start, so the global footer assignment is committed.
Open the layout in the Visual Builder.
The Section Settings
The empty Visual Builder canvas gives you an empty Section to start from.
Open the section's settings and go to the Content tab → Background.
Choose the Background - Light Gray option group preset.
Go to the Desing tab → Layout → Vertical Gap and set the Spacing - Medium variable.
Go to the Advanced tab → HTML → Element Type and choose Footer. The section looks the same, but the HTML Element Type now tells browsers, screen readers, and search engines that this area is the site footer. (See Semantic Elements & Custom HTML Wrappers For Divi 5 for more details).
The Row Settings
Click the Add Row button
to add a new row.Choose the 3-column layout under the Equal Columns section.
Go to the Row's Desing tab → Layout → Layout Wrapping.
For the Horizontal and Vertical Gap, choose the Spacing - XSmall variable.
Enable the Wrap option.
Add the Modules
Click the + Add Module button
in the first column.Add the Image module and the Text module.
Click the + Add Module button
in the second column.Add the Heading module and the Social Media Follow module.
Click the + Add Module button
in the third column.Add the two Heading modules and a Button module.
Add a second Row to the Section and choose Flex Single Column.
In its one column, add one Text module.
Style the Footer Columns
Open the Row settings.
From the Content tab → Elements, click on the Edit icon for the first column.
Apply the Contained - Dark Element Preset from the column preset menu.
Go to the Desing tab → Layout.
Set the Jusity Content to Space Between.
Use the Extend Desing Attribute to apply the same styles to the second and third columns.
The third column needs one override to become the CTA block.
Open the first row's setting.
From the Content tab → Elements, click on the Column 3 edit icon to open its settings.
Go to the Content tab → Background → Background Color.
Set the Primary Color.
Responsive Column Classes
Desktop is the base breakpoint, so desktop values cascade down to tablet and phone unless you override them. Because you chose Flex Three Equal Columns when you added the first row, the desktop layout is already handled.
Switch the Visual Builder to the Tablet breakpoint.
Open Column 1, and in the Sizing option group, set Column Class to Fullwidth.
Still on Tablet, open Column 2 and in the Desing tab → Sizing, enable the Grow To Fill option.
Repeat for Column 3. This lets Columns 2 and 3 share the remaining row width cleanly on tablet.
Switch to the Phone breakpoint.
Open Column 2 and in the Desing tab → Sizing → Column Class choose Fullwidth.
Repeat for Column 3.
The Row's Wrap setting from the previous step, combined with these breakpoint-specific column classes, creates a clean stacked layout on mobile.
The Logo Image
Open the Image module in Column 1.
In the Content tab, hover over the Image field and click the Insert Dynamic Content icon.
Bind the image source to the Logo Light Design Variable.
Set the image's alternative text to the brand name - unless the brand name is already written beside it and the logo is purely decorative, in which case keep the alt text empty so screen readers don't announce the brand twice.
In the Design tab, open the Sizing option group and set Max Height to
64px.
The Headings
You have three Heading modules to style.
Open the Heading module in Column 2 and apply the Heading 5 Element Preset for the visual style.
Create a second Heading Element Preset named Heading Light. Set its text color to the White Design Variable, save it, and apply it to the same Heading module. If two presets define the same property, the last one applied wins.
In the Content tab → Text → Heading, hover over the Heading field, click the Insert Dynamic Content icon, and choose the Address Design Variable.
Use Extend to apply the Heading 5 and Heading Light presets to the other Heading modules in the parent row.
Open the settings of the first Heading module from the third column.
Go to the Content tab → Text → Heading and choose the Phone Number variable.
Create Link Variables for Phone and Email
Open the Variable Manager → Links.
Create two new Link variables:
Link to Phone with the value
tel:2553526258Link to Email with the value
mailto:[email protected]
Assign the New Link Variables
For each of the Heading modules in the third column, go to the Content tab → Link → Module Link and use the Dynamic Content.
Set the Link to Phone varaible, respectivly the Link to Email variable.
The Social Media Follow Module
Open the Social Media Follow module in Column 2 and apply the Isolated Icons - Light Element Preset.
In the Content tab, open the Elements option group and add three Social Network children for the platforms that match the brand.
Open each network item and:
Choose the correct platform,
Set the Account Link URL
Apply the No Background Element Preset.
The result is a clean row of white icons against the dark column, with no plate or pill behind each icon.
The Button Module
Open the Button module in the third Column 3
Apply the Field - White Element Preset.
In the Content tab, set the Button Text to Send a message.
Set the link URL to the contact page - the Contact Page URL Design Variable if you created one, or the same
mailto:URL variable used for the email address.
The Text - White preset gives the button a transparent background, a white label, and the hover behavior you defined in Part 4.
Step 9: The text modules
There are two Text modules to style:
The tagline in Column 1 and
The copyright line in Row 2.
Open the Text module beneath the logo in the first Column.
Apply the Light Text Element Preset, and set the body content to: Premium workspace for focus and collaboration.
Open the settings of the Text module in the second Row.
Stack two Element Presets on it:
Apply the Dark Text element first,
Apply the Small Text element preset as a second stacked preset. The order matters because stacked presets follow a cascade - Small Text narrows the body type from Body to Body Small, while Dark Text keeps the color and link behavior intact unless a later preset overrides them.
In the Content tab → Text → Body, click the Insert Dynamic Content icon and choose Current Date. (See Dynamic Content in Divi 5.)
In the dynamic content settings, enter Copyright © Your Coworking Space in the Before field and . All Rights Reserved. in the After field.
Set Date Format to Custom and set Custom Date Format to Y. The line renders as Copyright © Your Coworking Space 2026. All Rights Reserved., with the year changing each January automatically.
(optional) As a final touch, in the same module's Design tab, open the Body Text option group and apply the Text - Dark Transparent Design Variable to the Body Text Color field. This gives the copyright line a quieter tone, so it supports the footer instead of competing with the cards above it.
Save and verify
Check the footer before leaving the builder:
Preview the tablet and phone breakpoints to confirm Column 1 becomes full-width on tablet, Columns 2 and 3 share the next row on tablet, and all three cards stack on phone.
Test the social icons, the button link, the
tel:link, and themailto:link.
Then save the Visual Builder, return to the Theme Builder, and click Save Changes. Open any front-end page and scroll to the bottom to see the global footer in place.
⬇️ Download File:
Import the Ready-Made Template
A JSON file is available so you can import the finished header. Before importing, it is best to define a WordPress menu in Appearance → Menus, though you can assign the menu later.
Download the JSON file from the Download File section above.
Go to Divi → Theme Builder.
Edit or create the Global Footer.
Click the Gear icon (top left side) and choose the Import option.
Locate and select the Master Course Footer Layout.json file.
Make sure that Import Presets is checked.
Click the Import Layout button.
Read the full tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 7: Building A Custom Footer In Divi 5.
Previous Course | Next Course |
Using Divi 5’s Theme Builder To Create Global Website Templates → |