How to Change that Pesky Divi Footer + Advanced Level Footer Design
This is something that is frequently asked when designing a Divi website: “How the heck do I change the footer?”
Now I love Elegant Themes. It has made my life easier when creating websites, but come on guys, really? Why not make it more user-friendly and intuitive to modify the default Designed by Elegant Themes | Powered by WordPress footer?
In any case, don’t despair. It is not that hard to edit it. Below you will find some recommended methods depending on your time, money and level of skill. The first part of this post describes tools or step-by-step instructions while the second part describes some practical as well as creative things you can do to make sure your footer stand out in this day and age of fancy footers.
2 Ways to Change the DIVI Footer’s HTML Content and Look
Fastest Way >>> Divi Booster
Well, right off the bat, I would recommend use a tool like Divi Booster. It is the most painless way to do so. Out of the 50+ configuration options it offers for the Divi Theme, their Footer section makes it a breeze to quickly modify the HTML and text in your footer to your heart’s content.
As you can see from the screenshot above, it is quite easy to edit the footer with Dan Mossop’s Divi Booster tool. I like it and use it so much it is one of my default plugins whenever I create a new website. At 19 US$, it is highly recommended given all the extra flexibility and time savings it provides. Definitely check it out.
By the way, if you want to use the HTML script above so that your own footer looks like the gray box below, just copy and paste the script next the vertical blue bar making sure to place your own content wherever the text is in red:
© – OTDprod.com | Hosted by: <a href=”http://www.yourhosting.com/”>MDD Hosting</a> | Designed by: <a href=”http://www.otdprod.com”>Out The Door Productions</a> | Theme: <a href=”http://www.yourtheme.com”>Elegant Themes</a> <STYLE> <!–A{text-decoration:underline}–> </STYLE>
Side Note: The <STYLE> part of the script refers to the fact I wanted my links underlined. You can find more info about HTML link styling at www.w3schools.com, a great resource whenever you have HTML or CSS queries.
Cheaper but Riskier Way >>> Edit the Footer .php File
If you are not all familiar (or feel confident) with changing some background files then I do not recommend this method. If you are okay with the previous sentence then I suggest you install a child theme, otherwise any .php file changes you make will get overwritten whenever you update the Divi Theme. I speak from experience. 🙁
To edit the footer.php file:
- Go to “Appearance” on your WordPress menu
- Click on “Editor”
- Scroll down until you find Theme Footer on the right-hand side
- Click on it
- Scroll down the middle until you find <p id=”footer-info”> (it’s near the end)
- Replace the existing code between <p id=”footer-info”> and </p> with your text and voila! you are done
As previously mentioned, www.w3schools.com offers great tutorials for HTML link modifications. You might want to consider adding certain link attributes such as <a rel=”nofollow”> (if you do not want to pass along any link juice) or target=”_blank” (if you want to open the link in a new tab) to further customize your footer. Before you save, you can see what your HTML code will look like by using the Tryit Editor.
Making Your Footer Stand Out
Add Hover Effect
Simply add the following CSS script to your stylesheet if you want your footer links to change colors whenever a user’s mouse cursor hover’s over the links:
#footer {
font: white !important;
}
You can see the effect on this page’s footer. Don’t forget to change the red text to the appropriate hex color code (e.g. #ffffff).
Using Divi’s Own Footer Customizer
Ever since Divi 2.4, Divi has its own footer customizer which would theoretically let you change the footer’s background color, text color, font style, font size, social icon size and social icon color. From the WordPress dashboard simply go to Divi >>> Theme Customizer >>> Footer. However, I must say this is “theoretical” since the preview might look nice, but when saved, no changes might have taken place. If this happens to you, then you need to find the right CSS code to plug in. Usually a quick scan of the Elegant Theme forums or a quick question to their support team should yield the answer.
If the footer customizer is working, you can achieve some pretty cool footer designs as explained in this June 2015 Elegant Themes’ blog post.
Other Tricks
I will keep adding more tips as I discover them….
Wrap Up
We’ll I hope this was of benefit to you. Thank you for reading. As always, if you have any questions do not hesitate to ask via the contact form or the comments below.
