Build A Custom Blog Layout with Divi

so in this video we're gonna be creating what you see here we're looking at a custom blog layout and if you really love the tutorials we're bringing before we jump in I just asked please hit the subscribe button hit the bell if you really love us that way you get notifications as soon as the videos come out so you could be the first one to give it a thumbs up appreciate you and let's get into the tutorial alright so what we've got set up here is all of the pages or at least a few pages of the PR firm layout that elegant themes is put out inside of the Divi builder on the Divi theme you can see up here you know we've got the home page we've got an about page we've got a blog in the contact page and the header and the footer are all standard we'll jump into the back end just so I can show you what we're working with here you know we've got WordPress five point four point two and we'll go over into themes I'll show you the version of Divi as well so with Divi we're using four point four point eight which is the current release as of the time that I'm filming this video so June of 2020 and what we're gonna do is we're gonna create a custom layout to fit into this theme and I'm gonna show you and walk you through each one of those steps so again we're gonna go into the front end we've got the blog post page or the blog page that has just the generic layout it's got you know these posts that I put in here is just too generic posts they're just filler content and we're gonna create the blog look the blog layout so let's go into Divi first and we're gonna go into the theme builder and this is where all of our work is really gonna happen and the first thing we're gonna do here is add a new template and we're going to tie it into the blog page itself so this template and we're gonna click add custom body and build from our build custom body and what we're going to do is tie in the blog page layout from the PR theme so we're gonna use a premade layout here it's gonna load up the library and then from here we're gonna be able to search so we'll click over here in the search bar we're gonna type in PR and hit enter and that's going to give us the PR layout so we've got this blog page which is the the front end news page right it's got the the blog grid in it we're gonna load that up click on it and hit use this layout and it will import into this page so it's done here and it's going to reload with the layout inside of the visual builder so cool that's going it's loaded up we've got the title of the page here we've got the subscribe button you know we've got this custom slider what they did here is elegant themes put in a post slider and then over here it's just a post list so it's the blog settings and it's set up as a list if we had more posts we could do more with that we could offset this you know we could set this as the main one maybe it's got two here and then we could all set those and and that way there's not any repeating but you know for this example we've only got two posts or two blog posts that are set up so this will work just fine so this is the blog page right we're gonna hit command on the Mac and s so that we can save it I'm gonna hit save this layout and then we're gonna exit we're gonna hit save here and that's gonna save this blog layout right here and we'll load up the front-end so what you saw before was like the generic Divi blog page with our blog yeah blog grid page with nothing on it no nothing special just no layout to it it's what Divi has designed by default now when we click the blog page you see this layout so this whole layouts loaded and I'll jump into the backend to show you where we assign that the real key is under settings and reading this is where you assign your blog page so static you set up your home page and then whatever page you're using as the blog you want to set it as your post page that way when we come over here into the theme builder and we have sign a layout to the blog page that layouts going to be assigned with what WordPress sees as the blog layout so that covers you know the very first bit that gives us when we click on blog it gives us the layout but what happens when we click on the actual post you're gonna see just again a very generic layout nothing special just nothing unique about it right and that's okay because what we're gonna do here is add a new template and this one we're going to assign to all posts and we'll hit create template and once again we'll click add custom body and build you could build from a custom body or you could add from the library if you've already got one in this case I'm actually going to use the blog layout that we just imported it's kind of the base and then I'll tweak it so I'm just gonna copy from a template so then it takes what we just did for the blog grid and adds it into the custom body of the post and then we'll click on it to edit it and click the pencil it'll load up the front-end and we'll be able to edit this layout so we've got this layout for the blog posts loaded and this is exactly what we just saw a second ago right so what we're going to do is this whole section we're actually gonna remove it because this is just highlighting posts that we have so we're gonna delete that so now we've got this grid here and this is where our blog content is actually going to go but before we get to that let's get the header done correctly so we'll hit the row settings and see that this actually has two columns I don't want the button here so I'm gonna delete that second column that way this stretches all the way across and then what we're gonna do here is click on this text we've got this as the h1 tag and I really want this to be the title of the blog post so what I'm gonna do we've got the heading 1 right you can delete this and we're gonna click over on this dynamic content and we're gonna select the post archive title the key here is just going to drop it in its paragraph text so what we want to do it's hit this settings gear we're gonna edit the dynamic content and before we're gonna drop an h1 tag and then after we're gonna close an h1 tag now what that's gonna do is give you the control and the look of the heading one tag while also making sure that your search engine optimization is tight because you've got the h1 tag that Google is looking for right here at the top of the page and it's the page title so we'll hit the plus symbol we'll hit OK elegant themes is gonna pull this dynamic content in so you can see here your dynamic post title will be display here that's really cool that's good to know you know this right here and the next section is just the blog settings we do not need this what we want to do is delete that and then we're gonna add another module in and it's going to be this post content module so what we're doing is making sure first and foremost the settings and the spacing inside the row aren't there's no padding inside of there so I'll go under here and I eliminate the padding that way everything is gonna stretch to the end of the row and everything is gonna go to the top and that just makes it so that everything fits well within your in your space so everything's gonna take up the hundred percent of the grid and that's the way we want it you can play with the spacing if you have different needs different layout ideas that you want to do but you know generally speaking that's kind of what I do as a rule of thumb so the next thing I want to do is set all of the style for the post content that way you can just edit your blog posts inside a Guttenberg very easy just like using word and it's great for your clients because they don't have to come in to the front end they don't have to do any special styling that can do it all in the back end drop images put content together and that actually the limitations of that as far as the design and using Guttenberg is better for search engine optimization because it's gonna make them structure their blog posts a whole lot more effectively so we're gonna jump into this title I want to come over here and go to a1 and see the font so we're using hee though as heavy and that means I'm gonna take that same font and bring it down here and I'm gonna go down into headings and I'm going to change this to the same font of what we have up at the top and you can decide you know if you want to make it all uppercase if you want to keep it regular you know if we want to change the the font size we definitely probably want to maintain the difference on different screen sizes but we'll go ahead and let's say we'll do a 34 here and then we'll come up to h2 we'll select the same font and we'll go up to maybe 28 actually let's go to 30 and then we'll go to an h3 we'll change the font here as well that way all the headings match we're gonna take it up to a 28 so everything gets a little bit smaller as we go down and we'll go to h4 and just for the purposes of the video I'm just gonna stop right here you know this will be the last one I'm gonna do for the h4 will go up just a bit and that kind of works right I mean very rarely you're gonna have any more headings than that so that kind of covers this part then we're gonna go into under text and you can make this text whatever you want you know open sans is the default one we could do lotto if we wanted we'll change the font up just a bit we can go up to you know maybe like a 16 font looks great on our desktop I think I want to get some a little bit more space between these words or between the lines yeah not a fan of that so we're gonna leave this just like that kind of dig the color maybe go a little bit lighter than dark black right about there and then we're gonna change the link color as well we'll change the font over to the same thing that way those match and you know let's let's close out of here and we're gonna go into this section background because I know how elegant things works they drop a regular picture and then they put these these gradients over it so I'll actually want to match this color so I'm just going to copy this color and then we'll go back down here open up the design for the post content again go back into the link and we will paste that color here now fonts let's say we're going we go heavy with it so now the fonts really stick out they really stand up against the regular text you know there's an action that needs to be taken we'll go back in here back in the text and let's say the quotes you know just in case you're gonna do a quote I would match the color not well not the text color but the actual block border so that'll make that match as well and then you can continue to do really any other styling you know so if we needed to come down here and let's say unordered lists you could put them in the middle you can change you can do whatever it is that you need to do we can go up to 16 we can do line-height a little bit more we can indent the whole thing if we wanted we can copy the styles take them over here and actually paste the styles for the for the numbers as well and let's go down here and look at the intention make it so that they line up and that kind of works I mean that's something very very simple you know and if you wanted you could actually style all of your images as well so if we wanted to have the actual images in here we could put a border around it so if we wanted all of our images to have that softer look to them we could do that so you could add a border if you wanted you don't have to in this case we're not going to but you could add drop shadows you can even come over here and add custom CSS if you need it but in this case we're just going to leave it the way it was we're gonna take off that shadow because it kind of overlays here with the text and we're just gonna say this is this is good this is this is what we want so now we've got the dynamic title up here we've got the header content all the text is styled it got this down here one last thing I would change here just to show you a little bit more about dynamic content as the background so in this layout they've already got this image in place I'm going to rather than having just a regular image in here what I would do is delete the image and do the featured image back here if that way this looks a little bit different every single time you've got the the custom featured image that you're gonna put that's going to show up in the grid will also show up here and then I'll hit save will close out of this will go back into the front will hit refresh and you're gonna see a whole new layout it's gonna look very very different right so we've got our name here we've got the featured image we've got the text from the blog post and that's it you know if we go if we were to go into the blog again so this was this post we're gonna go and load up the other one that way you can see kind of what it looks like so we'll go under this one and when we load up that blog post you'll also see new title new background image new content so they all look a little bit different and that's it's that simple really to build to build a very basic blog to get a custom layout here and then the beauty of it is that whenever you go to edit your post all you got to do is hit edit post you don't have to mess with the layout and the design anymore because you've got dynamic content in those places so you know if we were if we were gonna go in here we could just add something new add an image below pick the media library select from an image that's here add this in and then we can just continue to go down we could add more more text so pull a little lorem ipsum text what we're gonna do here is add in a heading occlusion we've got our text and then let's duplicate this and we're going to bring it down and we're going to also duplicate this we'll bring it below the conclusion so now we've got a little bit more data here you've got the image we've got the intro we can hit update and then we can go back into the front view the post and it's that easy to make the updates you know we've now got the top the title we come down we've got our image here that has the radius around it we've got our conclusion that we just added looks great right very very easy very to do very easy to do very simple to manage and even better as a developer you can build the framework and allow your clients to update all their posts and new blog posts do whatever they need to do really really easily in a format that they're very used to so thanks again for being here for another video I really hope this topic was very useful for you if you love this video consider giving it a thumbs up and subscribe to the channel if you really truly love what we're doing turn that bell on get it get the notifications and we put out new videos because we're dropping stuff just like this pretty frequently so we appreciate you leave a comment below if you're using this type of stuff in your own projects that way we can go check it out so have an awesome week take care of yourself stay safe out there and we'll see you in the next video [Music] [Music]

Channel: Keegan Lanier

Views: 2,154

Keywords: design a blog post template with divi, divi tutorial, divi theme tutorial, divi builder tutorial, divi quick tip, can I blog with Divi, divi theme builder, divi blog post template, divi builder, how to make business website with wordpress and divi, divi blog post tutorial, divi 4.0 tutorial, divi theme, how to blog with Divi, Divi blog, blogging with divi, blogging with wordpress, build a custom blog layout with Divi, divi blog page layout

Id: XNhGTEeqVHg

Length: 17min 14sec (1034 seconds)

Published: Sat Jun 27 2020