Add a DIVI section inside page template
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 :
Then we just click on “Add new”
The add a new module window will pop up
We talk about adding a SECTION, so let’s give it a name and then select SECTION as a type.
You can make this SECTION global if you want but it’s not something necessary. Just click on “send”
You should see the DIVI Builder with an empty SECTION
Let’s add a column
And then let’s add a text module
We add a title for our test
And then we should see the following inside the builder
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
Once FIXED navigation desactivated, don’t forget to save changes
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 :
Once done, we save header.php and we take a look at the result
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.