Adding a Site-Wide Divi Builder Layout Below the Header

This post may contain referral links which may earn a commission for this site

Manually Editing header.php

You can add a Divi Builder layout to the header of your pages by editing the header.php file in Divi (or better yet, in a copy of the header.php file placed in a child theme).

To do so, replace this line in header.php:

<div id="page-container"<?php echo $page_container_style; ?>>

With these lines:

<div id="page-container"<?php echo $page_container_style; ?>>
<?php echo do_shortcode('[et_pb_section global_module="5944"][/et_pb_section]'); ?>

The global_module="5944" part specifies the internal WordPress id of the global module ("5944" in this case). You'll need to change this to the id that WordPress assigns to your global module, as it will likely be a different value. To find this id, go to "Divi > Divi Library". This will take you into the Divi Library, which is where all the saved global modules (and other modules / layouts) are stored. You'll see a list of "layouts" and should hopefully be able to locate the name you gave to the global module you wish to use. Click on that global module to go to its edit screen. Here you'll see a simplified version of the Divi Builder which includes your global module. To get the id for your module you can now simply look up at address bar of the current browser tab. In the URL you should see a part that says"post=" followed by a number. This number is the id you need.

Note that if you have edited the Divi files directly, then your changes will be written by future updates to Divi and will need to be re-applied. This should not happen if you edited a copy of header.php in your child theme, but note that changes Divi makes to its own header.php file won't be transferred across to your child theme header.php and so you'd need to manually repeat your steps if you want to take advantage of any enhancements Divi makes to its own header.php file.

Using a Plugin

There are a couple of plugins for Divi which allow you to add Divi Builder layouts across your sites, in various places such as above and below the main header. These are:

The main advantage over these plugins, apart from being easier to use and requiring no coding, is that they should not be affected by Divi updates.

Hundreds of new features for Divi
in one easy-to-use plugin

10 Comments

  1. Thanks for this short Tipp and publishing

    Reply
  2. Hi Dan, great snippet!
    Quick question, how would i modify it to just hide on mobile and tablet, but to remain visable on desktop?
    Many thanks

    Reply
    • Hey Michael, I haven't tested it myself, but I think you should be able to do it using the "Disable On" setting you'll find on the Advanced tab of Section, Row and Module settings. You can use this to disable the module on mobile and tablet, which should leave it visible on desktops only. Let me know if that doesn't work for you. Thanks!

      Reply
  3. Thanks for the article. I know about the global feature for sections, rows and modules… but is there a way to have an entire page be a global "layout". I am working on building long sales pages for similar products and I would like to be able to rearrange the layout, add sections, or delete sections (with rows, modules) and have that replicated across the other sales pages (assuming they have all been set as global). Right now I do not see anything in Divi that allows me to save an entire page as a global layout so that I can rearrange a page and it changes on all of the corresponding pages.

    My concern is that I am going to build all of these similar pages (50+ products) and then I will later want to make a change like adding in a section or changing the arrangement of sections, adding a section or removing a section, and I won't be able to do it. I will only be able to make changes within a section, or within a row, or within a module, but not across them. I will be building out a sales funnel for each product – so eventually I could see upwards of 200 pages that include landing pages, product pages, upsells, thank you pages. I would prefer to not be editing every page if the layout needs to change… or I want to A/B split test something.

    I know that I can save an entire layout that can be added to a page. The trouble is that it seems to only accept changes within the row or module, but the sales page using the layout doesn't recognize a rearrangement of sections in the layout or enabling/disabling sections. It ignores these changes.

    Do you know of any way to handle the kind of global page settings I am referring to in Divi so that I can control the whole page and have it replicated? It is almost like global site-wide settings but with specific pages. Is there anything outside of Divi that can do this?

    Thanks!

    Reply
    • Hey Gabe, unfortunately, I don't know of anything in Divi or any third-party plugins which would allow you to do this. It's also not something I can see any easy (or hard!) way to implement. I've looked into exactly this problem in the past for my own sites.

      The best workaround I was able to come up with was to try to plan out a section structure at the start that is as unlikely as possible to need altered. So in the case of a landing page I'd look at what are the common sections you include (or can conceive of including) in your landing pages. So you might have an "introduction" section, a "benefits" section, a "testimonials" section and a "CTA" section, for example. Add these in now, even if you don't plan on using them right now (you can empty or disable the ones you don't need). Then between these you might even add some empty, disabled global sections. That should minimize the need to add new sections later – you can just repurpose one of these empty sections, which will be available in all you pages. You can also use these for swapping sections, and to "delete" a section, you can just empty / disable it.

      This also lets you do split tests on individual sections, etc. If you want to test the order of two sections, you could (in some cases, at least) pull all the modules from both sections into a single section and test two variants of that section with the two corresponding module arrangements.

      It's not particularly neat, but it's the best I've been able to come up with given the constraints of Divi's currently limited expressiveness in this area. Hopefully it'll be addressed in a future Divi update!

      Reply
  4. Thanks for this. Exactly what I was looking for with my Divi site.

    One problem – my site is showing the menu fine but there is a random white strip above it when using this code (this doesn't happen if I use the global menu item directly inside the post via the Builder. ie. before I added this code to my theme's header)

    Any idea why this would happen?

    You can see it here: https://reviewdirectory.org

    Reply
    • Hey Paul, where you able to sort this out? Looking on the site I'm not seeing a white stripe above the menu (the one with "Blog", "Electronics", etc)? Or am I missing something? Thanks!

      Reply
  5. "And replace the id of the global module given here with the id of your layout (which you can get by going to the layout in your library and looking in the URL for the "post" id."
    – could you explain this global module and accessing it in layout

    Reply
    • Hey Del Bot, I've expanded the paragraph to better explain the process of access the module. I hope it makes sense, but let me know if it's still not clear to you. Cheers!

      Reply
  6. This is better than using a plugin. Thank you for sharing!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *