Creating Pop Out Service Descriptions on Hover with Divi

hello divination and welcome in today's tutorial I'm going to show you how to create pop-out service descriptions on hover with Divi this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get started so before we begin the images and the material that I'll be using in today's tutorial we'll be coming from the investment company layout pack so if you want to follow this step-by-step make sure you download the investment company layout packs so that all the images will be added to your media library so if I come over here to my library you'll see that these are the images that I'll be working with alright so what we're gonna do now is to start by creating a brand new page so I'm gonna click on add new and we'll give this page a name I'm just going to call this pop-out service descriptions click on use Divi Builder so we're gonna build this from scratch and here we are going to start by adding a single column now before we add any modules here let's go into our row settings and make some additions to our background so I'm gonna start here by coming over to the background click on the third tab to add an image to our background so I'm gonna click here on this plus button and the image I'm gonna add is this one here as I mentioned this is for our layout pack click upload an image next I'm gonna come over here to design sizing so I'm gonna make sure I set my gutter width so I'm activate this and set this to yes and then I'm just gonna drag this all the way to 1 so the gutter width is pretty much the distance between the columns alright so the next thing we're gonna do is to set our width here to 100% and then we're gonna come over here to our height and set this to 320 and then we also need to go to our padding here and make sure we remove any spaces to the top and the bottom by coming over here to the padding and setting this to zero pixels activating my chain so the zero could be added both to the top and the bottom now it's time to add our modules so I'm gonna save this click here on this plus button and search for my blurb module so here it is I'm gonna select it so let's start by adding a title so instead of having default text here I'm just gonna set this to service and let's choose an icon to go with this so to do that you want to come over here to image an icon because by default it brings in a an image so to change that we need to say use icon yes and then we're just going to choose an icon to go with this so that I cannot want to go with is an icon of a computer monitor and for this we're not gonna need some some of this text we have here so I'm gonna come back over here to text and just delete all this text next we're gonna come over here to our background and add an image so I'm gonna click here on this third tab to add our image and the image we're gonna go with is this one here the laptop click upload an image now if you want to use your own images for your designs in fact let me just go back here so I can show you the size the dimensions that you need to use are 320 by 215 to achieve a similar design as I'm doing here in this tutorial some lists click here on upload an image so over here where it says background image size we need to set this to fit and and the position needs to be set to top center so now we need to add a gradient to our design here so I'm gonna come over here to my second tab click here on this plus button and then we're gonna start by adding our first color so I'm just gonna drag the slider down because the color that I'm gonna add here is going to have some transparency so we need to make sure that we have the RGB values here active on the screen so I'm gonna paste my values in here and by the way 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 alright so we have our first color now it's time to add our second color so I'm gonna click here to add my second color paste it now let's add our start and end position for our gradient so our start position here is going to be 34% and our end position is going to be 71 now for our gradient to really show correctly we want to make sure that place gradient above background image is set to yes and now it's time to work on icon so I'm going to come over here to the design tab and let's go to image an icon so the first thing we want to do is to change our icon color so I'm gonna click here on this eyedropper tool and change my icon to white next we need to align our text because as you can see this service text here is aligned left so we want that to be centered so I'm gonna come over here text alignment Center now we also need to add a font to our title and also the colors so I've just clicked here on this brush tool so I could go to my settings so the first thing we're going to do is start by changing our title font so I'm gonna click here on on my default font and search for a key vote I'm going to select that and in order for our text to be able to be easy to read I'm gonna set this to white and then I'm also going to change the text size because as you can see it's not big enough so I'm gonna set this to 38 and we're also going to add some letter spacing and this is going to be 4 pixels and our maximum width for this is going to be 320 so I'm gonna come over here to sizing and set my max width to 320 and we also need to align this module to the center now I think we may also want to add a height to 320 okay so that looks much better now so moving on we're gonna come over here to spacing because here we need to add a padding to the top of 68 pixels so as you can see we've just added some breathing space here in our blurb all right so we need to also come over here to advanced visibility and set our Z index to 1 and back over here on the design we need to add some rounded corners to our design here so we're going to go to border and set our rounded corners to 10 pixels okay so you can see here I know it's not very clear but I've added my rounded corners so pretty much we're done here with this design I'm gonna save this and now it's time to add our call-to-action modules on the clicking on this plus button and search for call-to-action and select it so this call to action is going to be positioned to the left of the blurb module alright so the first thing I'm going to do is to align everything to the left so I'm gonna come over here to my design tab click on text align everything over to the left and we can start now by adding all our fonts so I'm going to start by adding my title here my font of the title so this one here is going to be called a key bow we've already chosen it before and our size is going to be 22 and our width is going to be 320 so I'm going to come over here to sizing and set my width to 320 by default it's set to auto alright so now that we have our width let's set our module alignments to the left and over here on the height we're gonna set this to 320 as well now let's head over to the margins because this is how we're going to position this in the right place so I'm going to click here on spacing and I'm gonna start here by adding my top margin and this is going to be minus 320 and now you can see this now snaps into place so over here we're gonna give this some padding 14 to the top bottom and also to the left and the right so this is just so that we have enough breathing space around this content so finally for this will not going to need our background here so I'm gonna come back over here to content click on background and I'm just gonna say use background color no and then save so what we're also going to need is to have a similar call to action here over to the right which is going to appear on hover so instead of going through all the steps of creating recreating this we're just going to duplicate what we have here so I'm gonna come over here and if you can't really can't see your options in fact I can see them now I can just duplicate it that way and as you can see we'd really can't see where my other module is so in order for you to be able to just use this easier just click here on expand settings click on wireframe mode and now you can see this is where your call to action is so I'm gonna click here on this module set Settings icon and then if you want to view everything in desktop view just click on this little icon this now takes you back to your views okay so in order for this to be positioned correctly we need to align this to the right so I'm going to come over here to design sizing and for our modular alignment here you can see it's aligned to the left that is why it's on top of this other one so I'm going to align it here to the right and now you can see it disappeared over here to the right so now it's time to created the button that is going to activate our actions on hover so I'm just gonna save this for now and then I'm going to add my button module so again I'm gonna come back over here to my wire frame mode click this plus button and add my button now I can go to my desktop view so in the button here the text we're going to add this just text it says learn more and now you can see my button is now appeared so let's start by aligning our button to the center so I'm going to click here on design alignment Center and for a button text color we're gonna set this to white so I'm gonna click here on use custom styles for buttons set this to yes and then for button text color set this to white and then we also need to add our background color because as you can see here button here has disappeared so we need to add a background color so the text can appear correctly so I'm gonna click here on this plus button and paste my color in here and 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 all right so I've added my button here next I'm gonna come to my border width and make sure this is set to zero because I don't need that and then for the button button border radius I'm gonna set this to 10 and I'm gonna set my letter spacing to 4 now we want our button font here to just match with the fonts that we've been using throughout so I'm gonna click here on default and set this to a kevo so now we need to position our button so to position it correctly you can either just drag here to add your margins that way but I prefer to do it manually so I'm going to come over here to spacing and here on the margin it needs to be set to minus 25 and now you can see it's been moved into position I'm gonna come over here to the advanced tab visibility and set my Z index to two so this ensures that my button a is pretty much above everything else that's on the screen so now it's time to create our popover effect so I'm gonna close that and then come over here to my row settings okay so the first thing I want to do here is to come over here to design sizing and I'm gonna set my maximum width to 320 so this is going to be my normal position and if I want to add my hover effect I'm going to click on this arrow that's pointing up click on hover and then I'm gonna set my size here to 1080 so now you can see everything has appeared so this is gonna be our normal position and then on hover this is what's gonna happen so I'm not sure if you've noticed this but over here when I when I go to my normal state you notice that our rounded corners here still have that black on the rows so let's do this some final touches here by coming all the way down here to border and setting our rounded corners to 10 and now you can see our design looks much better now you can see our button here has been cut off so to fix that we're going to come over here to advanced click on visibility and then on horizontal overflow you wanna make sure this is set to visible and the same for vertical and now our button is showing correctly so I'm gonna save this and then we're going to test and see if this is working correctly so I'm gonna click here on publish exit the visual builder and now when I come on this button here and hover on it you can see now it's revealing all the content so with this knowledge you can now experiment with more design options now that we have the basic setup in place so there you have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our 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: 10,630

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: V3aDW8WO0Ag

Length: 13min 5sec (785 seconds)

Published: Sun Sep 15 2019