Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

UPDATED 11/16/18 – With the introduction of Divi Hooks, we can now inject that layout into the footer without having to modify any php template files.  All we have to do is add a simple snippet of PHP to your functions.php file. While the method in this tutorial still works great, if you want to learn more about Divi hooks, head on over to my newest tutorial here: https://quiroz.co/inject-a-layout-from-your-divi-library-into-your-footer-using-divi-hooks/


Original Post Below

Divi allows you to create cool footers using the Page Builder and with it’s Global Templates, you only have to make changes in one place.

But unfortunately you still have to add that footer to each page and there is no built option for it to appear on post pages, archive pages and category pages until now.

In this tutorial I am going to show you how easy it is to inject that saved footer section into every single page using php and without ever having to actually manually add it to each page individually.


View The Live Demo


**To do this you will need a basic child theme.

Let’s Get Started


Subscribe To Our You Tube Channel: https://www.youtube.com/channel/UCzSgj2oG27jEhyaxOgYVJiQ

Creating the Footer Section

Now we are going to create a footer section and save it to the Divi Library.


1. Go to your Divi Library and select Add New.


2. Give the template a name and make sure to select “Section” as the Template Type.


3. Now go ahead and create the footer section of your choice. In my example, I gave it a purple background and added several rows and modules.


This is what my example looks like.


Inserting the Footer Section into the PHP template

Now we are going to grab the header shortcode and insert it into the footer.php page with a little PHP snippet.


4. The first thing you will need to do is go into your Divi Library and open up the saved layout.


5. Once you have the layout open, check out the URL and you will see a sequence of characters and numbers. You are going to want to grab the numbers as we will need that for the next steps. For example in my case, the number sequence that I want to grab is 207988. This is the URL: http://montereydev.com/demos/tophead001/wp-admin/post.php?post=207988&action=edit



6. Go to Appearance> Editor and on the right you will find the footer.php that you added to your child theme earlier. Go ahead and open that up.


7. Find this line of code:


Just underneath that line of  code you will be adding this new snippet of code. And then replace the number 207988 with the number from your header section.


Unfortunately, my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from this rich text format file.

BOOM!!!! You have just injected your Divi Page Builder Footer Section into every single page on your website. Nice work!

Have fun!

Well, that’s all for now. I hope you find this article useful.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest