A web site footer is crucial a part of the entire construct as a result of apparently around the web site, carries crucial trade main points, reinforces the emblem, and offers guests one closing 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 structure.
Via the top of this put up, your Coworking web site could have an international footer with 3 styled columns up most sensible: 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 attracts within the present yr dynamically, so it updates robotically. That is every other speedy educational for the reason that footer is styled virtually solely with the Design Variables from Part 3 and the Part Presets from Part 4.
Development a footer is similar to construction every other segment in Divi. Get started with construction and structure earlier than transferring into styling. We’ll start with the Segment and a structured Row, upload the Modules and a 2d Row, then transfer thru content material, presets, responsive habits, and dynamic knowledge till the entire footer is in a position. Right here’s the desktop outcome you’ll be construction:
The Theme Builder workflow for the footer mirrors the worldwide header from Phase 6. From the WordPress dashboard, move to Divi > Theme Builder. Within the Default Web site Template, click on Upload International Footer > Construct International Footer. Save the template as soon as earlier than you get started so the worldwide footer project is dedicated, then open the structure within the Visible Builder.
Step 1: The Segment And Row
At the empty Visible Builder canvas, Divi provides you with an empty Segment to start out from. Within the Segment’s Content material tab, open the Background possibility crew and follow the Background – Gentle Grey Design Variable to the background colour box. Should you created a Background possibility crew preset for that very same worth previous within the path, you’ll follow that as a substitute.
Subsequent, move to the Segment’s Design tab, open the Format possibility crew, and follow the Spacing – Medium Design Variable to the Vertical Hole box. This hole separates the principle footer row from the copyright row underneath it.
Ahead of transferring on, set the Segment’s semantic wrapper. Pass to Complex > HTML and set Part Sort to footer. The footer will glance the similar visually, however the markup now tells browsers, display screen readers, and search engines like google that this space is the web site footer.
Upload a Row to the Segment and make a choice the Flex 3 Equivalent Columns construction. Within the Row’s Design tab, open the Format possibility crew and set Format Wrapping to Wrap. This permits the columns to wrap as a substitute of forcing 3 squeezed columns on narrower monitors.
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 Practice module.
In Column 3, upload a Heading module, a 2d Heading module, after which a Button module.
Subsequent, upload a 2d Row to the Segment 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 possibility crew and set Justify Content material to Area Between. This pushes the brand 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 Mother or father Row. All 3 columns now percentage 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 possibility 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 emblem’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 except you override them. Since you selected the Flex 3 Equivalent Columns construction while you added the primary row, the desktop column structure is already treated.
Transfer the Visible Builder to the Pill breakpoint and open Column 1. Within the Sizing possibility crew, set Column Elegance to Fullwidth. Column 1 now spans the entire row on pill and underneath, whilst Columns 2 and three can sit down underneath it.
Nonetheless at the Pill breakpoint, open Column 2 and set Column Elegance to Develop To Fill. Repeat that for Column 3. This we could Columns 2 and three percentage the rest row width cleanly on pill.
Transfer to the Telephone breakpoint. Open Column 2 and set Column Elegance to Fullwidth. Repeat the similar environment for Column 3. The Row’s Wrap environment from Step 1, blended with those breakpoint-specific column categories, creates a blank stacked structure on cellular.
Step 5: The Emblem 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 Emblem Gentle Design Variable.
Set the picture’s selection textual content to the emblem title except the similar model title is already written without delay beside it and the brand is only ornamental. If that’s the case, stay the alt textual content empty so display screen readers don’t announce the similar model two times.
Within the Design tab, open the Sizing possibility crew and set Max Peak to 64px.
Step 6: The Headings
You may 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, reserve it, and use it on the similar Heading module. If each presets outline the similar belongings, understand that the closing 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 Deal with Design Variable. Binding the deal with to a variable as a substitute of typing it without delay approach a long term administrative center transfer will also be treated as soon as within the Variables panel and up to date anyplace that variable is used.
Use Lengthen to use the Heading 5 and Gentle presets to the opposite Heading modules within the Mother or father 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 Electronic mail Design Variable.
For the telephone and e mail modules, upload matching URL Design Variables within the Hyperlink possibility crew: use a tel: URL for the telephone quantity and a mailto: URL for the e-mail deal with. That helps to keep the visual textual content and clickable hyperlinks controlled from the similar international gadget.
Step 7: The Social Media Practice Module
Open the Social Media Practice module in Column 2 and follow the Remoted Icons – Gentle Part Preset.
Within the Content material tab, open the Components possibility crew and upload 3 Social Community kids for the platforms that fit the emblem. Open each and every community merchandise, make a choice the proper 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 in 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 when you created one, or the similar mailto: URL variable used for the e-mail deal with.
The Textual content – White preset provides 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 brand in Column 1 and follow the Gentle Textual content Part Preset. Set the frame content material to: Top class workspace for center of attention 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 observe 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 except 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 &replica; Your Coworking Area within the Ahead of box and . All Rights Reserved. within the After box.
Set Date Layout to Customized and set Customized Date Layout to Y. The road renders as Copyright &replica; Your Coworking Area 2026. All Rights Reserved., with the yr converting robotically each and every January.
One closing contact: in the similar module’s Design tab, open the Frame Textual content possibility crew and follow the Textual content – Darkish Clear Design Variable to the Frame Textual content Colour box. This provides the copyright line a quieter tone so it helps the footer as a substitute of competing with the playing cards above it.
Save And Test
Test the footer earlier than leaving the builder. You currently have an international footer that makes use of Divi 5’s Flex structure controls, Design Variables, Dynamic Content material, and reusable presets.
Preview the pill and speak to breakpoints to substantiate that Column 1 turns into full-width on pill, Columns 2 and three percentage 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 peer the worldwide footer in position.
What’s Coming Subsequent
With the worldwide header from Phase 6 and the worldwide footer from this put up in position, each web page in your Coworking web site is now wrapped in a constant, on-brand construction. In Phase 8: The usage of Divi 5 Theme Builder To Create International Web site Templates, we’ll transfer directly to the templates that deal with the remainder of the web site, 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 gadget begins paying you again: the core choices are already made, so you’ll construct the rest templates sooner and stay the web site constant because it grows.
The put up Part 7: Building A Custom Footer In Divi 5 seemed first on Elegant Themes Blog.
0 Comments