Where Is The Divi Archive Template

A category page tin be extremely helpful to users by providing them with an unabridged page full of stuff they are interested in (or search for). But many times the category folio can suffer when it comes to design. In Divi, before the days of the Divi Theme Builder, developers had to rely on manually customizing the php code on a category page template theme file and and so styling the page template purely with external CSS. Just now, with the Divi Theme Architect, this procedure has go like shooting fish in a barrel and enjoyable!

In this tutorial, we will be showing yous how to create a category page template for your blog completely from scratch using the Divi Theme Architect. Nosotros'll show yous how to quickly setup a new template assigned to post categories as well equally how to design the template using the appropriate modules and dynamic content using the Divi Builder.

Let's go started!

Sneak Peek

Here is a quick await at the category page template we will design together in this tutorial. In this image, information technology is being used to display all the posts with the "Business" category.

Download the Layout for Complimentary

To lay your hands on the designs from this tutorial, you will beginning need to download it using the push beneath. To gain access to the download you will demand to subscribe to our Divi Daily email list by using the course below. As a new subscriber, y'all will receive even more Divi goodness and a free Divi Layout pack every Monday! If you're already on the list, just enter your email accost below and click download. You will not be "resubscribed" or receive extra emails.

You have successfully subscribed. Delight check your email address to ostend your subscription and get admission to costless weekly Divi layout packs!

To import the template layout to your website, y'all volition need to go to the Divi Theme Builder and use the portability option to import the .json file to the theme architect.

Let'south go to the tutorial shall we?

What You lot Demand to Go Started

To go started, you will need to practise the post-obit:

If you lot oasis't still, install and actuate the Divi Theme installed (or the Divi Architect Plugin if not using the Divi Theme).
Since we will be creating a category page template for blog posts, you lot will need to accept posts already created on your website with categories assigned to them.

Subsequently that, y'all are gear up to become.

Modules and Dynamic Content Available for Category Folio Templates

When edifice a Category Page template for a Divi blog, information technology is important to sympathise what tools are at your disposal and then that you can effectively build a template that dynamically displays the right data. For a category page template for weblog posts, we are most interested in displaying posts by the electric current category whenever a user visits a category page. For instance, if a user clicks the category link "Business", they should come across an archive folio that displays all the posts with the category "Business". Some Divi modules have congenital in options to make displaying dynamic content on a template pretty easily.

The Weblog Module

The Blog Module is the primary module that should be used to display Category Page templates. This is because has the built in option to display Posts for Current Page.

This is basically telling Divi to display the posts that are normally generated whenever a user visits the page. So with the option set to display "Posts for Current Page", the user will be able to view a category folio and have the posts by category correctly displayed.

Post Slider Module and Postal service Title Module

You tin can as well use the Post Slider Module to display the Posts for Current Page. This is helpful for creating a dynamic post slider that displays the posts generated upon visiting a category page, much like the weblog module can do.

The Post Title Module tin can as well be used simply it is pretty much limited to the capability of displaying the Championship of the folio dynamically. Nearly of the other elements available inside the mail title module aren't applicable to an annal page, simply specific postal service templates.

Post/Archive Championship (Dynamic Content)

An easier mode to display the Mail service/Archive Page Title is to use a regular Divi module so pull in the Mail service/Annal Folio Title using the dynamic content feature bachelor within all Divi module.

For case, you can use a text module and then add together the mail/archive page title every bit dynamic content to the body content. And so you can manner the title however you like.

Now that you sympathize the tools needed to create a category folio template, let's jump in and create 1 together.

How to Create a Category Folio Template for your Weblog

For this category page template, the goal is to create a custom torso area for a template that is assigned to all category pages for weblog posts in Divi. We aren't going to be creating a custom header or footer area for this template. Just you can hands utilise this template on your own website with your own header and footer.

Creating and Assigning a Custom Template for Mail service Categories

