Today I am going to show you how to give your Divi Archives page a “Grid” Layout. The grid layout is personally my favorite and I think it looks way better than the standard “Archives” page here is what mine currently looks like. This is what we will be doing.
To get started you are going to want to make sure you have the newest Divi version available from Elegant themes downloaded. Once you download the newest version (make sure you’ve updated your Divi Theme in WordPress too) you will want to extract the files and look for the index.php file.
Once you find the index.php file right click it and copy it to your desktop.
Once you have it copied to your desktop right click and rename this file “archive.php”
Now that you have renamed your file you are going to want to access your website files via FTP or your cPanel. You will want to upload this into your child themes files. EXAMPLE: If I login to my cPanel I would upload this file under wp-content > themes > dbk (this is my child theme). Now that you’ve uploaded your new “archives.php” page I went ahead and added a full-width header module inside my archives template. To do this go to your WordPress dashboard and create a new page.
Add the Full-Width header module
Create your header and make it look how you would like. (Don’t worry you can always update it later via your Divi Library). Once your header looks how you like go ahead and Save that section to your “Divi Library”
Okay now we have our “Header” module that we want to insert into our custom “Archives” page so go ahead and head over to Divi > Divi Library (Don’t worry about saving this page once you have saved this section to your Divi Library”).
Now click “Edit” in the saved header module that you just created. You are going to see in the address bar there is a post ID number copy this and save it.
Once you’ve saved that number someplace safe go to Appearance > Editor in your WordPress Dashboard click on the archive.php link under the text that says “templates”. You will see the very first line of code says
Go ahead and replace that line of code with this…and MAKE sure you paste that number you copied where it says replace that number with the one you copied.
You should now have a custom full-width header module inserted on your “Archives” page. Now it’s time to create our grid to do this go to Divi > Theme Customizer > Additional CSS and paste the following code
There you have it you should now have a grid layout archives page with images only. Please note you may have to customize your image sizes to fit your blog mine are square so this is what it’s set for but feel free to change the sizing on your images so they aren’t distorted etc. Let me know if you have any questions!