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.
CSS Snippet
.et_pb_footer_columns1 .fwidget.et_pb_widget {
width: 100%!important;
max-width: 100%!important;
}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
brilliant!
I thought it was a pretty awesome discovery 🙂
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
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/
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?
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!!
Awesome, glad this worked for you 🙂
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.
Can you provide a link so I can take a look for you
This is so smart! Thank you James, made my day. 🙂
Only a pleasure to help 🙂
Excellent idea James. It’s great.
Glad you like it 🙂
Hi James, I am unable to find browser revision option in my WordPress, I am using the latest version of WordPress.
That is a very strange issue, I have not seen WordPress missing that option before
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.
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.