Add a DIVI section inside page template

by Fabrice | 11 Jul,2016 | DIVI, Tutorials, WORDPRESS

In this tutorial, we’ll see how to add a DIVI Section, anywhere you want inside templates of your DIVI website.

For what benefit would we do this ? Why won’t we use the DIVI Builder to add content inside our page ?

We will add content inside PHP templates, at places where the builder does not allow us to do so. For instance, this trick will allow us to add content before Navigation menu, or just before the footer, or just before any post content… There are numerous way to use this and one of these is the ability to repeat content on each page without having to add this content using the builder.

The method is quite simple, and remains on the use of DIVI Library and by adding an instruction inside php template to call our previously saved section.

Let’s have a look at this section making. This can be done from anywhere where we use the DIVI Builder, e.g. inside any page or post under construction. But we also can do it directly inside the DIVI Library.

Let’s open the DIVI Library from the lateral tools bar :

ajoutsectiondivi1

Then we just click on “Add new”

ajoutsectiondivi2

The add a new module window will pop up

ajoutsectiondivi3

We talk about adding a SECTION, so let’s give it a name and then select SECTION as a type.

ajoutsectiondivi4

You can make this SECTION global if you want but it’s not something necessary. Just click on “send”

ajoutsectiondivi6

You should see the DIVI Builder with an empty SECTION

ajoutsectiondivi7

Let’s add a column

ajoutsectiondivi8

ajoutsectiondivi9

And then let’s add a text module

ajoutsectiondivi10

We add a title for our test

ajoutsectiondivi11

And then we should see the following inside the builder

ajoutsectiondivi12

Inside the address bar (URL) we can see the SECTION id (number). This is very important because we’ll use this ID to call our SECTION from php template

So let’s copy the post ID, here i can see 198. Let’s insert our section inside an existing php template.

For this example, we are going to insert our SECTION right before the navigation menu. BE CAREFUL, if you want anything inserted at this place, you need to desactivate fixed navigation in DIVI options.

Let’s click on the blue button to desactivate fixed navigation

ajoutsectiondivi17

Once FIXED navigation desactivated, don’t forget to save changes

ajoutsectiondivi18

We choose to insert content right before navigation menu, so we’ll look for the position where primary menu is called.

Primary navigation is inserted in the header.php template, we just have to open this file for edition (i recommend to use a child theme and to copy header.php inside your child theme)

The line we are searching for inside header.php is the following one :

Our php instruction will be inserted right before it

<?php echo do_shortcode('[et_pb_section global_module="198"][/et_pb_section]'); ?>

As you can see, we have our SECTION id (198) and we call global_module regardless of our choice about global or not, it won’t change anything here.

So we now have the file header.php modified like the following :

codeinsere

Once done, we save header.php and we take a look at the result

ajoutsectiondivi15

We just achieved adding a section before the primary navigation bar.

We can do the same for footer inside footer.php. We are also able to add a section inside any template like page.php or single.php or any other custom page. You can for instance add a “call to action” module on all your pages without even the need to open a page in builder.

Feel free to ask if you need further explanation.

News

73 Comments

Patrik on 16 December 2019 at 10 h 30 min

Has this stoppen working for divi 4? I am trying this to include different saved footers based on language but even outputting one of them without if/else seem dead in divi 4
Reply
- Fabrice on 16 December 2019 at 10 h 47 min
  
  Hi, no it still works but you need to remove any footer from theme builder. If you use theme builder footer, footer.php is no more loaded.
Ryomou on 21 July 2019 at 18 h 41 min

Hello,
In DIVI I can define my own sidebars in the widget area, so I did. can I include this special sidebar to my PHP-file in the same way?
Reply
Paulo on 23 May 2019 at 14 h 48 min

Hi Frabice,

I’m only using plugin Divi Builder in different theme.

I add the shortcode you have provided and I was able to see the global module I created but the CSS is not applied.

