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.

Divi Booster - The Fastest Way to Change the Divi Footer

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:

© – | Hosted by: MDD Hosting | Designed by: Out The Door Productions | Theme: Elegant Themes

© | Hosted by: <a href=””>MDD Hosting</a> | Designed by: <a href=””>Out The Door Productions</a> | Theme: <a href=””>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, 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:

  1. Go to “Appearance” on your WordPress menu
  2. Click on “Editor”
  3. Scroll down until you find Theme Footer on the right-hand side
  4. Click on it
  5. Scroll down the middle until you find <p id=”footer-info”> (it’s near the end)
  6. Replace the existing code between <p id=”footer-info”> and </p> with your text and voila! you are done

As previously mentioned, 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.

Figure highlighting how to change .php file - OTDprod

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.

Sample footer from Divi Blog using Footer Customizer Sample footer from Divi Blog using Footer Customizer

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.