How To Create Layout For Divi Blog Archive Pages

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.

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.phpand place it within my child theme folder. Here is a tutorial on creating a child theme.

* If you want to keep the archive loop to display your CPTs, copy the index.php file from the Divi theme folder to your child theme folder. Then rename it to the correct template file name explained above. Then you can place the layout code given below anywhere in the file that makes sense to you. Keep in mind that if you place it inside the container div, it can't be fullwidth without modifying the container CSS. If you want fullwidth, you'll want to place it directly below the main-content div. I personally use the method below, and then load the CPTs in a module in the Page Builder layout using our Portfolio Posts Pro plugin. This way I have more control over how the posts are displayed, rather than being limited to the default archive loop.

In either case, 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:

<?php get_header ( ) ; ?>

< div id = "main-content" >

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

< / div > < ! -- #main-content -->

<?php get_footer ( ) ; ?>

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:

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

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