What should I do?
Reply
- Ryomou on 21 July 2019 at 18 h 44 min
  
  Insert a code-modul (with your css in ) in your global modul .
Sam on 21 May 2019 at 17 h 06 min

How can i add this to only woocommerce pages. As now If I add this to header.php it shows on all pages?
thanks so much!
Reply
- Fabrice on 21 May 2019 at 18 h 12 min
  
  Hi, you can do it with conditionnal tags. All depends on where (what woocommerce page) you want to add your section. All tags can be found there :
  https://docs.woocommerce.com/document/conditional-tags/
  
  There is also a working example, replace echo line by the shortcode to call the section.
Mike on 5 April 2019 at 21 h 27 min

Very helpful! thank you for posting. Question: When I try this, regardless of what ID I use, it’s defaulting to the most recently added module to the divi library.

I’m adding the below code to the single.php, just outside .container
Reply
acrylgiessen on 19 November 2018 at 0 h 07 min

Dear Fabrice

Just a little feedback – it works now! Really appreciate your help and Know How! Best regards from Switzerland.
Reply
- Daniel Hazard on 10 December 2018 at 18 h 10 min
  
  How would I use this to change the header of a Project page?
- Fabrice on 10 December 2018 at 20 h 48 min
  
  If you want the same header for each project, you can copy the single-project.php template from divi theme inside your child theme folder and then add the shortcode in this template.
Thomas on 18 November 2018 at 20 h 40 min

Dear Fabrice

Thank you so much for your fast reply! You really helped me out!

I tested it for single posts and it worked perfect. But I tested your solution with the categories, created a blog post with a category called “Acrylmalerei” and entered the following code in the single.php under the main content div container. Unfortunately this doesn’t work. Do you have an idea why this is so? With single posts it works. This really would be the most elegant solution, so I hope you have an idea to help me out! Best regards Thomas

if ( is_category(‘Acrylmalerei’)) {
echo do_shortcode(‘[et_pb_section global_module="16636"][/et_pb_section]‘);
}
Reply
- Fabrice on 18 November 2018 at 20 h 49 min
  is_category maybe only used inside archive page. If you want to test a post you should use in_category instead.
  
  Let’s try the following :
  
  if (in_category('Acrylmalerei')) { echo do_shortcode('[et_pb_section global_module="16636"][/et_pb_section]'); }

acrylgiessen on 18 November 2018 at 1 h 06 min

Dear Fabrice

Is there a possibility to define for each blog post a unique header image?

So blog post with id 2 = header x
another blog post with id 3 = header y
and so on

best regards

Thomas

Fabrice on 18 November 2018 at 10 h 13 min

Yes, you can use conditionnak tags to display desired header for individual posts.
For instance you can use :


if (is_single('2')) {
   echo do_shortcode('[et_pb_section global_module="xxx"][/et_pb_section]');
}
elseif (is_single('3')) {
  echo do_shortcode('[et_pb_section global_module="xxy"][/et_pb_section]');
}

You also can use array of id if you want the same header for multiple posts :


