How to Create a Category Page Template for your Blog Using the Divi Theme Builder

well hello Debbie nation and welcome to a brand-new Divi use-case livestream where each week we show you how to add new design and functionality to your Divi websites and today we're gonna be showing you how to create a category page template for your blog posts using the Divi theme builder and don't forget to check the video description for more info including a link to the blog post that goes along with this tutorial so let's go ahead and jump in and get started alright welcome everyone just want to take a moment to say hello and to invite you to share where you're from in the chat and get going on some discussions asking questions all that stuff and hopefully we're gonna learn some stuff along the way if I can't get to your question or I don't know it hopefully someone in the chat can help out and if I'm coming in loud and clear for you guys give me a thumbs up so that I can know for sure that you are hearing me and and you can see everything alright waiting for that thumbs up someone looking good so far welcome all right Teresa thank you for the thumbs up hello from Ireland believe it's pronounced bad boy and let's see valerio from Italy Monique from Marilyn welcome everyone grant thanks for the thumbs up okay guys let's go ahead and jump in and get started you can see my screen here it's actually going to give you a preview of what we're going to be building today this is a you know pretty basic but it also has some cool things this is a category page template and this category page template will be created to serve as a template for all of your blog posts and that are associated with us in category and this example here we have business category and this is using dynamic content on a body area on a template to pull in the current page data in this case the category page data to display all the articles that have the category business and so this is created in a template using the Divi theme builder and I'll show you how to do that and once it's done you know no matter what category page you view for your blog posts it will display like this of course it will have different posts according to whatever category it's associated with but this is kind of the basic design and functionality of a poem a a category page template if you're not familiar with the did before point oh release the Divi 4.0 release has has introduced the Divi theme builder and this is what we're going to be using today and here's the Divi theme builder UI here and before we get started just to make sure you know what you need to get started if you're following along this video will be posted with the blog post and available on our YouTube and Facebook channels later on if you you know miss something you want to come back and view it feel free to do that but I do want to make sure that you understand we need blog posts to do this because you won't be able to see anything on our category pages if you don't have any blog posts associated with a certain category so that is kind of a one thing you would need if you're testing out this template so you'll need some blog posts and you'll need some here's some mock blog posts that I have currently and you can see that I have assigned them some categories a lot of them with the business category here and if I go to my categories or under posts and then categories here my in my wordpress dashboard I can see all the categories I have for a post and this is kind of where you can preview the to make sure that your template is working correctly for example if I've this is the business category I can click on view to view that one which we already saw but I can also click on coaching to see that one and as you can see this hasn't been assigned a template so I'll have to go and do that but this is what it will look like whenever you view those category pages eventually all right so just a reminder we are if you're just joining us I do want to welcome you to this week's div use case livestream today I'm showing you how to build a category page from scratch using the Divi theme builder so if you're interested in jumping on and learning a bit more about how to use the Divi theme builder and that was a good chance all right so let me go back to my wordpress dashboard and i want to go to the theme builder which i can go by navigating to Divi and then the Fame builder and right now this is the one that I already built and I've just have it there for reference but we're gonna be creating one from scratch you'll notice the over here is the default website template which currently has nothing in it I'm not gonna spend time in this use case tutorial building any global headers or global footers we do have some very helpful and creative posts that went out on our blog and also in our documentation that can help you do that but today we're really concentrating on the custom body area of the template which will showcase all of the categories for our current or excuse me a category page content so in order for this to work I'll need to create a new template so I'll do that and you'll see the template settings here is basically where I want to assign the template or to say it another way what pages do I want this template to what template it's with what page or post do I want to use this template on sorry I've got a little twisted there in the in the terms but you what we want to do is select all categories so these are all my archive excuse me archive pages and you'll see this one is if I select this one this is all category pages and this is essentially going to be all category pages related to the blog posts on my Divi site you could also create templates for example for your projects category pages a specific category page so there's a lot of options here we're simply gonna concentrate on a very popular use for category pages and that's for blog posts so that's why we're gonna keep it to all category pages for blog posts here click create template and we're already off and running the next thing we'll need to do is add a custom body to the template by selecting this add custom body area here and I want to build it from scratch so I'm a select build custom body all right this will bring up the template layout editor which is Oh first I need to make sure and select how I want to start the build which is to build from scratch so I'll select that one all right so we have you know our Debbi builder within this template layout editor here where we can you know we have a blank slate we can created anything we want to serve as our body template for our category pages alright so let's go ahead and get started with a row so I want to do a single column row here and let's go ahead and add a text module so this text module is going to be what I want to use to serve as my post or archive title and I'm simply going to use dynamic content and let me blow up this page a little bit so we can see a little bit better I have to remember to bring that back down but just so you can see a bit better I'm gonna this is my text module I'm gonna erase the default content in the body section I'm gonna click this dynamic content icon and that's gonna pull up all of my available dynamic content for this layout and since I'm creating a category page the really the only one available to me that I would that would really make sense is the post archive title so I'm gonna use that to my advantage that way it'll display the you know the title of the page without me having to do it manually so I'm gonna click that and that's going to pull up this little text that says your die minute your dynamic post title will display here this is of course mock content to help you style this content because it's actually going to be pulling the actual category page content whenever you view that page live this is just mock content to help you style it in the layout I'm going to take it another step further here and I'm going to edit my dynamic content and this allows you to add items or elements before and after your archive title and this will allow you to personalize it for example this I know because I'm displaying this category called business that this title is going to include that category business but if I wanted to put something before that dynamic category page title I could do that here and this is also a great way to add your h1 tag for your main header for SEO purposes so for example I can put this h1 tag in front you can see that it changes into an h1 header which is important but I can also add a word after words like articles and this is a this is static content so this will show up on all category pages make sure and put a space before it alright and so here you have the dynamic content which will display the title of the page and then you have this static content on the right of it and so whenever we view the example page let me pull that up quickly well we'll see in a little bit I don't want to lose momentum here but you you have this ability to add this static content which will stay it will say articles on every page but this post title will change alright so that'll display business articles if I'm on a business category page I think we get it all right after that we're going to style it a bit so I'm going to go to my design settings here and this will style all of the content in that block dynamic block of content here so I'm going to set my heading text it is an h1 so I want to keep it under there and I'm going to set it to let's do a boom - all right and let's make it bold let's change the text color a bit like in the dude I'm not gonna get too crazy because I mainly want you to understand how to make a page template a category page template it's and really the exciting part is that you can now use the Divi Builder design options to style it however you want all right so the heading text size let's make it 48 pixels and let's let's change it on tablet we'll make it 38 just decrease it by 10 pixels each time for phone let's do 28 all right and let's do a line height of 1.2 m/s looking good so far now let's go ahead and close that out so let me go make sure and get my there we go desktop view so there's my dynamic title here to display my archive title for my category page we're gonna add another row let's do this will be where we display our blog module so I'm gonna do another single column row and then this time I'm going to add the blog module now the blog module is the key to designing a category page our archive page template and I'll show you why in a moment so let's add our blog module and the reason why this is the module to use is because it has this option under the content area here make sure you can see that two posts it says for content it says posts for current page in other words if I select that it's going to display all the for that current page whatever it's supposed to be whatever that content is supposed to be for that page and in this case it's gonna be posts related to the category or a certain category so that's definitely want that's a necessity to select the posts for current page option that will dynamically display the archive page posts content all right all right please please ask questions if you have any I know I'm going pretty quickly and this is a lot of new stuff all right looks like I'm coming in a little quiet on my stream hopefully you can hear me okay but I'll try to speak a little bit louder okay so where we are currently is we have selected our post for current page which is necessary let's go ahead and change the layout so using the blog module settings we can change the number of posts the post count in other words how many we want displayed I'm gonna choose nine because by default I'm going to change it if I go to the design tab here and change the layout to grid instead of full width it'll give me that three column layout on desktop which that's why I chose for the post count to be nine because it's a nice even design symmetrical design if I put ten it would like add one underneath here which doesn't look as nice so let me go ahead and add a read more button as well under the elements section so under these elements this is just like a blog module that you're used to in one building in Divi there's a all these options to show and hide these I'm going to choose to show where is it yeah the read more button here alright alright let me go ahead and choose not to show the author just because it kind of gets a little busy with that metadata down there I want to keep it a little bit more simplified alright so we have our layout as grid let's go ahead and update a few of the design settings here for our title text let's go ahead and match that font that we used here that Ubuntu and then make it bold let's do that same color for the title and let's do the same for the meta text let's give it the same font and let's give it a different color though okay so that look looks pretty good let's go ahead and decrease that meditech size just a tad it's already looking or coming together nicely for a post category page template let's go ahead and update the the read more button here that's that one right below the excerpt there the read more text [Music] make it bold there you go and let's make it underline let's increase the size of it just a tad and let's go ahead and change the color just the line-height a little bit give us some more room and lastly I want that pagination text to have a similar design as my other links change the font the pagination if you're curious that's the pagination link down here that's the link to older posts or to the recent posts alright that looks good I'm going to add a little box shadow before we leave this blog module and I don't like that border that's there by default so I'm going to take that out set that to zero the grid layout border with set to zero there's my my shadow there and let's go ahead and you know change up the shadow to make it less less abrupt I'm gonna increase that and let's do spread strength negative ten pixels so my black box shadow blur strength is let's make it 70 pixels box shadow spread strength is negative ten pixels that kind of gives a nice depth to the these little archive or blog cards here all right I think we're done I'm going to save that out and actually if I wanted to I could stop here just because this will function like a category page template would just to kind of test it out let's go in the back end here let's go check out my not get ahead of myself so I definitely want to make sure and save this out I don't want to lose my content so make sure and save it and then close it out with the X and then this is very important I want to click Save Changes on my Divi theme builder as well before I go in and preview my template so I'm gonna go to my posts categories here and let's go ahead and look at the category page so you can see this is an actual live category page the business category and you can see that this functions like a category page already just with that simple installation of the blog module a little bit of design and making sure that it's pulling in the current posts all right but we can do a little bit more with it so let's go back to edit our custom body here for our all category pages template and now we're gonna add a post slider which is also something cool you can add to these category page templates but before I jump in and do that let's go ahead and take a moment and well welcome everyone who is just joining us welcome to this week's Divi use-case livestream today I'm showing you how to create a category page for your blog posts excuse me a category page template for your blog posts using the Divi theme builder so feel free to ask any questions and I am gonna check those questions right now just to make sure I don't I'm not missing any ones let's see so Darren asked can you add category description I don't know for sure it's a good question I think I remember testing that out but I'm not I don't think so to answer your question I don't remember seeing that I guess I could look to make sure it is not a you know a oops I'm just gonna check and see what's available as dynamic content here so I'm just do a text module real quick and let's pull in that dynamic content here yeah there's nothing yeah there's something for you know a post description or a product description rather and but I don't see anything for a category page so the answer your question I don't think so a good question you could of course include it but I don't think it's readily available in the Divi Builder or in this template editor here how does this effects excuse me Jason asked how does this affect RSS feed we rely on some automations that require RSS functionality good question I don't know if I don't mmm no didn't test that out or really know how to comment on that so hopefully someone here can answer that for you but that is a good question let's see do not or donut how would you ask how would you get the top of the second row even the top of the second row even let me go view it on thee so I think I know what you're referring to this is okay so right now you can see this blog content is pulling in some this category page is pulling in blog posts and there are various heights to each one of these cards and that's because there's various amount of excerpt lengths here so as you can see this one is much shorter than this one let me go in and show you just some a little tip here go into the blog settings and you see where it says show excerpts see some of these blog posts have a custom I should say this option here use posts excerpts is set to yes so in other words this is pulling from the custom post excerpt box inside of a post and so if I toggle that off let me just do that it's going to pull in the same amount for all of them because some of them I guess have an excerpt a custom excerpt added and some of them do not so if that's the case it will differ in height if you have this selected I could also you know change this excerpt linked here to make them all even this one is still not even and that's only because this title here is going into two lines as opposed to the others which is only one the only if you're very much of a stickler for getting it all even you can go and add some you know some custom CSS to give an or go to the design settings and maybe a custom CSS actually in the advanced and give your wherever it is your it might have to do it in custom CSS but you give them all the same height basically or a max height on the back end but yeah it's a good question hopefully that tip helped you out how would you get the okay good let's see why don't featured images work well Danis let's see featured images work well I'm think I'm gonna have to allow have you elaborate on how they're not working well and in what circumstance they're not working well they will not work for a category page template as Nemec content if that's what you're referring to because this category page will not be pulling from the dynamic content of a particular post that's the difference if we were building a post template or tiblet for your single blog posts they then you could use the featured image dynamic content to pull in that featured image there because it's from a specific post content not a category page got it looks like my sound is not set to mono or something it's only coming in one speaker I apologize for that and I'll make sure and get that fixed the next time I do a lot of stream I apologize I had a new set up for this go-around all right so so Danis is still commenting about featured images breaking stuff I guess and I that's stinks and I'm sorry hopefully we can get if it's a bug we'll get it fixed or reach out to support hopefully and if anyone else is experiencing that maybe you can chime in on the comments but all right let me go on sorry Danis wish I could help more Monique where did you place the image I may have missed something so mm don't know what image you're referring to so I'm assuming you're talking about these images on the blog post so let's go back this is my template layout editor and this is actually a blog post module now these actual images are being pulled from actual posts but they're just being filled here as kind of a mock setup for the template and these posts will change once we visit the actual cat Gouri page that has this template assigned to it so I didn't have to add any images here that it will automatically happen as soon as you click this post for current page I hope that answers the question an uncle social does make a good comment that category description would be a good dynamic field for Dibby to include in the future so yes good suggestion that would be helpful it would be you know cool to have a little description underneath this dynamic title here that will automatically display without you having to update it manually good point let's see ok good glad I got that answered for you Monique let's go ahead and jump into this template here and we're gonna add another few items just kind of show you what's possible on a category page template Oh before I do that I did have a comment from Patricia would you please also do one of the one to customize the checkout page there I am there will be a post coming out soon that will address you know how to use the post content module which is what you would do kind of working with your WooCommerce page templates there's some things you can do to the style that content specifically the content generated by a shortcode in the WooCommerce pages but there are some limitations to it but definitely you can build a template for those who commerce pages but there are some limitations obviously or maybe not obviously I'm telling you they're off all right so Rumi says I want to put a headline news scrolling in the headline okay I want to put a headline news scrolling okay I'm assuming you're talking about like a like a ticker or something like that news ticker that goes along the top of the page actually do a search on our blog there I know I did a post on how to do that in Divi it probably won't be what you're looking for it's just for simple stuff but if you're wanting to you know incorporate a an actual dynamic you know news ticker that pulls in actual post content it's probably something that's going to need a plug in or you know a developer to do that for you it's not really easily done with you know Divi at the moment okay good questions everyone let's jump back in again let's do that post slider let me add another excuse me row here this time I'm gonna add this one third is that the one I want yeah this one here it's like a one third to third column layout and on the left sighs I'm at a post slider now the reason why we can add a post slider to our category page template is because it also has just like our blog module it also has a post for current page option that's what we want for a category or archive page this tells it that it's going to pull in the actual posts for that current page all right so we're gonna select that and let's just keep the count to four you know something not too intense and then let's change let's not show our metadata here I want to make it nice and clean so let's go to elements excuse me where's my elements and then let's not show the post metadata and let's go to the design and just update these elements here there's a let's go to our title text and let's change the alignment to left actually let's just do it at the text level instead of doing it for each element so I'm gonna go back to my text and change the alignment to left the line that aligns everything here left the line so let's go to our title text now let's change it to our Ubuntu font and let's give it a line height of 1.3 m/s change our button style use custom styles for button and the main thing I want to do is just change the color of the background here and let's get rid of that border shrink up the text size and let's change the border to zero pixels alright alright that's looking pretty good it's good enough for now let's let's go ahead and add a Moxie amok Singh excuse me a matching box shadow that we had for our blog cards down there so let's do 70 pixels for the blur strength and negative 10 for the spread strength alright save it out and that takes care of our post slider and let's go ahead and save it out and let's save our changes here on the theme builder and let's view our post on the live site our category page and there's our post slider it is pulling in our four most recent blog posts that have the category business and then right below it it's pulling in the nine most recent blog posts that have the category business and we're gonna add I'm gonna show you how to offset those so you're not doubling up on content but right here on the right column here I'm gonna add another blog blog module with a full width layout to give us another unique look and also I'm going to show you some custom CSS we can add to give it a unique look that's not you know as easily done with our default blog module settings so let's go back to our template here custom body and I'm gonna add my blog module here to the right column again I wanted to choose posts for current page and this hopefully gives you a little bit of inspiration showing you that you can use multiple blog modules on a current page template and I'll show you how to do this but it's you can also offset the content so you're not doubling up you can basically pick up on one blog module where you left off on another all right oh actually you know what I'm gonna delete this one I apologize I'm gonna speed up the process and actually copy this one that I already currently have here so I'm just going to use my additional settings menu here I can also do right-click menu but then I'm gonna copy this module this blog module here and then I'm gonna paste it here alright as you can see it's a you know really big and it's not fitting as I want it to right now but it will after we do some customizations let's go ahead and edit this one and right now I definitely want to keep the post for current page and then I'm gonna change this one to three post count I only want three of the blog posts or big displayed let's change the excerpt length let's keep it 120 that's fine and then for now I'm gonna toggle off the show featured image so I'm going to take that off and you can see you know now I've got you know a pretty unique look for my post content my category post content here but let's go and get rid of show pagination as well so I'm gonna hide that but I also want to change the layout so I'm gonna go to the design tab and change the layout from grid to full width all right so that'll give me you know a more condensed look the look I'm looking for there all right and I can't remember there's a certain setting here you see it has a let's get rid of that let's see that's where it is okay the box shadow the box shadow is giving it the impression that it has a white background it's just simply a box shadow sorry I was confusing me for a moment so I just got rid of that box shadow so there you go nice and clean lay out here and then let's go ahead and check out the results on the live page so far save it out refresh all right so that's looking pretty good I can actually kind of shrink the spacing in between those two kind of make it line up a bit better and that's what I'm gonna do next so this is this is kind of the version without using custom CSS that you can accomplish with the Divi Builder for a category page template and let me before I go to that more advanced look I want to show you how to offset this content so as you can see this is the most recent the post slider here is pulling in the most recent four blog posts but by default it's going to show the most recent so right when of user visits the page is viewing the most recent blog post here well I could toggle through the second third and fourth here in the post slider but in order to you know make sure the visitor doesn't miss out on the second one I'm just going to start here and for this blog post module I'm going to offset it by one and that's going to pull in the second one and then the third and then the fourth here so right now we have first one second third fourth and then right below I'm gonna save that and then on this module we're starting back with the first one again so we need to set an offset for this blog post or this blog module we're gonna set it by 4 that way it will this start with the fifth most recent blog posts so now we have no duplicates here showing on our category page alright save that out refresh all right so there's our most recent there's our second there's our third there's our fourth most recent blog post and this blog module here is displaying all of our most recent blog posts with the category business but starts with five to offset these four on the top ok any questions hopefully that was clear okay let's see uncle social says I can't get my head around posts for current page and if there's some documentation for it then it's well hidden Google just keeps giving me links to this blog post yes okay so that is a good question you know as if you're asking you know for a real technical explanation as to what's going on in the back end like in the code and stuff probably won't be able to help you at this point but I definitely will take that suggestion and add it to our documentation in the future the only thing I can say is that if you can this is how I understand it which may or may not be correct I'm pretty sure I got you know some a good understanding of how it's working the the actual content when like if you were to just have a regular WordPress site right or a regular Divi site and you go to a category page in Divi that content is being generated on the back end on that category page template dynamically so like all things in WordPress or most things in WordPress on those templates the PHP templates is pulling in those category posts dynamically throughout the the back end of your site so and then it's going to you know spew it out onto the category page well what this is doing is saying whatever gets spewed out on that category page I want this template to use those posts and so that's what that does it says you know whatever is getting you know whatever is already dynamically being spewed out on that page I want to use that content here on this block module anyway it's the best I can do right now hopefully that helps but it's a good question alright so last thing here is the last tip for those of you may be wanting a different or to add some small what do they call it featured images yes on the left of each one of these little blog post snippets I'll show you how to do that basically it involves a little bit of custom CSS but I thought it'd be cool to show you how it's done so I'm going to first I'm gonna add a CSS class called left blog image so let's do that so I'm gonna open this blog module I'm going to add a excuse me a custom CSS class so I can target it with some external CSS called left blog image and save it out then I have two options I could actually go to the page the body layout settings and go to advanced and go to custom CSS and add my custom CSS there or I can add it within our actual template here inline which is what I'm going to do this also allows you to you know have it included on the exports and stuff like that so for now since it's just one little snippet I'm just going to add it to a code a code module right underneath my blog module there it doesn't matter where you add it on the template and then I'm gonna paste this CSS code and make sure and wrap it with style tags since I'm putting it in my HTML template alright and you can see that once I paste it in that code it kind of tightened up the spacing a bit here but it also did something to the positioning of those featured images and I'm gonna you can you know visit the blog post that went out today it's on our blog that goes along with this use case to get the snippet if you want it and then I'm gonna save it out and then I'm going to go back and I'm gonna if you remember I I I selected to hide the show featured image so I'm going to select up to show it now with my CSS in place and there you go so it looks like I still need to add some spacing there but for the most part because oh I know what I did I wanted to hide those I forgot to do that the the show read more button I don't like it underneath the image so I just selected to hide those show read more buttons and there you go nice clean layout for you let's go ahead and check out what it looks like in the front end here very cool let's go ahead and gonna inspect it here so I can show you what it looks like on mobile alright so there's a view for stupid type ad Pro so that's not really a good one here let's do I pad alright so this is what it would look like on the kind of a tablet here which looks nice and let's do a let's do the iPhone 7 or plus something like that so to go to a one-column nicely as you might expect it to alright let's check the questions before I shut down today Joey asked a question hello is the theme builder free uh it's been a depends on what you mean it's free when you are in elegant themes member so that part's not free but once you become an elegant themes member you have access to all our themes including our main one which is Divi and with that once you have the Divi theme you have access to the theme builder for free and all of those wonderful layouts freebies that we have available on the back end so if you don't or if you haven't checked it out yet there's a you know link in the blog posts excuse me in the video description to the product page to check out Divi so check that out Joey so the answer is yes with a membership yes you have access to the theme builder you just have to make sure and update it to the latest Divi version and it should be there ready for you to use and Uncas also says I'm cheating with custom CSS look I am sorry I sometimes can't help myself I have to add some custom CSS and I know a few of you out there do you appreciate me taking it to the next level all right so yeah good point though restrictions can really drive creativity sometimes yes all right let's make sure I'm not missing out on anything from Facebook or YouTube looking good everyone looks like I'm ready to wrap it up all right that's all I got for you this week thanks for tuning in everyone please don't forget to subscribe to our blog newsletter our YouTube channel and of course like us on Facebook that way you don't miss out on any future freebies or live streams that are coming your way in fact our next one will be Friday 3:00 p.m. Eastern that's the WP roundup so you want to check that out and hopefully we'll be back here next Tuesday with another Divi use-case live stream and thanks again we look forward to seeing you guys in our next video you

Channel: Elegant Themes

Views: 22,429

Keywords: category page template

Id: rd_kwJDkx2A

Length: 54min 49sec (3289 seconds)

Published: Tue Oct 29 2019