10. Let's Celebrate!

Nu firar vi!You are a star!

 

6.4 Create a global footer in the Divi Theme Builder

  • Your progress:

It’s time to proceed from our global header down to the global footer, which we’re creating in the Divi Theme Builder. In this footer, you can see that we have the site logo linked to the home page, a brief company description, social media links, important website shortcuts, contact information, copyright details, and a dynamic year feature to automatically update the year. Additionally, there’s a link to our privacy policy.

We begin by heading to our WordPress dashboard in the development website and then navigate to Divi and the Divi Theme Builder. Before creating the global footer, we make a detour back to our global header. The reason for this is that we plan to reuse the social media icons that are also present in the header. We locate the social media follow module in Wi-Frame mode, save it to the Divi library, and name it “Social Media” for future use.

Next, we return to the Divi Theme Builder and start building the global footer from scratch. The footer design consists of one column on the left and two smaller columns on the right. We begin by inserting an image module to display the site logo and ensure it’s linked to the homepage. We add a dark gray background to make it visually appealing.

Below the logo, we add a text module for the company’s boilerplate description. It’s essential to paste text in plain text mode to prevent any unwanted formatting issues.

The social media icons used in the header are brought into the footer by inserting the “Social Media” layout from the Divi library. This is a time-saving approach.

Moving on to the second column, we insert another text module with the title “Shortcuts” and another text module with the title “Contact Us.” To achieve a consistent look, you can copy and paste the styling settings from one module to another.

To create the golden divider line, we insert a divider module, style it accordingly, and then add the website shortcuts as links. We ensure that the colors for the bullets and links match the design.

For the contact information, we add the email address and a click-to-call link for the phone number. We also add the company’s physical address and provide temporary placeholders for links to services like Google Maps, Zoom, or WhatsApp.

The golden divider between the footer and the bottom bar is added by adding a bottom border to the row.

After ensuring that the design looks good on different devices, we focus on the tablet and smartphone views. To optimize the spacing between the social media icons and the rest of the content, we add margin to the social media icons in the tablet view.

Furthermore, center alignment for the image, text, and social media icons is applied specifically to the tablet and mobile views. This ensures that the design looks great on smaller screens.

The next step involves adding a bottom bar with copyright information and displaying the current year dynamically. We create a dynamic text module that displays “Copyright © 2021” and the company name, with the current year being dynamically generated.

To display the copyright symbol (©), you can use the special characters feature within Divi. We format this text module to match the rest of the design and ensure that it looks clean and readable. Additionally, we add a link to the privacy policy in the right column.

To avoid any alignment issues in the tablet and smartphone views, center alignment is applied to the text modules, ensuring they look consistent across devices.

After making these final adjustments, the global footer is saved. It can now be applied throughout the website, providing a consistent and visually appealing design. Finally, you preview your global header and footer on the live website.

 

All links, files and code snippets mentioned in the chapter is available below.

This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo