Select Page

Consistent Divi Footer


  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Buffer
  • Pinterest
  • reddit
  • StumbleUpon
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Buffer
  • Pinterest
  • reddit
  • StumbleUpon

Consistent Divi Footer

While working on a child theme we are busy getting to release by the end of today, I knew that our footer was not going to consistent on Divi default templates, like on blog post for instance because our footer was built with the Divi Page Builder and no-one has mentioned finding a way of achieving use of the page builder in the footer.

Our first idea was to try it with the Divi Footer Editor which we were given by another Divi plugin company, which we could have told guys to go and buy if they want the footer on every page, but the problem with this was the fact that it put everything under the Footer Menu.

Then a light bulb went off why not try to use a text widget in the footer column.

Here our screen recording of setting up our consistent footer using the text widget.

Step one: create a page to build your footer.
Step two: publish the page, change something and update so the revision option shows up(PS if you save your layout as global layout you can make updates to it from page you made for your footer.).
Step three: open widget in another tab, select footer widget area one and add text module.
Step four: start copying and pasting parts of the latest revision to your text widget.
Step five: Open theme customizer and select Footer, Layouts and select one column, also select a background colour to match your footer.
Step six: open up your Style.css or the custom CSS area in epanel and add the following line of CSS.

and save.
Step seven: refreash your website and have a look at your new more beautiful Divi Footer.

PS: Since writing this article SJ from Divi Space has created an Elegant Solution to achieving this you can find a link below

Page Builder Everywhere

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Buffer
  • Pinterest
  • reddit
  • StumbleUpon
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Buffer
  • Pinterest
  • reddit
  • StumbleUpon

I hope you have found this useful 🙂

17 Comments

  1. Robert
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    brilliant!

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      I thought it was a pretty awesome discovery 🙂

      Reply
  2. Frans
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Hello James, very glad I found this and working like a charm.
    On question though, if I update the footer page, do I have to do the whole copy/paste into the widget again?
    Also, I did not understand your tip in saving as global layout. Where and how do I do that?
    Thank you and best regards,
    Frans

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Hi, Fran, glad you got it working, unfortunately if you don not save the item as a global setting you will need to do the copy and paste process again.

      Saving as a global section is a Divi feature so the best place to learn more is here http://www.elegantthemes.com/gallery/divi/documentation/global-modules/

      Reply
      • Jason
        • Facebook
        • Twitter
        • LinkedIn
        • Google+
        • Buffer
        • Pinterest
        • reddit
        • StumbleUpon

        Thank you for the tip James! However, if you do edit the global library item, you will have to copy and paste all over again because the global layout would now be a new revision of the layout. The Footer Widget would then be out of date. Footer Widgets with a text element in would be hard coded effectively and not linked to Global Module Items. Does this make sense or am I missing something?

        Reply
  3. Mike
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    This is exactly what I was looking for. I was using a child theme with a nice footer and some custom CSS for another trick and this worked perfect. I didn’t have to use a global setting though, just the short code from the contact module. THANKS!!

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Awesome, glad this worked for you 🙂

      Reply
  4. Peter
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    I am not sure if the CSS you provided does anything, and my footer content seems to have a break point in it that I can’t track down.

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Can you provide a link so I can take a look for you

      Reply
  5. Jamila
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    This is so smart! Thank you James, made my day. 🙂

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Only a pleasure to help 🙂

      Reply
  6. Manas Mitra
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Excellent idea James. It’s great.

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Glad you like it 🙂

      Reply
  7. Baljeet
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Hi James, I am unable to find browser revision option in my WordPress, I am using the latest version of WordPress.

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      That is a very strange issue, I have not seen WordPress missing that option before

      Reply
  8. Elmarin Adam
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Thank you so much for this James. Its saved me hours of work. The only thing I can’t seem to get right is the CSS. It still seems the footer is placed within a box, it is not stretching it full width.

    Reply
  9. Vicky
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    This is genius. Thank you so much. It works like a dream and meant I was able to display my custom footer in my blog posts because as a stand alone Divi global element, the comments were placed beneath the footer and it didn’t stretch full width.

    Reply

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.

Why use The Divi Framework.


Divi is a leading WordPress theme which powers almost 2 million websites around the world, Divi makes building a website super simple as it has one of the most powerful drag and drop builders for WordPress.

We've been using Divi since December 2013 to help speed up client projects, it has made our workflow 1000% times better and has saved us countless hour everyday.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

| 7 minutes

Pin It on Pinterest

Share This

Share this post with your friends!

No products in the cart.