Add a Layout from the Divi Library to Archive Pages

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

The Divi Page Builder makes it easy to create beautiful layouts for pages and posts. But we’re still stuck with using page templates for creating page layouts for archive pages. This tutorial will show you how to easily load a layout from your Divi Library into an archive page like a custom post type archive.

PHP

The first thing you’ll want to do is create an empty file in your child theme folder and name it based on the archive page you want to change. You can reference the WordPress Template Hierarchy page to determine the file name. For this example, I have a testimonials custom post type so I’ll name my file archive-testimonials.php and place it within my child theme folder. Here is a tutorial on creating a child theme.

Your file location should be similar to his /wp-content/themes/Divi-child/archive-testimonials.php

Now just copy and paste the following code into this new archive page:

The code above loads the header, the layout, and then the footer. You’ll want to replace the module number “25388” with the layout number from your library. To do this, log into your dashboard and go to Divi->Divi Libary and create a new layout. In the New Template Settings popup, make sure you select Layout under the Template Type dropdown and make sure Global is NOT checked. Click Submit and create your new layout. Now go back to your Divi Library and you should see your new layout. Hover over your layout and you should see the layout number in the URL at the bottom of your browser screen.

 

divi-layout-url

 

Once you replace the number in your archive template page, save the file and go to that page. You should see your new layout instead of the default archive page. If you don’t, you have probably named your archive page the wrong name. Again, refer to the WordPress Template Hierarchy page to determine the correct name for your archive page.

You can also use this same method to load any layout from your Divi Library above or below your header or footer. Just paste the shortcode into your header.php or footer.php file where you want the layout to load:

Again, make sure you replace the global_module=”25388″ with your layout number.

Page Builder Everywhere Plugin

You can also use the Page Builder Everywhere plugin by DiviSpace. This plugin makes it really easy to add a layout from your Divi library above and below your header or footer. You can also use it to load a layout above or below your content. You can even add logic so the layout only loads on pages, posts, custom post types, certain categories, etc. I like to use it on client websites that require an elaborate footer layout design. After installing and activating the plugin, simply navigate to your widgets and drag the new Divi Layout widget to the section you want it to display. From there you can select the layout you want to load from a dropdown and voila!

 

divi-page-builder-everywhere-widgets

 

    2 Comments

  1. This is a great way to go about it, I’ve done it with category pages with great success, but would love to be able to add a post title module to a layout in tags pages, so each has an H1 with the tag name created by the post title module, for some reason this module doesn’t show up.

    Maria

    March 22, 2017

  2. Thank you for this…it has definitely solved a few issues I was having trying to re-code the template files to get a new archive page layout!
    However, it would be great to know how to also add a page created using the Divi Builder into an archive page for the ‘project’ custom post type?
    Thank you 🙂

    Jim

    March 28, 2017

Post a Reply

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