0 Items - $0.00

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.

[et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]LmV0X3BiX2Zvb3Rlcl9jb2x1bW5zMSAuZndpZGdldC5ldF9wYl93aWRnZXQgewp3aWR0aDogMTAwJSFpbXBvcnRhbnQ7Cm1heC13aWR0aDogMTAwJSFpbXBvcnRhbnQ7Cn0=[/et_pb_dmb_code_snippet]

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

LEARN MORE

I hope you have found this useful 🙂

17 Comments

  1. Robert
    Robert on January 1, 2016 at 8:16 pm

    brilliant!

    Reply
    • James Fosker
      James Fosker on February 12, 2016 at 3:14 pm

      I thought it was a pretty awesome discovery 🙂

      Reply
  2. Frans
    Frans on February 17, 2016 at 6:54 pm

    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
      • Jason
        Jason on September 20, 2016 at 10:44 pm

        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
    Mike on May 18, 2016 at 1:23 pm

    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
      James Fosker on July 6, 2016 at 12:42 am

      Awesome, glad this worked for you 🙂

      Reply
  4. Peter
    Peter on June 3, 2016 at 7:06 pm

    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
      James Fosker on July 6, 2016 at 12:41 am

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

      Reply
  5. Jamila
    Jamila on June 14, 2016 at 10:51 am

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

    Reply
    • James Fosker
      James Fosker on July 6, 2016 at 12:40 am

      Only a pleasure to help 🙂

      Reply
  6. Manas Mitra
    Manas Mitra on June 20, 2016 at 8:01 am

    Excellent idea James. It’s great.

    Reply
    • James Fosker
      James Fosker on July 6, 2016 at 12:37 am

      Glad you like it 🙂

      Reply
  7. Baljeet
    Baljeet on June 25, 2016 at 9:09 pm

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

    Reply
    • James Fosker
      James Fosker on July 6, 2016 at 12:35 am

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

      Reply
  8. Elmarin Adam
    Elmarin Adam on October 18, 2016 at 2:12 pm

    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
    Vicky on January 26, 2017 at 3:24 pm

    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.