How to Design a Blog Post Template with Divi’s Theme Builder

hello divination and welcome in today's tutorial I'm gonna show you how to design a blog post template with Divi theme builder this is the final result we're aiming to achieve but before we get started I also like to say if you don't want to go through the whole process of designing this whole template it's also available for download in the post which I'll link to in the show notes below so you can go ahead download it and just import it on your website and you'll be up and running in a few seconds so let's head over and start designing the blog post templates so the first thing we need to do is to create a brand new template so I'm going to come over here to Divi and then hover over this area click on the Builder and the template we need to build is going to be a brand new one so we're gonna click on this plus button and this template is going to be for all the poles so I'm gonna select all posts create template next we're going to create a custom body area so I'm going to click here on add custom body build custom body and we are going to build this from scratch so the option I'm going to go with here is the very first options on the kikiyaon build from scratch you can add a single column now before we add any modules in here let's customize our section so I'm gonna come over here click on this gear icon to enter my section settings click on background and we're going to start by adding a gradient so I'm gonna click here on the second tab click this plus button and I'm gonna add my first color now the color I'm going to add here can also be found in the post which I'll link to in the show notes below so if you want if you want to achieve the exact same design head over to the comments box and follow that link alright so now I'm gonna add my second color paste it in here and then we need to change our gradient direction so I'm gonna scroll down here a little bit make sure that the gradient type is set to linear and then here on the direction we're gonna set this to 130 and the start position is going to be 25% so now that's we've added our gradient the next stage is to add an image so I'm gonna come over here add background image now I have quite a few images here so you just need to go with the image that you first to use for the background so I want to go with this very first image here upload an image so now you can see my image has been added in the background but we're not done yet because there's a few things that we need to do here so over here I'm gonna scroll all the way down and here we need to use parallax so I'm gonna say yes to use parallax effect and I'm also gonna add some padding both to the top and the bottom so I'm gonna come over here to design spacing and over here just gonna add 7vw to the top and if you want to add the same value just click on this chain icon and now my value has been added to both at the top and the bottom so pretty much that's all we need to do for now so I want to save this and then over here now we need to start adding our modules so I'm gonna click here on this plus button and the module that we're gonna add is a text module so I'm gonna search for it and select it right so now what we need to do is to use some dynamic content so I'm gonna come over here on this little plus button so what I need to add here is the posts or archive title so I'm gonna select it and now it's been added on so now let's go ahead and stylize this so I'm gonna click on this gear icon here so here where it says before you can actually add this HTML code and you can also add it on after so what happens here is this will be made into a heading 1 so that's what you need to do before and after so now if you look at this you can see that the title has gone slightly bigger now we need to go and design this further so what we gonna do is gonna come over here to the design tab and we're going to go in and set on text fonts so I come over here I'm gonna change this to Roboto I'm going to search for the font select it next I'm gonna come over here on the size in fact the size is okay at 16 and the line height means to be set to about 1.8 which is the default here the text alignment needs to be centered so I'm gonna scroll down here make sure it's centered and let's head over now to the heading font so we're gonna come over here click on this brush tool and now that takes me straight to my heading text so again this needs to be set to Roberto and now since I've used it before it's gonna be here now so I'm gonna select it and then we also going to change the font weight so here from gonna change it from regular to bold and then the size needs to be 60 pixels so I'm gonna come over here and enter my size but it's always a good idea that when you add your sizes also go into the other devices and make sure that everything looks great on there so I'm gonna click on this little icon here click on tablet and I'm gonna change this from 60 to 40 and on the phone I'm also going to change this from 40 to 32 so now as you can see it looks much better on the three screen sizes next I'm gonna come over here to my line height set this to 1.2 so now there's a bit of space now between the lines so if you take a look here as well in fact this is all showing in one line but it may be that you'll have a blog post which will have a longer sentence as a title but that'll give you did enough space here because of the light height that we've just added when you take a look at this color here you can see it's not really great on this duck background so what you can do is just change this to white so now that is much better alright so what we need to do next is to add another section so I'm gonna come over here click this plus button this is gonna be a regular section and it's the column structure I need is this one right here so I'm gonna go ahead and select this two-thirds one-third now in this bigger part I'm gonna add an image image someone I search for my image module here select it now we are going to add a featured image here so in order for you to do that what you want to do is to delete this and then now you're left with this little icon and this allows us to add dynamic content so I'm gonna click on it and then I'm gonna click on featured image now let's design this image module so I'm gonna come over here to the design tab first of all the alignment we're gonna Center this next we're going to add a margin to this so I'm gonna come over here to spacing and the margin I'm gonna add is going to be on the top so I'm gonna click here add my margin and it's gonna be minus 9 VW so now you can see that this featured image is going to be in this space here where this main header area is so we also need to make some adjustments to our tablet view so I want to come over here click on this little icon and I'm gonna go in and and 0vw for my tablet view and that should be the same for the phone as well so I'm gonna come back over here to my desktop now next I'm gonna add some rounded corners so to do that I'm gonna come over here to border and I'm just gonna add eight to all the sides now it's time to add a box shadow scroll down here go to box shadow and the option I'm gonna go with is this one right here so I'm going to select it and now I can add my vertical position and my brother strength so for my vertical position here and by default it's set to twelve I'm gonna set it to 16 and then for my blur strength I'm gonna set this to 96 and then for my box spread strength I'm gonna set this to minus 24 okay so that's looking much better now so pretty much that's what we need to do I think this is looking much better now but of course you're gonna see it in action once you see a featured image add it on to it when we open a new post all right so I'm gonna save this and then over here now on the right I'm gonna click on this plus button and add a blurb module so I'm gonna select it now as we did before we also going to use dynamic content for this so let's start here with the title so over here on the title I'm gonna click on this gear icon and this time we need the post author so I'm gonna go ahead and select it and now let's go in and add a bit of information here before the actual content so you can see here it's pulled in the dynamic content of John Doe so before it we want to say written by so now you can see it's a it's written by John Doe so it's really cool next we're gonna come over here and you need to make sure that the name is linked so I'm gonna click here on yes and this is going to link to the author archive so again this is very important so you just want to make sure that when someone clicks the name it takes them to all the posts by that person so we're gonna save this now next we're gonna come over here now to the body to the body content so here again we're gonna use some dynamic content so I'm gonna click here on this little icon here and this time what we need to add is the author bio so I'm gonna come over here choose author bio now for the image we can also use dynamic content so let's go ahead and do that so I'm going to click here on image and icon delete this and then click on this little icon and this time we only we need to add the post the host author profile pictures I'm gonna go ahead and select it now let's go in and design this blurb so I'm going to click here on the design tab so the first thing I'm going to do is to come over here to image an icon and for the icon placements I am going to place this on the left and then for the rounded corners I'm gonna add 50% and now you can see it's has it's now turned into a circle which is great now the next thing we need to do now is just to make sure that our font here is consistent so let's head over here to our text right so the next stage is to change our title font so I'm gonna come over here click on this brush tool and not this is gonna take me straight to my title font so I'm gonna click here on default changes to Roboto next I'm gonna also gonna make it bold so it really stands out so I'm gonna choose bold and then for my line height I'm gonna set this to 1.3 now for the body we're gonna change this to later so I'm gonna click on this brush tool again and then I'm gonna change this from defaults to leto and then for my line Heights I'm gonna set this to 1.4 and for my image width I'm gonna set it to 15 so I'm gonna come over here and then here for my image width I'm gonna set this to 50 all right so pretty much we're done here with its design I'm gonna save this and the next stage is to add another blurb module just under it so I'm gonna search for it select it and then on the title here we need to add in another dynamic content so I'm going to click here and this time what we need to do is to pull in the post categories so I'm just gonna come over here and look for my post categories so this time we are not going to use the image so we're gonna come over here to image an icon and so I'm gonna say use icon set that to yes now let's choose the icon that we're gonna go with so I'm gonna come over here scroll down until I find the icon that I want to use so the one I'm gonna go with is this one right here so I'm gonna go ahead and select it now we also have this text this dummy text that we have here we don't need that so I'm gonna come over here and get rid of it so I'm just going to delete that and then now the next stage is to just eyes this so I'm gonna come over here to design so the first thing I'm going to do is to start with my image and icon so here we need to change the image icon color so I'm going to click on this eye dropper tool and just place the scholar here with mine and as I mentioned before if you want to use the exact same colors that I'm using throughout this tutorial I will leave a link to the post in the show notes below alright so here our icon placement ominous changes to left and then for the icon font size I'm gonna set this to yes because this allows us to customize the size of the actual icon so here we're going to set the size to 20 pixels so we want you to nice and small now let's go to the title font so I'm just gonna click here so it takes me directly to the title font so we're gonna change this to Roboto and this time for the font weight we're gonna set this to medium and we're also going to change the text color so I'm just gonna click here on this eyedropper tool and paste my color in here now let's able to head over to the size we're gonna set this to 16 pixels and then the title line height I'm gonna set this to 20 next I want to add a bit of padding to the left so I'm gonna come over here to spacing add my padding so now you can see everything is all lined up correctly so pretty much that's all we need to do here or does design is complete I'm gonna save this next I'm gonna duplicate this because I need to add a comment count but we also going to do that as dynamic content so now we just need to update the content here so I'm gonna go into the settings by clicking on this little gear icon and then for a for the dynamic content I'm just gonna come over here to the title delete this and then click this one more time and all the way down here there's post comment count so I'm gonna go ahead and select that and now after this is where we just gonna add comments and then we also need to update the icon so I'm going to come over here to image an icon and then I'm just going to look for an icon which is close to comments so I'm gonna go with this one right here I'll select it so you can now see here that it's updated so every time people comment on your post this will be updated automatically or dynamically rather now we can also add a post publish date so let's go ahead and add that I'm going to save this come back over here I'm going to duplicate this click on the gear icon and delete what we have here so what we need to do is to again click on this dynamic content choose post publish date and then save now we can go to our image an icon and choose an icon that works with that so I think the one that works with that is a calendar so I'm gonna go ahead and just choose this one right here so now that we've added all the elements that we need here for our template the next stage now is to add a post template so I'm going to come over here save this and then we're gonna add a new row and this is gonna have a single column just like that and what we need to add here is the post content go ahead and select it so now I'm gonna go into my settings here and make a few adjustments so first of all I'm gonna hum over here to design and we also want to add some rounded corners to this image so I'm going to click here on image and set this to 8 pixels now when it comes to these titles you can also go in and customize your titles and make them look the way you want so I'm going to just head over here to my heading text and then I'm just gonna remove all caps and change this to Roboto I'm gonna do the same thing for posts for the heading 2 and heading 3 so over here you can pretty much set up everything that you need to set up in regards to you and test text so I'm gonna come over here back to the text so notice if I come over here to the blog quote I can actually customize this change the color of that I can also make it italic if I need to change the size so as you can see you can go in here and really customize this and make it look the way you want and also let's say you want to change your links all you have to do is to click here on this little icon and this will change all your links to anything that has an hyperlink on your text next I'm gonna come all the way down here to the bottom and I will also add another row single column and this time we're gonna add post navigation so I'm just gonna search for a post navigation select it and then what I want to do here is on the previous link I'm just gonna add this text here so what it does is it just says previous and gives you the title so we also need to do the same on the next so I'm gonna come over here and add next now let's customize the font so I'm gonna come over here to design and links font is gonna be Roboto so I'm gonna come over here change this to auto weight it's going to be bold and I'm also going to change the color paste it in here next we're going to add a related post section so what we're going to do here is going to create a new section so I'm gonna click on regular single column and let's start by adding a text module when I select it now in here we're just gonna add some text just to give this context so in here we're just gonna add some text and this text is important because it just makes people know what is happening next year so the text will just say you may also like now let's start out this text by coming over here to the design tab and we need to make sure that it's on heading tube and then we're gonna choose Roboto as our font and the text size here is gonna be 48 and then save so now the next stage is to add our blog module by clicking here on this plus button I want to search for blog select it right so let's customize this so first of all I'm gonna come to my post post count and set this to 3 and then over here on included categories I'm going to choose current category next for the excerpt length I'm gonna set this to 120 and then I also need to come over here to elements and on the elements here we need to remove a few things so first of all show author I'm gonna say no show categories no show pagination no now let's head over here to the design tab so the first thing we want to do here is to make sure the layout is set to grid as currently it's set to full width so this will show this layout in a much better layout so as you can see here this looks much much better alright so here you can see here that we have some posts here this is because I first created posts before I started creating this template so in your case you may not see any pulse showing here but it can always be added in at a later stage alright so what we need to do now is to just customize and just stylize this and make it look great so I'm gonna start with the title fonts on the click here on default set this to Roboto and we also need to add the size so here it's set to 18 we need to bring it down to about 14 then the line height it's gonna be 1.3 and then moving on the body font needs to be set to later so I'm gonna come over here and change this to Leto and the same applies with the meta font as well so I'm gonna come over here changes from default to Leto and for the major text color I'm just gonna paste my color in here now as I mentioned before if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link to the post in the show notes below now let's head over to the grid layout so in the grid layout I need to add some rounded corners so I'm gonna scroll all the way down here in fact sir to make things easier for me I can just search for it here so here's the grid layout so on the rounded corners here we're gonna set this to 20 next over here on the border width we're gonna set this to zero now let's head over to the box shadows so I'm just gonna remove this and then scroll all the way down here to my border now for my border shadow the option I'm gonna go with is very first one here so I'm gonna select this so now I can see this has separated this from the background now all we need to do is to add my vertical position and I'm going to change this to 16 the blur strength I'm gonna set this to 96 and the spread strength is going to be minus 24 right so pretty much we're done here this is looking really nice I'm gonna save this next we also need to add the comments section so I'm gonna click here on this plus button to add a new row single column and here is my comments module so I'm going to select it so first things first I'm gonna come over here to my background and add a background color by clicking on this plus button and just adding my color like that now we can go into the fields colors by coming over here to the design so here we're gonna start with adding the fields background color setting it to white the focus color needs to be white as well and then over here on the fields text color I'm gonna set this really dark gray now moving on we also need to add the fields margin so I'm going to come over here and the module I need to add is going to be on the bottom so I'm just gonna add my margin here and then for the padding I'm gonna set this to 18 to the top and 8 into the bottom fields font needs to be Leto just to have some consistency here with our design and then I'm also gonna add my size which is gonna be about 16 pixels and the line height is gonna be 1.4 now let's head over to the image rounded corners so I'll choose image and for the image rounded corners I'm gonna set this to 60 now let's go to title font so I'm gonna come over here to title text and then I'm just gonna make sure that this is also say said to Roboto and the science is 26 now over here on the line height we're gonna set this to 1.3 now moving on the meta text we also need to customize this by changing the default font here to leto and then I'm gonna come over here to my comment text and I want to change the comment text color to this really dark grey and we also need to add some padding to this I'm gonna come over here to spacing and we're just gonna add a 5% all around because the reason why he's as you can see here my text here and all the content that's going to come in this comments box is gonna be way close to the edges so let's this is the way to fix it so now add my 5% here add it all around like that so this is gonna have a lot of breathing space finally let's work on the button so I'm just gonna come over here and click on button use custom styles for button so the first thing we need to do is to head over to the size I'm gonna set this to 14 pixels for a button bottom width I want to set this to 0 or the radius I wanna set this to 4 now over here on the letter spacing I'm gonna set this to 5 pixels and the font needs to be Roboto so many changes from default and choose Roberto set it to bold uppercase and then we also can add some padding to the top in the bottom so pretty much that's all we need to do here I'm gonna save I'm gonna head over back to the top here because we need to add a header divider so I'm gonna click here on this gear icon and I'm gonna come over here to design dividers so this divider needs to be on the bottom so I'm gonna go ahead and choose that and then I'm gonna come over here to the style so the style that we're gonna go with is is this one so I'm going to select it next I'm gonna come over here and I'm gonna flip it horizontal on the divider height I'm gonna set this to 10 V W and on the divider color I'm gonna set this to white so pretty much we've added all the content that we need and this is our complete design so we're gonna save here and we also need to save this page and then on the top right here we're just going to click here to exit and don't forget to make sure that you save here on the Divi builder now let's head over to posts and take a look at any posts that we have here all right so now I'm gonna come over here to one of my blog posts click on View and we're gonna take a look and see if the template has been applied and surely it has and this looks really nice so as you can see here this design that we've added here on the header area is also working well and if I scroll down here you can see my images here have the rounded corners which I added and on the all the way right here at the bottom we also have the related posts which is really cool and we also have the comment section so there you have it thank you all for watching if you like this video please give me a thumbs up and do full awesome on social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 76,981

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme, blog post template

Id: hSDtlO4OLP8

Length: 22min 52sec (1372 seconds)

Published: Mon Nov 04 2019