How to Create a Seamless Hover Grid with Divi

[Music] so [Music] so so [Music] [Music] [Music] [Music] hey tv nation thank you for joining us in this live stream today we're going to show you how to create a seamless hover grid with divi so if you're not elegant themed zombie make sure that you check out tv i've mentioned it in one of the links in the description below and without any further ado let's get to it all right i want to say hi to everyone on youtube this time around we're only streaming to youtube because i have some issues connecting to a live stream on facebook so i hope you guys are joining there and i'll be keeping an eye on the comments if you guys have any questions make sure to ask um and i'll be keeping an eye on those so let's start off by taking a quick look at the outcome of this tutorial so over here we have a preview on desktop and let me just hover one of these items as soon as i hover one of these items a background image shows up some additional text shows up and the styles of the button change alongside the styles of the text module in the top left corner so this goes for each one of these items in the grid so you can definitely see that it's a grid um containing four columns we we are using a row for this and it just gives this kind of like seamless effect now on smaller screen sizes we have a similar outcome um but it'll it'll respond to touch instead so obviously over here um because i'm viewing it on my laptop it shows up when i hover it but you know technically when someone's visiting on smaller screen sizes through their phone they're gonna have to touch it for it to appear which also gives like this this intuitive design really cool really clean and yeah we're gonna recreate this using divi um so yeah let's start off i've created a new page over here dedicated to this tutorial and i'm going to enable the visual builder at the top all right so as soon as you create a new page you get three options we're gonna build from scratch and we're building this layout with one section so this entire design is made out of one section one row four columns um so we already have a section here by default when we enable the visual builder on a new page and we're going to open these section settings before adding any other elements i'm going to use a white background color for my section and then i'm going to add a new row so obviously as you can notice in the preview we need four equally sized columns so that's the column structure we're going for and you can also notice that this is kind of like full width until a certain point now if i zoom out at a certain point it stops so you can decide for yourself if you want it to always be like 100 in this case that could be really convenient too so we're going to go to the sizing settings and we're going to make sure that it always sticks up the entire width of the container by adding 100 to the width and 100 to the max width over here and we're also going to remove all gutter width by selecting one over here so we're naming the use custom gutter with option and we're using one for the gutter width so this will just allow the row to go uh go ahead and touch the left and right side of the section container we're also going to remove the top and bottom padding of our row so by default we have a value for the top and the bottom row padding and we want that to be gone because of the fact that we'll be using column borders that you can notice over here and to be able to allow the top and the bottom border to touch these column borders we'll need to remove the top and bottom padding and then we'll also add the top and bottom border which is going to be like one pixel for each one of these and i'm just going to select that color code it's this kind of subtle gray color you can use any color you want you can obviously style this however you want uh we're first going to like focus on having all of the elements in place we're going to create the first column and stuff and then we'll focus on functionality so how we're going to make sure that we have the kind of outcome that was shown over here so we're creating one column after this and then reusing it for the other three and then focusing on functionality on hover all right next up we're going to open the column settings so as i mentioned before we're going to focus on the first column and then afterwards we're going to reuse that column so we're going to start off by making some changes to column one i'm going to open these settings over here and i'll start by adding a gradient background you can notice that here too like this kind of overlay so i'm gonna add two color codes there let me just grab those color codes this is the first one we're using completely transparent color and then black you can find all of the color codes and all of the steps written down in the blog post as well which is linked at the beginning of the description below so you can go there and follow everything step by step as well and you can also download the json file to this layout for free all right so i'm also going to change the start position to 30 percent here and then i'm gonna open the background settings and i'm gonna add a background image on hover so meaning that by default we don't want a background image but as soon as it's hovered we want one so i'm gonna enable the hover option at the top here go to the hover option here and then i'm going to select a background image of my choice so now we have that in a hover state but not in a default state so these can remain as they are over here and i'm also going to add a css class hover dash column so we're going to need this later on the tutorial to you know ensure that the functionality applies to other elements within this column all right so now that we have the column settings in place we can start adding modules so again we're focusing on column one we're creating everything we need in column one and then we'll reuse column one for the other three ones and then we can make changes this is to me one of the most efficient ways to go about it so i'm going to start with the first module if i go to the preview over here you can notice that the first module is a text module with some h3 content so i'm going to add a text module here and add some h3 content and then i'll go to the h3 text settings over here and i'm gonna make some changes so these are just you know the design style that i chose to work with um you can style this however you want but if you like the design here you can follow all of these you know custom settings step by step too let me grab the color code here as well this is the text color we're using so oswald ultra light uppercase this is the text color and then we're going to use different values across different screen sizes 3vw on desktop 7vw on tablet and 14 vw also which gives this kind of outcome up until now we're also adding a little bit of negative letter spacing minus 2 pixels then we'll go to the sizing settings you can notice that there's this kind of box here to do that we're going to shrink the size of our module to 44 on desktop you can see that it doesn't affect the copy because we've placed you know um the copy below each other you can ensure that this um this is the outcome by doing the same thing on your end so we're using 44 percent i'm sorry for desktop 48 on tablet and 50 on phone and then we'll go to the spacing settings we're just gonna add a little bit of breathing space that you can notice over there um first we'll add some bottom margin which is gonna be 25 viewport height this is the space we have between you know this module and the module that's to come i like to work with the v h in this case because it you know it adapts to the different screen sizes and it doesn't like if you were to go for pixels as opposed to um viewport height you would you know on smaller screen sizes for desktop for instance you would get like a lot of scrolling needed for some visitors to go to the end of the design so for that reason if you're working in height going for v8 is a really really good option next we'll add some padding five percent for top and bottom and seven percent for the left and right side so this looks better already we're also going to add a border to connect um the top of the row in the module and the borders we're using are um the right and the bottom so we're using one pixel for each one of these this color code and using the same thing for the bottom border color here all right and we're also going to assign a css class called hover hovers dash title all right and then we can move on to the next to the next module which is another text module but i'm just gonna take one quick look to see if you guys have any questions so far no question wait um [Music] what kind of websites will benefit from this i guess that's the question um i can see this being very practical for portfolio websites and stuff like that you can you can actually use this for any kind of website if you want it to be a little bit more interactive i personally enjoy these kind of hover designs or something just automatically reveals but that's just me all right so let's go back to the next module over here the first um i need to correct something over here in the column 1 settings i've applied a gradient background now i need this gradient background to be only applied in hover as well so i'm going to remove this and i'm going to add it in the hover state there we go i'm also going to place it above the background image so this makes more sense right now by default we don't want any gradient background all right next text module let me just add it over here let me grab the copy for this some placeholder texts and i'm gonna style this using carla as my font a white text color i'm gonna modify the text size to 0.8 vw on desktop 2 vw on tablet and 3.6 vw on phone so obviously because the background color is white right now the text doesn't show up which is exactly what we want as soon as it goes to hover modus it will show up because it's white it's not invisible right now it's just merging with the background color and i'm also going to increase the text line height to 2.2 em next i'll go to the spacing settings i'm going to use some bottom padding 10 and left and right padding of nine percent just to again have a little bit of space to breathe for the module itself and of course we'll also need a css class so the way we're going to go about this in the functionality part of this tutorial is you know you have divi's built-in hover options and they are really cool and they are particularly helpful if you're hovering one specific element so for instance one module as soon as you hover that module you can change the styles of that particular module but now what we're doing within this tutorial is we're triggering hover settings or options whatever you want to call it when the entire column is hovered so right now where i'm hovering is the column only i'm not hovering any module within that column but yet they are affected by me hovering the column so that's where this tutorial will help you with other stuff you might want to do with other options all right so hover dash text for this second text module and then we'll move on to the last module which is a button module let me just add some copy here and i'm going to style this button in the design tab 1vw on desktop 2.5 vw and tablet and 4vw on phone we're also going to remove the border with by adding 0 pixels to it we don't need the border radius either so zero pixels there as well we're changing the font to carla we're showing the button icon beforehand we're choosing a left icon placement and we're selecting another ico icon over here so this is the one we're going for this kind of arrow that points to the right then we'll go to the spacing settings i'm gonna add a bottom margin with a value of eight percent left margin with a value of nine percent again just to generate some space five percent for the bottom padding and twenty percent for the right padding and i'm also going to add a box shadow so this is the option we're choosing the one that i'm hovering right now i'm gonna modify this to two pixels so the vertical position to two pixels the first horizontal position to zero pixels and a black shadow color and we'll need a css class for this module as well alright so i'm just going to open a new tab here so we can go back and forth between the preview of the design we're doing right now so this is what we have up until now it's kind of strange that let me just take a quick look at this gradient background here this should be completely transparent we're good so this is the result we have up until now so as you can notice we have this kind of hover effect on the column when we hover it but um the modules inside this column don't change style so this is what we have now um this is where we want to go we also have this kind of transition between a gradient background and the background image which we don't have here so by default you can't animate gradient backgrounds but there's a way around it and we're gonna use that way around it within this tutorial just to create this kind of complete um user experience so it's not really necessary but i did want to add it to the tutorial just in case you were looking for a way to do it there's a way around it cool so now that we have the first column we can reuse it for you know the three other columns in our row first i'm going to remove the three other columns and then i'm going to clone column one three times of course you're gonna have to change all of the background images for each one of the columns if you want them to be unique like in this preview um you'll also need to change the copy the button link and so on and so forth um but yeah we will just focus on some really important parts on in achieving the outcome design so i trust that you guys know that you have to change all of the duplicate content and stuff all right so um first what we're gonna do is add the borders so over here you can notice borders now these have been manually added to each one of the columns um so we're gonna start with column one and two and these two columns have the same settings and then as we move to column three and four different settings apply especially because we need to make sure that these columns are response these borders are responsive on smaller screen sizes here you can notice that we have a bottom border as opposed to a right um a right border so okay let's start with column one i'm going to go to the border settings i'm going to use right border width of one pixel and this is the color code i'm using here let me just grab it there we go and then a button border of zero pixels on desktop but we'll bring this to one pixel on tablet and on phone and we'll also need to get rid of this right border on smaller screen sizes so we're on tablet knob but on phone yes we'll need to bring this down to zero there we go so these settings apply to column one and column two so i'm going to copy the border styles and i'm gonna paste them over here in column two and then we have column four column three which needs some different settings so i'm going to add a right border of one pixel here this is the color code we're going for and we're using zero pixels on desktop one pixel on tablet and one for phone and we're bringing this down to zero pixels on phone only so it seems like these are the exact same settings i don't know why i thought column three had unique settings as opposed to column one and two i think these are the same all right so here we have it now we have all the responsive borders let me just go like this there we go and now the only thing that's left for us to do is change some styles for the child elements on hover and we're going to do that using some css code as i mentioned before the hover options you can use db's build and other options to make hover changes to one specific element for instance one module that you're hovering but in this case we're using an approach where if we hover the parent container we want the child elements to change styles too and that's done using some custom css code and i think this will be particularly helpful for you guys if you're trying to achieve something along these lines and you know just go the extra mile so um let me just add the copy here so what we're basically doing is um over here the ones that i'm highlighting right now these are all styles that are being changed of the you know of the child elements um once you know once the column is hovered and um yeah you can play around with these can be really helpful for certain um for certain projects you're working on and then this here over here this is um the the fix we are applying for the background transition so as i mentioned before you can't transition a gradient background with css so the only way to go about it if you want this kind of transition to happen is using before pseudo elements and yeah you can reuse this snippet for any kind of project you want you can also download the layout to this tutorial by going to the blog post in the description below and i'm just going to show you guys a final look at the outcome there we go so very effortless i'm just going to take one look to see if you guys have any questions yeah don't see any questions so that's wrap thank you guys for joining if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing dv design initiative where we try to put something extra into your design toolbox each and every week thank you for watching and we hope to see you in the next one bye

Channel: Elegant Themes

Views: 2,593

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: C3dw5gnUeUA

Length: 27min 6sec (1626 seconds)

Published: Tue Feb 02 2021