A web page footer is a very powerful a part of the total construct as a result of it seems that around the web page, carries very important industry main points, reinforces the logo, and provides guests one remaining transparent trail to touch you. That makes it the easiest position to deliver in combination Divi 5’s Theme Builder, Design Variables, and Part Presets right into a unmarried reusable international format.
Via the tip of this submit, your Coworking web page may have an international footer with 3 styled columns up best: a model block, an address-and-socials block, and a touch CTA in opposition to an accessory background. Underneath that, you’ll upload a single-line copyright row that draws within the present yr dynamically, so it updates robotically. That is some other speedy educational for the reason that footer is styled nearly fully with the Design Variables from Phase 3 and the Part Presets from Phase 4.
Contents
- 1 Customized Footer Construct
- 1.1 Surroundings Up The International Footer Template
- 1.2 Step 1: The Phase And Row
- 1.3 Step 2: Including The Modules
- 1.4 Step 3: Styling The Footer Columns
- 1.5 Step 4: Responsive Column Categories
- 1.6 Step 5: The Brand Symbol
- 1.7 Step 6: The Headings
- 1.8 Step 7: The Social Media Observe Module
- 1.9 Step 8: The Button
- 1.10 Step 9: The Textual content Modules
- 1.11 Save And Examine
- 1.12 What’s Coming Subsequent
Development a footer is just like construction some other phase in Divi. Get started with construction and format prior to shifting into styling. We’ll start with the Phase and a structured Row, upload the Modules and a 2d Row, then transfer via content material, presets, responsive habits, and dynamic knowledge till the entire footer is able. Right here’s the desktop consequence you’ll be construction:
The Theme Builder workflow for the footer mirrors the worldwide header from Phase 6. From the WordPress dashboard, pass to Divi > Theme Builder. Within the Default Web page Template, click on Upload International Footer > Construct International Footer. Save the template as soon as prior to you get started so the worldwide footer task is dedicated, then open the format within the Visible Builder.
Step 1: The Phase And Row
At the empty Visible Builder canvas, Divi will provide you with an empty Phase to start out from. Within the Phase’s Content material tab, open the Background choice crew and follow the Background – Gentle Grey Design Variable to the background colour box. If you happen to created a Background choice crew preset for that very same price previous within the route, you’ll follow that as a substitute.
Subsequent, pass to the Phase’s Design tab, open the Format choice crew, and follow the Spacing – Medium Design Variable to the Vertical Hole box. This hole separates the primary footer row from the copyright row underneath it.
Ahead of shifting on, set the Phase’s semantic wrapper. Move to Complex > HTML and set Part Kind to footer. The footer will glance the similar visually, however the markup now tells browsers, display readers, and search engines like google that this space is the web page footer.
Upload a Row to the Phase and make a choice the Flex 3 Equivalent Columns construction. Within the Row’s Design tab, open the Format choice crew and set Format Wrapping to Wrap. This permits the columns to wrap as a substitute of forcing 3 squeezed columns on narrower displays.
Observe the Spacing – XSmall Design Variable to each the Horizontal Hole and Vertical Hole fields.
Step 2: Including The Modules
With the construction in position, upload the modules each and every column wishes.
In Row 1, Column 1, upload an Symbol module, then a Textual content module underneath it.
In Column 2, upload a Heading module, then a Social Media Observe module.
In Column 3, upload a Heading module, a 2d Heading module, after which a Button module.
Subsequent, upload a 2d Row to the Phase and make a choice Flex Unmarried Column. In its lone column, upload one Textual content module. This completes the footer’s construction.
Open Row 1, Column 1 and follow the Contained – Darkish Part Preset from the column preset menu. That preset carries the darkish background, medium padding, and rounded corners created in Phase 4.
Within the column’s Design tab, open the Format choice crew and set Justify Content material to House Between. This pushes the emblem towards the highest and the tagline towards the ground of the cardboard.
Use Lengthen Design Attributes to ship those self same column settings to the opposite Columns in the similar Guardian Row. All 3 columns now proportion the darkish background, rounded corners, medium padding, and vertical spacing habits in a single transfer.
The 3rd column wishes one override so it turns into the CTA block. Open Row 1, Column 3. Within the Design tab, open the Background choice crew and follow the Number one Colour Design Variable to the background colour box. It helps to keep the similar form, spacing, and alignment as the opposite two playing cards, however now makes use of the logo’s number one colour.
Step 4: Responsive Column Categories
Now set how the footer behaves throughout breakpoints. Desktop is the bottom breakpoint, so desktop values cascade down to pill and speak to until you override them. Since you selected the Flex 3 Equivalent Columns construction while you added the primary row, the desktop column format is already treated.
Transfer the Visible Builder to the Pill breakpoint and open Column 1. Within the Sizing choice crew, set Column Magnificence to Fullwidth. Column 1 now spans the entire row on pill and underneath, whilst Columns 2 and three can take a seat underneath it.
Nonetheless at the Pill breakpoint, open Column 2 and set Column Magnificence to Develop To Fill. Repeat that for Column 3. This shall we Columns 2 and three proportion the rest row width cleanly on pill.
Transfer to the Telephone breakpoint. Open Column 2 and set Column Magnificence to Fullwidth. Repeat the similar surroundings for Column 3. The Row’s Wrap surroundings from Step 1, blended with those breakpoint-specific column categories, creates a blank stacked format on cellular.
Step 5: The Brand Symbol
Open the Symbol module in Column 1. Within the Content material tab, hover over the Symbol box and click on the Insert Dynamic Content material icon. Bind the picture supply to the Brand Gentle Design Variable.
Set the picture’s selection textual content to the logo title until the similar model title is already written without delay beside it and the emblem is solely ornamental. If so, stay the alt textual content empty so display readers don’t announce the similar model two times.
Within the Design tab, open the Sizing choice crew and set Max Top to 64px.
Step 6: The Headings
You might have 3 Heading modules to taste. Open the Heading module in Column 2 and follow the Heading 5 Part Preset for the visible taste.
Create a 2d Heading Part Preset named Gentle. Set its textual content colour to the White Design Variable, put it aside, and use it on the similar Heading module. If each presets outline the similar belongings, take into account that the remaining preset implemented wins.
Within the Content material tab, hover over the Heading box, click on the Insert Dynamic Content material icon, and bind the textual content to the Cope with Design Variable. Binding the tackle to a variable as a substitute of typing it without delay manner a long term place of business transfer can also be treated as soon as within the Variables panel and up to date anywhere that variable is used.
Use Lengthen to use the Heading 5 and Gentle presets to the opposite Heading modules within the Guardian Row. There are two extra Heading modules in Column 3. Bind the primary one to the Telephone Quantity Design Variable and the second to the E-mail Design Variable.
For the telephone and electronic mail modules, upload matching URL Design Variables within the Hyperlink choice crew: use a tel: URL for the telephone quantity and a mailto: URL for the e-mail tackle. That helps to keep the visual textual content and clickable hyperlinks controlled from the similar international machine.
Step 7: The Social Media Observe Module
Open the Social Media Observe module in Column 2 and follow the Remoted Icons – Gentle Part Preset.
Within the Content material tab, open the Components choice crew and upload 3 Social Community youngsters for the platforms that fit the logo. Open each and every community merchandise, make a choice the right kind platform, and upload the vacation spot URL.
Click on the edit icon for each and every Community, then follow the No Background Part Preset. The result’s a blank row of white icons in opposition to the darkish column, with out a plate or tablet at the back of each and every icon.
Step 8: The Button
Open the Button module in Column 3 and follow the Textual content – White Part Preset.
Within the Content material tab, set the Button Textual content to Ship a message. Set the hyperlink URL to the touch web page, the Touch Web page URL Design Variable in case you created one, or the similar mailto: URL variable used for the e-mail tackle.
The Textual content – White preset offers the button a clear background, a white label, and the hover habits you outlined in Phase 4.
Step 9: The Textual content Modules
There are two Textual content modules to taste: the tagline in Column 1 and the copyright line in Row 2.
Open the Textual content module underneath the emblem in Column 1 and follow the Gentle Textual content Part Preset. Set the frame content material to: Top rate workspace for focal point and collaboration.
Open the Textual content module in Row 2. Stack two Part Presets on it: follow Darkish Textual content first, then Small Textual content. The order issues as a result of stacked presets apply a cascade. Small Textual content narrows the frame sort from Frame to Frame Small, whilst Darkish Textual content helps to keep the colour and hyperlink habits intact until a later preset overrides those self same homes.
In the similar Textual content module’s frame content material, click on the Insert Dynamic Content material icon and make a choice Present Date. Within the dynamic content material settings, input Copyright © Your Coworking House within the Ahead of box and . All Rights Reserved. within the After box.
Set Date Structure to Customized and set Customized Date Structure to Y. The road renders as Copyright © Your Coworking House 2026. All Rights Reserved., with the yr converting robotically each and every January.
One remaining contact: in the similar module’s Design tab, open the Frame Textual content choice crew and follow the Textual content – Darkish Clear Design Variable to the Frame Textual content Colour box. This offers the copyright line a quieter tone so it helps the footer as a substitute of competing with the playing cards above it.
Save And Examine
Test the footer prior to leaving the builder. You currently have an international footer that makes use of Divi 5’s Flex format controls, Design Variables, Dynamic Content material, and reusable presets.
Preview the pill and speak to breakpoints to verify that Column 1 turns into full-width on pill, Columns 2 and three proportion the following row on pill, and all 3 playing cards stack on telephone. Additionally take a look at the social icons, the button hyperlink, the tel: hyperlink, and the mailto: hyperlink.
Save the Visible Builder, go back to the Theme Builder, and click on Save Adjustments.
Open any front-end web page and scroll to the ground to look the worldwide footer in position.
What’s Coming Subsequent
With the worldwide header from Phase 6 and the worldwide footer from this submit in position, each and every web page to your Coworking web page is now wrapped in a constant, on-brand construction. In Phase 8: The usage of Divi 5 Theme Builder To Create International Web page Templates, we’ll transfer directly to the templates that maintain the remainder of the web page, together with All Posts, Class Pages, Creator Pages, Seek Effects, and the 404 web page.
The similar Design Variables and Part Presets you’ve been construction since Phase 3 raise without delay into the ones templates. Via Phase 8, the design machine begins paying you again: the core choices are already made, so you’ll construct the rest templates quicker and stay the web page constant because it grows.
The submit Phase 7: Development A Customized Footer In Divi 5 gave the impression first on Chic Issues Weblog.
WordPress Web Design