5 Tips for Organizing Blog Page Content in Divi

hello divination and welcome in today's video I'm going to share five tips on how to organize your blog content so without wasting a lot of time let's dive in and let's get started alright so for this tutorial to work what you need to do is to first add some posts because if you don't add some post then we won't be able to display the information that we need so as you can see I've added four posts here so I've just added an image and in fact let me show you so all I've done here is I've gone in and I've just added some dummy text and also added a featured image so this is what I've done to all of them alright so once that's done the next stage now is to to add the template so this template can be found in the link in the video description below yeah this is the theme builder pack which is absolutely free so you can go ahead and use that so I'm going to come over here now to Divi and click on theme builder so this is where we need to add our first template so I'm gonna go now and click here on portability click import and then I'm just going to drag my template in here I'm gonna click import theme builder and in fact I'll just leave that as it is and then click import team builder templates so as you can see here it said to all categories but ideally what we need here is to set this to blog to blogs so and come over here and set this to blog and then click on save so now let's go in and customize this I'm gonna click on this pencil icon so this now is going to take us into our builder so the first layout we're going to build here is a two column layout so by default it comes in as a three column layout and you can see here so to change our column layouts all you have to do is to click here on the column structure and then I'm gonna go with this layout so now you can see over here we have a two column layout and we still have this column here to add more information to now I'm gonna go into my row settings and go into my first column so in here I'm going to click advanced and on the main element in fact to go to custom CSS and on the main element you can add this CSS code so this now makes this 100% so now all we need is to hide the column on the right remembering our column structure had that extra column so let's go back over here and now we can go into settings of this column and then click advanced visibility and then we going to disable this on all views so phone desktop and tablet all right so we're gonna save that save it one more time and this is our column structure all right so we're gonna save this now so now when we go on our blog page you can see we have a two column layout right so in this example I'm going to show you how to make your pulse sticky so what you need to do is to go into edit into any one of your posts and over here you can see we have stick to the top of the blog so let's activate this and click update and let's treat to one more now take a look at the featured image here this is post one and let's also do it to hello world so click Edit and do the same thing make it sticky click on update great so now if we go to our blog page you'll notice that those two articles are going to be the ones at the top and there we go so post one in hello world now become sticky and they're gonna stay at the top so whatever you add will just be affecting the posts here on the bottom but these two will always be on the top alright so moving on in the next example and this is number three I'm going to show you how to use post offsets to organize blog content in separate sections so I'm gonna click here on custom body so that's going to take us back into our builder and once the bill that loads what we need to do is to add another regular section so I'm gonna click on this plus button click on regular and I'm gonna add a single column so what I want to do now is I'm going to copy the blog module here and paste it in place so let's go in and make some updates to this so I'm gonna pick here on this gear icon so on the post count I'm gonna add 3 because what we need to do is to just highlight three articles next I am going to go to elements and here we need to remove quite a lot of stuff so show read button so I'm gonna say no to that no categories no comment count no except no pagination just the title and the exits here now it's time to add offset number so I'm gonna come over here to post offset so this needs to be set to 3 because this is going to show like the three latest and then the rest are going to continue here on the bottom alright so you can see here our featured section here is taking shape so what we need to do next to make this really stand out is to add a gradient color so I'm gonna click here on background click on the second tab and let's add our colors so over here on the second color I'm just gonna add ok let's go with that writing in finally what you can do is to play around with gradient direction and to be honest I think that looks ok so I'm gonna save and now you can see we've highlighted our main blog posts and then on the bottom here you know it just continues as normal so let's save this template alright so moving on the next tip is to add a full width slider here at the top so I'm gonna click here on this plus button click on full width and then I'm going to choose full width post slider so over here on posts for current page we're gonna say yes and for our post count let's add 3 cuz it's don't have too many on there so 3 is just enough now we can go in and play around with our titles and now on our font weight so I'm gonna click here on design and I want to start here with the title so I'm gonna go to title text I want to change this to leto set it to bold and for the text size on the set that's 240 now let's go to the body text size so here on the body text size we're gonna set this to 16 let's go to the button text size so Jolla for us to go in and customize that we need to activate use custom styles for button and we're gonna set our size here to 14 and to be also going to set our button text color so for our button text color I'm gonna click here on this eyedropper tool and paste my color in here now 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 next I'm going to add my color here and this color needs to be white I'm just gonna drag this all the way up to white and we don't need a border for this so I'm gonna remove the border and for the button font weight we're gonna set this to bold and the font needs to be Leto as well so that it matches our design so let's remove the border width here okay there we go so that looks much better now so for the border radius I think I'm going to set this to about three and for the style I'm gonna make it all caps and then we're gonna save so you can see now we've just added our slider and what you can do is you can go in here and disable the ones that you don't want to show so let's go to visibility here and let's just disable this top one that we've just done hit save and I'm gonna save this one more time and when i refresh this you can see now that we have our full width slider right so moving on let's add another layout so what we're gonna do here is we're just gonna add another row so I'm gonna click on this plus button and the column structure is going to be two equal columns and what we're going to do here is to copy this blog module here so I'm gonna right click copy module and then I'm gonna come all the way down here and paste it now let's go into the settings so in here on the post counter he's gonna say one and then over here on the elements we need to disable the pagination so once we're done here we're gonna save and then we just going to duplicate this one here as well now for this we need to go into the settings and for the post offset we're gonna set this to one so we're gonna save here now we can either move these over here to the left in fact let's do that display design so I'm gonna move this one as well I get over here to the left so what we need to do now is to copy this and paste it over here to the right and then make some changes to it so I'm gonna go into the settings and this time we are going to disable the image so I'm gonna come over here to elements and show featured image we just gonna get rid of that and then for the post offset we're gonna set this to 1 and also here on the accepts we're gonna say we're gonna remove the accepts so just gonna have the title and just this description here so now in the elements away shades show accepts you're gonna say no to that no comment count and we also don't want to show the pagination so let's save this and let's duplicate this a few times now let's go into the second one here and for our offset we're gonna set this to true save that and then for this one here we're gonna sit offset to 3 and save and then finally if you want you can go in and you know change the background colors so in this case I'm just gonna leave it as it is but this is another way you can lay out all your blog posts alright so in this last example I'm going to show you how to add your recent posts by category so I'm gonna click here on this plus button to add a new column so I'm gonna go with one single column we're gonna add our blog and now let's make some changes to this so over here where it says posts full current page make sure it's set to no and over here on the post types notice that we have quite a lot we can add in here so make sure it's set to posts and then for the post count we're gonna set this to 3 and then this is where now you can choose your category so right now I have uncatted so that's the only category I have but I can choose whatever categories that I have if I've set them ahead of time so there you have it thank you all for watching if you like this video please give me a thumbs up and don't forget to leave your questions in the comments box below and we'll do our best to respond to them until next time thanks for watching I'll see you in the next video

Channel: Elegant Themes

Views: 19,849

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes, organize blog page

Id: hZqcEMHU7D8

Length: 10min 59sec (659 seconds)

Published: Sat Mar 28 2020