To get started, go to your WordPress Dashboard and navigate to Divi > Theme Architect. And so click the empty gray box expanse to add a new template.

Next, assign the template to All Category Pages.

Adding New Custom Body Area to Template

To build the custom body for the template, click the Add Custom Trunk area and then select "Build Custom Torso".

And then choose the option, "Build From Scratch".

Add Dynamic Annal Championship

In the Template Layout Editor, create a new 1-column row inside the regular section.

Then add a text module to the row.

Delete the default trunk content and click the "Use Dynamic Content" icon and select the option "Postal service/Archive Title.

Once the Post/Archive Championship element is in identify, open up the settings by clicking the gear icon.

And so update the Before and Subsequently input areas to wrap the content in an H1 tag and add an additional piece of static content after the dynamic title equally follows:

Before:

<h1>

After:

          Articles</h1>

We need to wrap the title in an H1 tag for SEO purposes. The static give-and-take "Articles" is added later the title then that if a user visits a "Business concern" category folio, the title will read "Business concern Articles".

Style Dynamic Archive Title

Once the dynamic content is in place, we can way it using the following:

Heading Font: Ubuntu
Heading Font: Weight: Assuming
Heading Text Color: #192231
Heading Text Size: 48px (desktop), 38px (tablet), 28px (phone)
Heading Line Tiptop: 1.2em

Using the Web log Module to Display Posts for Current Category Dynamically

With the dynamic category page title in place, we need to add the blog module to brandish the posts for the current category folio.

Add together New Row

Add a new one-column row under the electric current top row.

Add together Blog Module

Then add a blog module to the row.

Update the Content options equally follows:

Posts for Current Page: Yep
Postal service Count: nine
Prove Read More Button: YES

Recall, we must make sure the Posts for Current Page is enabled for the category folio to pull the right postal service archive.

Design Blog Module

With the content settings in place, let's make some changes to the design as follows:

Layout: Filigree

Title Font: Ubuntu
Title Font Weight: Bold
Title Text Color: #192231
Meta Font: Ubuntu
Meta Text Colour: #985e6d
Meta Text Size: 13px

Read More than Font: Ubuntu
Read More than Font Weight: Assuming
Read More than Font Fashion: Underline
Read More Text Color: #985e6d
Pagination Font: Ubuntu
Pagination Text Color: #985e6d
Pagination Text Size: 18px
Pagination Line Height: 2em

Grid Layout Border Width: 0px
Box Shadow: see screenshot
Box Shadow Blur Strength: 70px
Box Shadow Spread Strength: -10px
Shadow Color: rgba(25,34,49,0.iii)

At this bespeak we have a bones category page up and running complete with the page title and the blog posts which will brandish correctly according to the electric current category page. However, we tin can get more than artistic by adding additional module to display the mail in creative means.

Create a Mail service Slider to pull in the 4 almost recent posts in the current category.

We tin can use a postal service slider module to display the category folio posts dynamically as well. Here is how to practice information technology.

Add New Row

Outset add a new row with a 1/iii ii/3 column layout under the pinnacle row.

Add Post Slider Module

In the left column, add a post slider module.

Then update the mail service slider content options as follows:

Posts for Current Page: YES
Post Count: four
Prove Postal service Meta: NO

Design Mail Slider Module

Now that the post slider content is in place, update the design settings as follows:

Text Alignment: Left
Title Font: Ubuntu
Title Line Peak: 1.3em
Use Custom Styles for Push button: Yep
Button Text Size: 16px
Button Groundwork Color: #985e6d
Button Edge Width: 0px
Button Font: Ubuntu

Box Shadow: run across screenshot
Box Shadow blur Strength: 70px
Box Shadow Spread Strength: -10px
Shadow Color: rgba(25,34,49,0.3)

Create a Blog Module with fullwidth layout

In the correct column, we tin add some other blog module with a fullwidth layout instead of a grid layout. This volition permit united states to provide another unique display area for our category posts.