if (is_single(array(2,4,6,8)) {
 echo...
}

It also works with categories like :

 
if ( is_category('cars')) {
  echo do_shortcode('[et_pb_section global_module="xxx"][/et_pb_section]');
}
elseif ( is_category('tools')) {
  echo do_shortcode('[et_pb_section global_module="xxy"][/et_pb_section]');
}
elseif ( is_category('accessories')) {
    echo do_shortcode('[et_pb_section global_module="xyy"][/et_pb_section]');
}

Nahuel on 2 July 2018 at 1 h 03 min

Thaaaaaaankss!!
Reply
Alex on 22 February 2018 at 12 h 28 min

Nice tutorial!

I would like to add a full width header from my divi library at the top of my single.php template, so that underneath the main nav is the fullwidth header, then the blog post. do I add your code before

or inside the main content container?

Thanks for the help!
Reply
- Fabrice on 4 March 2018 at 11 h 45 min
  
  Hi Alex, thanks for feedback. To have the fullwidth header under the main nav, you just have to set the shortcode after the get header statment. Inside the main content container is better, as everything from the builder will be there.
Sergio on 11 January 2018 at 19 h 23 min

Hi Mate,

Can I add more than one “” to my php file?

I’m asking cus’ when I do this, Divi just copy the first section on my Divi library in the website.

Can you help with this?
Many thanks…
Reply
- Sergio on 11 January 2018 at 19 h 24 min
  
  I mean…
  
  Can I add more than one shortcode to my php file?
- Fabrice on 13 January 2018 at 22 h 06 min
  
  Yes you can add more than one shortcode to your php. But not an array of module or layout id, you need to use the do_shortcode multiple times
webdzinz on 11 January 2018 at 7 h 36 min

Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful.Wonderful post.
Reply
Benjoe Carandang on 29 December 2017 at 4 h 44 min

Hi Frabice,

I’m only using Divi Builder and I’m using different theme for some purpose.

I tried adding the shortcode you have provided and I was able to see the global module I created but the CSS is not applied.

What should I do? Is it Divi Theme is required?
Reply
- Fabrice on 29 December 2017 at 9 h 03 min
  
  Hi, replied by email with a setting to try inside the builder. Hope it will help.
- Carlos on 19 April 2018 at 9 h 30 min
  
  Hi Benjoe and Fabrice,
  
  I am having exactly the same problem with Divi. The CSS is wrong when I use the php code into my custom pages.
  
  Have you come with any solution?
  
  Thanks in advance!
- Carlos on 19 April 2018 at 10 h 19 min
  
  I will answer myself: use not global elements and the CSS will be applied
- robby on 3 April 2019 at 23 h 15 min
  
  Carlos –
  
  Go to divi theme options – builder – advanced – Then clear the ‘Static file css generation’ .
  
  — This worked for me!
Vik Martin on 11 November 2017 at 12 h 09 min

Hi Fabrice would you be able to help me with this?
I’m trying to add a library section to an archive page template. I’m sure I’ve followed your instructions exactly but the section doesn’t appear. I want to add it after the header, but I’ve tried in various places in order to try to find the problem, and all that happens is that, no matter where I paste the code, the margin disappears from the main content area.
When I look at the code in the firefox inspector I can’t find the section.
The page is https://thecraftygardeners.co.uk/project/
I’ve double checked and the page template and section ID are definitely correct
Thanks
Reply
- Fabrice on 11 November 2017 at 13 h 16 min
  
  Hi, i think the culprit is the fixed menu. Let’s try to follow the part of the tutorial where i explain it need to be desactivated. I’m not sure your issue is related but it’s the first thing to try out. If it still doesn’t work, we will need to ensure the code is correct. (You can email me your code at contact@creaweb2b.com, sometimes a little typo can avoid it from working)
Marine on 20 October 2017 at 16 h 53 min

How do I assign a module a class name?
Reply
- Fabrice on 26 October 2017 at 22 h 18 min
  
  Sorry, i was travelling abroad without access to my blog. To add a class to a module, go inside divi library, open the module settings and then inside advanced settings you’ll find css id and class settings. When you call the module inside a template, the class from library module will appear.
HawK98 on 20 October 2017 at 14 h 48 min

Thank you so much. This has really helped me out – a stranger from Liverpool UK
Reply
- Fabrice on 26 October 2017 at 22 h 18 min
  
  Thanks for feedback 🙂
Rupesh Gelal on 17 October 2017 at 17 h 51 min

There is a problem on page load with this solution. I placed divi layouts in the woocommerce shop page and the throttled the bandwith in browser for making my internet connection slow. This will display the broken content of the layout that we have imported using php code. It is because the code of divi layout is already sent to browser while php code is still executing in the server and getting the woocommerce products. It takes some significant amount of time to get the products. This delay is visible to the user because of the visible broken content that is rendered on browser. The browser makes DOM and CSSDOM only after it gets all the html code from the server. After that the browser makes request to the css files. There is a gap in this time difference which is noticeable even in very high connections because browser can’t render the css very fast even if the css file is downloaded fast. So, this solution is better for pages that don’t have much execution logic and time. But not suitable for pages that have some heavy execution logic like woocommerce shop page.
Reply
- Fabrice on 18 October 2017 at 10 h 19 min
  
  Never noticed that but thanks for your feedback 🙂
Luke on 19 September 2017 at 22 h 51 min

Thank you very much, just what I needed to know!
Reply
- Fabrice on 20 September 2017 at 8 h 35 min
  
  thanks for feedback 🙂
Ben on 31 August 2017 at 12 h 49 min

Hi,

This is exactly what I’ve been looking for. Very useful information, thank you!

I created a short function to call modules in templates:

—

So now you can do

And it pops out!

Best,
Ben
Reply
- Fabrice on 31 August 2017 at 15 h 02 min
  
  Hi Ben, thanks for sharing your function, code won’t be allowed inside comments but i already wrote a similar one here
  
  And i also made a plugin here
  
  If i’m right, you’re french, this blog is available in french too 🙂
Jeremy on 28 July 2017 at 17 h 05 min

THANK YOU! This solution is brilliant and works! Saved me hours and hours.
Reply
William on 26 July 2017 at 17 h 47 min

Thanks for this, it’s just what I’ve been looking for how to do.

A quick question, is there a way to insert this so it’s visible on all pages except the home page?
Reply
- Fabrice on 26 July 2017 at 18 h 07 min
  
  I see 2 ways to do that : first one is to hide it for homepage via css (home page receive “home” class for the body tag. So you can target your new section via css and use display:none; You just need to inspect the code to find wich section is to hide.
  Second way (and far better, as it won’t load the section at all) is to use a condition to test if it’s home or not and then call the shortcode. i can’t paste code here so follow this link to see how you can add a condition for home class
Asaduzzaman suman on 22 July 2017 at 12 h 35 min

Awesome man!!
thanks a lot
Reply
- Fabrice on 25 July 2017 at 11 h 41 min
  
  You’re welcome 🙂
Polina on 26 May 2017 at 7 h 24 min

Hi,
Just a small suggestion or question, in case I missed it: is there anywhere in this post where I can download the code to insert? I understand the statement is pretty small but still looking at it and typing it word for word is prone to errors and takes time. Would be much better if it was available as a copy&paste text.
Thank you very much for taking the time to document this solution.
Reply
- Fabrice on 26 May 2017 at 8 h 50 min
  
  Hi, i’m sorry but when i wrote this tutorial i wasn’t able to share code inside a post. Now, i just edited the post to make the code available to copy/paste and then avoid errors 🙂
Jordi on 6 May 2017 at 19 h 19 min

Awesome tip. Thank you so much, it makes everything so simpler!!!
Reply
- Fabrice on 7 May 2017 at 23 h 18 min
  
  You’re welcome. Thanks for feedback 🙂
Ian on 4 April 2017 at 20 h 56 min

This worked great for me and first time. Thanks for the great explanation.
Reply
- Fabrice on 5 April 2017 at 11 h 32 min
  
  Thanks for your feedback 🙂
Rubén on 3 April 2017 at 18 h 44 min

Works great. Thanks!!!
Reply
- Fabrice on 3 April 2017 at 20 h 32 min
  
  You’re welcome 🙂
christian Wenke on 3 April 2017 at 13 h 10 min

Hi Fabrice. Thank you very much for this nice tutorial. I wonder how the code has to look if i want to add something else than a section. I want to add a single module under my posts. I think i can do this by changing the php code to et_pb_module, but where do i place that so the module automatically appears under every single post? Thank you very much in advance…
Reply
- Fabrice on 3 April 2017 at 13 h 16 min
  
  Hi, you don’t have to change the code. This code will remain the same for a layout, a section, a row or even a module.
  
  Just design your module inside divi library (or in page buildr and then save it to library) and grab the module id. Next you insert the do_shortcode where you want the module to appear.
- Fabrice on 3 April 2017 at 20 h 43 min
  Christian, i’m sorry, i didn’t saw you were asking where you can add the shortcode. In order to make it appear below your posts, you need to insert the do_shortcode inside single.php template. You can try to insert it at the end of the content, the end of file looks like :
  
  <?php get_sidebar(); ?> </div>  </div>  </div>  <?php get_footer(); ?>
  
  Let’s try to insert it after the sidebar (warning, if you do so, put it before the php closing tag), or maybe after one of the div. Or right before the footer… You need to try 🙂
Manuel Larrazábal on 6 November 2016 at 23 h 29 min

Hello Sir, im trying to follow your guide to add a banner on top of all my single blog posts but below the main Menu. I want it to be very similar to our homepage: https://mananys.com/blog/. I want the image banner and the secondary Menu to be present in every single blog post page.

I think i need to edit the single.php file in my child theme. But i dont know where to place the code. This is the code im trying to paste into the single.php file:

Any help you can give me with this? i Dont know if im missing something or what im doing wrong.

Thanks
Reply
- Fabrice on 7 November 2016 at 8 h 22 min
  
  Code won’t appear in comments, you need to put the code inside single.php just after the main content DIV. If you want me to take a look, send me your code by mail at the following mail : contact@www.creaweb2b.com
- Manuel Larrazábal on 7 November 2016 at 15 h 00 min
  
  Thank you Fabrice, i sent you an email containing my code and a screenshot of what i want to accomplish. Have a nice day sir.
- Fabrice on 7 November 2016 at 15 h 14 min
  
  Just replied, i can’t see the do shortcode line inside your single.php file. Be sure to put the edited single.php file inside child theme folder.
Elisandro on 6 November 2016 at 18 h 38 min

You are the Divi savior, Fabrice! Thanks so much!
Reply
Oemar on 11 September 2016 at 1 h 16 min

great tutorial, safety and cleanly code.

thanks very much sir 🙂
Reply
- Fabrice on 11 September 2016 at 12 h 46 min
  
  Thanks 🙂
Lori on 8 September 2016 at 13 h 46 min

Thank you! Great details, much appreciated.
Reply
- Fabrice on 11 September 2016 at 12 h 45 min
  
  Thanks 🙂
Nick on 5 August 2016 at 7 h 29 min

Hi Fabrice,

Thank you for this great tutorial. It is just what I need to insert a custom header into my Woo Commerce pages as well as my standard, non WC pages.
Reply
- Fabrice on 8 August 2016 at 9 h 41 min
  
  You’re welcome.
paul on 2 August 2016 at 3 h 21 min

This worked great. I was able to place the floating centered icon on the bottom of woocommerce shop & category page template and the single product template using the child theme RoyalCommerce. Great tutorial and pretty easy to implement.
Reply
- Fabrice on 8 August 2016 at 9 h 42 min
  
  Glad to see it was helpful for you 🙂
Larry James on 2 August 2016 at 0 h 44 min

Good tutorial Fabrics. This is really going to help with customizing Divi child themes. Being able to add sections into the page templates is going to be a big help.
Reply
- Fabrice on 8 August 2016 at 9 h 42 min
  
  Thanks
Catherine on 1 August 2016 at 23 h 09 min

Bravo beau travail. Tu devrais nous rejoindre dans le groupe division theme France pour nous apporter ton expertise. Merci d’avoir partagé. .
Reply
- Fabrice on 2 August 2016 at 8 h 29 min
  
  Merci Catherine, je viens de demander à rejoindre le groupe DIVI theme France
Emily on 21 July 2016 at 15 h 35 min

This is nice. Don’t need plugin. Thank you so much.
Reply

Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Add a DIVI section inside page template

73 Comments

Laisser un commentaire Cancel reply