How to Design a Recent Posts by Category Layout with Cool Hover Effects in Divi

well hey Divi nation welcome to a brand new Divi use-case livestream where each week we show you how to add new design and functionality to your Dibby websites and in this tutorial today we're gonna be showing you how you can design a recent posts by category lay out with some cool hover effects in Divi for for more information don't forget to check out the video description and let's go ahead and jump in and get started alright first thing I want to do is just say hi and make sure that I'm coming in loud and clear to you all if you can't give me a thumbs up let us know where you're from in the in the chat here alright hello Kara Sean hope I'm pronouncing that correctly welcome alright yes we got a thumbs up I appreciate that and let's go ahead and dive into this tutorial here once we get everybody saying hello here in the chat all right very good let's go ahead and check on Facebook here and make sure we're coming in loud and clear over there alright alright so hopefully we'll learn a lot today this is what you see on the screen here is going to be the final result of what we're gonna be building together and this is a basically a section a layout if you will of a recent posts by category and this will these are essentially blog modules that are displaying the most recent blog article associated with a certain category in this case on the left as you can see has that cool hover effect when I hover over the this article this is the most recent from the news category and this is the most recent from the business and most recent from the money category and the coaching category as well and as you can see the hover effect will you know the color will change to match the category tab here we'll show you how to make those as well this these posts are dynamic meaning they will automatically be pulled from your site dynamically but this little category tag isn't dynamic but that's okay because you already know what category you've set the module to so we'll go into how to do that as well and as you can see one of the cool hover effects of this design is that I'm hiding the excerpt initially but I will show it on hover as you can see there's the excerpt that shows up all right so let's go ahead and jump in and get started here we're gonna get started with a new page if if you are just joining us I do want to welcome you to this week's Divi use-case livestream and today I'm going to be showing you how you can add a or design a recent post by category layout in Divi and this will be great for your blog posts or your I guess your blog post template or for a blog page once this is created you can really add it to any template or layout or page that you would like alright so we'll get started here with a new page so I'm going to add new and then give my page a title just call it recent post by category then I'm gonna click to use the Divi builder excuse me alright so I'm going to click to build from scratch here and as you can see it's prompting me already to add my column I'm going to add a one column layout here and I think for the first thing I'm going to do is create my blog module and I'm going to let's see me let me take a step back here I think what I'm going to do I got ahead of myself here I was going to add the title but I'm gonna wait and do that later so I'm gonna back up here I'm gonna add a four column layout first I apologize so four column layout go ahead and add that and this is where we're gonna stick our blog modules here to create our blog most recent blog posts for each category so I'm gonna add over here on the Left column my first blog module you'll see my blog settings appear and so my post type here is gonna be by default set to posts which is what I want I'm gonna leave that there but here's what I'm going to do I'm gonna set the post count to one and just so you can meet see yes so post count is set to one and then also for the included categories I'm going to select a specific category in this one example I'm just going to set it to news so this is assuming that you've already included or have a blog post on your website that have been assigned a category to them if not this wouldn't work you have to because the categories that you have already in WordPress or Debbie will show up here in the blog module so if you don't see any categories you'll need to go and make some and assign them to posts for this work for this to work so your post count is one the included category is news so now it's if I scroll down here I'm gonna sit I'm gonna click not to use post excerpts because I don't I don't have any custom excerpts here and I'm going to limit the I don't have any post excerpts on my website and is kind of just a way to keep everything the same length so if you don't know what I'm talking about if you sometimes have a custom excerpt on your blog post and the display may vary with those that don't on the front end here to this feat of blog articles so what I'm gonna do here sorry about that is I'm gonna slip my excerpt length to 120 and then my offset let's see I'll just leave it at 0 the post offset is allows you to kind of skip over one or two or however many you want to skip over by default it will display your most recent so there's really nothing we need to do there after that we do need to hide a few things like elements so let's go ahead and hide our categories since we're already showing or gonna have a category tab there hide the categories let's go ahead and hide the excerpt as well but I do want to show it on hover and also on tablet so to do that I'm a change my hover option here and responsive tab I'm using my responsive tabs in hover tab to set those options here so for desktop it's going to be set to no I don't want to show my excerpt on hover I'm gonna set it to yes there will show up on hover and then for tablet as well I want to set it to yes and by default it will also show on phone so we don't have to do that there and let's go ahead and take out the pagination because we only have one blog post that we're going to show actually you could include the pagination if you'd like but for just this nice and clean featured layout I thought it best to not included all right so now we're going to just update the design a bit so I'm gonna jump over to the design tab let me get out of my tablet view here go back to desktop alright so actually I forgot I need to add a background so I'm just going to add a white background here and let's go ahead and add a background color on hover and I'm kind of anticipating what the color of my category tab is going to be right now I know it's going to be like a green so I'm just going to add that to my hover options now sorry on hover let's go ahead and add that new background color there you go and now let's jump over to the design tab let's go to my text options I think I'm going to keep it let's see go back to content right now my hover tab is selected sometimes if you leave those hover tabs open the hover State will stay there so you got to make sure and toggle out of that all right so the title font let's go ahead and update that a bit let's go make that a bold or a semi bold let's make it uppercase increase the size a bit let's add some letter spacing let's do one pixel and let's do a line height of 1.4 m's and a body text color let's go ahead and change that too let's do okay so the body text is going to be what shows up or sorry what targets the excerpt in the this blog card here so I'm just gonna make it white initially and the reason why I'm doing that is because even though I can't see it on the initial state because the remember the excerpt is going to show up on hover I do want to give it a white color because I want to change that color I'm sorry I want to I want that color to be white whenever you hover over the blog card or blog module so as and since the background is going to be green for this one it needs to be a white color all right let's do the the font metaphor wait let's just do a light make it nice and light and let's give it some letter spacing here of three nice contrast in typography there all right so now I'm gonna go to my height options it's a whole lot of options that we have on this blog module as you can see here but I'm gonna go to do the sizing here and I'm gonna give it a min min height and I want to give it a min height because really I want all of those blog cards to be the same height and so I'm gonna give it a minimum height of 450 pixels on desktop so that's going to make sure that it's going to be and you know have the same height they won't adjust with each module and then the padding let's go ahead and do padding here let's do 5% top and bottom and then for the left let's do 5 percent as well and let's go ahead and add a nice box shadow there and let's go ahead and add an animation an animation let's just go ahead and add a zoom animation as well so you can see initially on page load or whenever you scroll down to this layout on your page it will you know have a nice zoom in effect alright I think that's good for our first blog card things will speed up once I get to start copying these into the other columns but I'm just gonna check my questions here make sure that I'm not missing out on anything alright so welcome everyone still saying hi I see abner Felipe Peter welcome Henrik alright looks like everybody's just content with listening so I'll just go ahead and keep going along oh I do have a quick question here from Scioto I believe is how you pronounce it he's getting an error if you can help me when I'm importing some layout in Divi library so I'm getting this error this file should not be imported in this context okay this is a common problem so it would depend on what you're trying to import if it's a let's say if it's a layout like if it's a Divi layout you you can either upload it directly to the actual page with the Divi builder using the portability options of the Divi builder on the front end you can do it that way that's but if that doesn't work you'll have to import it directly into the Divi library first so one of those should work depending on how the the JSON file was exported for you if it's from a tutorial if it's from one of my tutorials online let's say it's for a layout design all you have to do is basically drag it into when you have the Divi builder open like this you can just drag in the JSON file directly and just import it but if it's you know a layout from like one of our cyber monday deals like or something like that you'll need to you know import it directly to the Divi Builder for sorry the Divi library first and then you can access it from the Divi Builder that way hope that answers the question oh yeah you did say it was a header so yeah that would be probably one of the either a header for the template if that's a template then you're going to need to use the Divi builder settings but portability options alright I'm gonna stop there because I know this but that should get you to where you're needing to go sorry for the confusion there but that's a good question which will be helpful whenever you wanting to download this layout here that we're building now it's actually available on the blog post that went out today on our blog elegant themes com4 slash blog and you'll see the most recent Divi Post there we'll have this download in it and you'll need to basically just drag it into a Divi page with the Divi Builder activated alright let's continue on so just to recap right now we are building a recent post by category layout with Divi and we have successfully added a blog module that is featuring the most recent news category article and now we need to add a little custom category tab that we're going to put right above it so let's go ahead and do that to do that we're going to use a text module so I'm going to go ahead and add a text module here and I don't really need all this text here all I need is the name of the category in this case is going to be news so and then I'm going to actually save it for now and then I'm gonna drag it above the blog module there and I'm gonna open it up again the text module settings that's going to hold my category tab here and then I'm going to add my background color and it's gonna be that same green that that were using for the hover state of the blog module there for this specific category and let's go ahead and make our go to our design tab let's change the text font weight to bold or semi bold actually it's do ultra bold and let's do the text text color to white and let's make our alignment centered there it is and the width I'm going to give it a set width so I'm go to my sizing options here and I'm gonna give it a set width of 120 pixels that way it leaves enough room for you know the name of a specific category if you have longer category name you'll need to adjust that but just trying to keep them all kind of the same width so it looks nice and then the margin let's do under spacing let's give it a custom margin of we're gonna do 80 pixels on the top and then I'm going to do negative 80 pixels oh that's right I got that wrong so the top excuse me is 80 pixels and then the bottom is negative 80 pixels all right so what that does is it brings it down to sit right over the blog module there and we can't really see it we can only see the text and that's because of the z-index needs to be updated it's kind of ordered behind the blog by default so let's go ahead and fix the padding oops alright so let's fix our padding let's do 10 pixels on the top and bottom so I'll just link them together there and let's go ahead and actually I want to set my visibility in z-index here to 1 and that's gonna make it sit right above that other module there now I can add an animation let's go to my design tab and let's do a fade in and we're gonna kind of delay that fade in a bit just so because if you remember we already have a zoom effect on our blog module so we want to delay it just right after that zoom is finished so in this case it's going to be basically 1 second or a thousand milliseconds so let's just add that to our animation delay alright and we're done with the category card let's go ahead and publish the page and let's just real quick check on the what that looks like on the live page so as you can see there it pops up and when I hover you can see that the oh it looks like I need to update my color of my text on hover so everything else looks good so basically what I'll need to do is go over to my text settings and you can see my text color is set to dark by default well I can just excuse me go to hover and then change that to light and that'll take care of that let's go ahead and refresh should be good to go now there we go alright so now to make things a little easier we're gonna copy and paste this set up these two modules into each one of these remaining columns and to do that I like to go over to my wireframe view mode and use the multi select so I'm gonna select both of these and I'm going to copy modules and let's just paste them in here to each column all right so these are on now all identical blog modules pulling in the most recent news category posts so I'll need to update that and also need to update the text modules which represent the category tab that we built so let's do the category the one in column two here let's go ahead and update the blog so you can see let's go ahead and update this let's change it to business so the most recent business category and then on hover let's go to our background on hover we're gonna replace that green color with a you know a red color here maybe like a more like a tomato type color and then let's go ahead and save that it's really simple let's go up to our text module to update our category tab right now it says news so remember we set it to business so let's go ahead and change that text content to business and update our background color to match the red and then let's save that out do the same for the blog module and text module in column three let's open our blog module let's change our category to money and let's update the hover background color to a purple so go to my background go to hover change the screens of purple or whatever color you want for your own design I'm gonna save that out go to my text module change the news to money change the background to that matching purple color and let's go ahead and do excuse me the four fourth column modules let's change this blog module to include coaching category and let's update the background color to like an orange all right and let's go ahead and save that let's go to our text module change the news to coaching change the background to match alright alright let's go ahead and toggle the desktop View mode to see what we what it looks like okay looking good so far hmm all right let's go ahead and change the row settings now and I'm gonna open my row settings and make sure you can see it bring it over here and I'm gonna give it a custom gutter with so I'm gonna set it to two so that decreases the margins between each of those modules and basically gutter with is the margin in between columns so and then I'm going to set the width to a 94% and the reason why I'm not setting it to a complete 100 is because on mobile I do want it to have a little bit of space on each side so I'm just setting it to 94 that'll give me about three percent margin on each side on mobile and then let's go and set the max width to 1400 pixels that will give me more room on larger desktops but you know still kind of keeping things a little bit more compact and then let's give it a height so let's do the reason why I'm giving it a set height here and you might need to play around with the height for your own design depending on how you have designed these cards and I'm giving the if you remember the block each of the blog modules a a height of a I believe 450 pixels and I'm giving the row a a height of 540 pixels which will allow me to have some padding above and below but also it will keep things from moving around on the page because if you remember I added a hover effect to each one of these blog modules so if I give it a set height to the row it'll keep that row from expanding because the row will by default expand if your content expands so by giving it a a height that is set or fixed it won't do that but I do want to make sure and set the tablet display to auto on tablet so make sure really all it takes is to click on the tab just to make sure in an auto will automatically be filled by default but it is you need to make sure and click on the tab alright let's go back let's take out the padding above and below just to do that I'm just going to set it to zero all right now the last thing I think it's the last thing let's go ahead and check out what we have so far might help to save it first okay all right so let's say about our page and refresh all right so there's our design all right so it's looking like I have a really long title here that's kind of messing me up for having them all the same height so if that's the case you might need to increase the min height of your blog posts right now it's set to 450 which really isn't enough for this really long title so you can do one of two things you can shrink up the size of your your blog module title so it doesn't take up too much vertical space and that's basically what I'll do let me just update this one just because it's one of those things that will bother me if I don't fix it let's go ahead to text or the title text here and you'll see that it's set to 24 pixels I'm just going to cut that down let's just do 22 probably will work and then I'm just going to extend that title text size to all of the blogs on this page at once all right so let's go ahead and check and see if that fixed it because I want them all to be the same height and there you go all right so now and you can see on hover they will show the excerpts so that's nice but I do want to add one more hover effect and to do that I'm going to add it to the column and the reason why I'm going to add the hover effect to the column is because I want it applied to not only the blog module in each column but also the the text module that is that we use to create our category tag so both of these I want to add the hover effect to simultaneously in order to do that I just need to go to that parent element which is the column to add that hover effect so to do that I'm gonna go to the row and you can see my four columns here I'm gonna update the first column settings and I'm going to give it a transform hover effect so this is my under my transform options what I want to do is basically scale it up 15% so I'm going to add one hundred and fifteen percent on oh wait I mean I just want it on hover so I need to make sure and select my hover tab there and then I'm gonna change my transform scale to 115 percent both on the y and x axis and as you can see it enlarges on hover and it will enlarge the type the the the blog module and the the category tag as well alright and because on mobile on tablet I don't want really the anything expanding or anything when I click on it I can just go to my custom CSS and go to my main element and if you don't know this already you can you have responsive tabs for the custom CSS elements here and just for the main element that's going to target the column itself I'm gonna under my tablet display I'm gonna just put in this transform none important basically that's going to override any transform options I have in Divi and make sure to disable those on tablet and phone it will inherit it on phone as well but if not you'll definitely want to make sure and copy it over to the phone it looks like it it will so you're good alright so I'm gonna go back to desktop save it out and I want to do the same thing for each of my columns so I'm going to transform on hover let's go ahead and increase it to 15% and then for my custom CSS so for the main element on tablet only let's go ahead and add the transform none I want to do that two more times oops so hover okay and one more let's go ahead and add the transform option our hover effect to the fourth column here and disable it on tablet okay alright looking good so far and last thing is basically a design aspect I'm just going to go to my section settings and let's go ahead and add a background gradient so I'm just going to go to my section here add a background gradient let's go ahead and do the left color this purple and then the right color this red the same red we used in our category the business category if I remember right and then let's change the gradient direction to 270 degrees all right and let's update the padding let's do 10 V W which is basically 10% of the viewport width so on the top and the bottom gives me some nice padding and spacing there alright now I'm gonna stop here but you can of course go ahead and add a title above it like you know from our blog or recent posts or something like that to kind of complete the design but everything's here let's go ahead and check the final result so there's my initial animation and then I have my my hover effects in place nice and large or scale and then the change of color and then also the showing of the excerpt so and this is dynamically pulling in the recent post by category let's jump in and let's view the questions before I close out today alright so I have a I believe is a request or suggestion to please add template for header headers and menu in fixed transparent menu with revolution slider okay well I appreciate the the suggestion there we'll try to get some more templates for headers and menus I know we have some more tutorials in the works that will allow you to do some cool stuff with headers and stuff like that so be looking forward to that excellent any last questions before we in today's livestream I think we're good once again let's just do that final result here all right all right that's all I got for you this week thanks for tuning in everyone please be sure to subscribe to our block let me start over please be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook that way you don't miss out on any future freebies we'll be throwing your way and also any live streams that we'll be doing our next one should be done on Tuesday next week so be looking forward to that and our next live stream will be this Friday with the WP roundup so be looking forward to that at 3 p.m. Eastern on Friday and you can also check the video description for more information on how you can contribute your own expertise to our elegant themes blog so check that out and if you don't have Debbie yet please take advantage of our 25% off memberships cyber monday deal check the link in the video description as well for that thanks again and I will see you next time you

Channel: Elegant Themes

Views: 6,531

Keywords:

Id: nfDtsQjiHYM

Length: 42min 16sec (2536 seconds)

Published: Tue Dec 17 2019