Add Web log Module

To save time, allow's copy the existing blog module in the lesser row and paste it in the right column next to the post slider.

Update the Duplicate Blog Module Settings

Open the duplicate Web log Module Settings and update the following:

Posts for Current Page: YES
Mail Count: iii
Excerpt Length: 120
Evidence Featured Epitome: NO (at least for now)
Testify Pagination: NO

Layout: Fullwidth:
Box Shadow: none

Result And then Far

So far the result is minimal brandish of the three blog posts.

But if we want to have information technology one step farther, we can add together some small featured images to the left of each of the post excerpts.

Employ custom CSS to create smaller featured images that float to the left of the postal service excerpt content.

To add some small-scale featured images to the left of the blog postal service excerpts, we need to add together some custom CSS.

Give Weblog Module Custom CSS Class

For starters, we need to add together a custom CSS class to the Blog module. Open the blog settings and, under the avant-garde tab, enter the following:

CSS Grade: left-blog-image

Add CSS Code with a Code Module

Since we are just adding a pocket-size CSS snippet to this template, we tin use a lawmaking module. Add a code module nether the web log module.

Insert CSS Code

Then enter the post-obit CSS within the code content area:

<style> @media (min-width: 981px) { .left-blog-image .et_pb_post .entry-featured-image-url { float: left; width: 100%; max-width: 150px; margin: 0 20px 30px 0; } .left-weblog-image .et_pb_post { margin-lesser: 20px !important; } } </fashion>

Update Web log Module Settings to include Featured Paradigm

Now, we can add together the featured image back so that it is displayed in the new position on the left thanks to the CSS snippet.

Additional Styling to Template

Before we wrap things up, let'south make a few modest bear on ups to the design.

Add and Mode a Divider Under Annal Title

Add a divider module directly under the archive page title at the peak of the template.

Then update the divider settings equally follows:

Line Colour: #985e6d
Divider Weight: 3px
Max Width: 200px

Add Section Divider to Layout

Open the section settings and add together a section divider every bit follows:

Top Divider Style: see screenshot
Elevation Divider Color: rgba(73,78,107,0.07)
Divider Height: 90vw
Divider Flip: horizontal and vertical

Employ Post Outset Number with each Module to avoid indistinguishable post Displays

Right at present all of our modules are pulling the aforementioned post content for the current category page. In lodge to keep those module from displaying duplicates, we can use the Post Offset Number option to "skip" a certain number of posts displaying the post feed.

Fullwidth Blog Module Postal service Beginning

Since our post slider is already displaying the first (most recent) mail service for the electric current category page, we can beginning this post on the blog module adjacent to it. Open the settings for the web log module to the correct of the mail slider and update the mail beginning number as follows:

Post Starting time Number: i

Now the module will commencement with the second most contempo mail for the current category page.

Filigree Web log Module Post Offset

Once the first blog module mail service offset is in identify, we need to start the posts in the main web log module at the bottom of the template. Open that blog module and update the mail service offset number as follows:

Post Starting time Number: 4

We need to gear up the offset number to 4 to business relationship for the iv posts that are already being displayed to a higher place. The module will now pick up where the other modules left off and start with the fifth most recent post.

Final Results

To view the concluding result, get to the WordPress dashboard and navigate to Posts > Categories. So click to view 1 of the existing categories.

Here is the final upshot.

And hither it is on tablet and phone display.

Final Thoughts

Hopefully this post volition assistance you exhale a little easier when faced with the claiming of creating a category page pattern for your website. The Divi Theme Builder does make it extremely piece of cake to exercise, specially with the blog module now having the option to brandish posts of the current page. And the post outset option allows you lot to combine multiple web log modules (or even post slider modules) without ever seeing duplicate posts on display.

How has the Divi Theme Builder helped you build category pages?

I look forwards to hearing from you lot in the comments.

Cheers!