How to Convert Divi Rows into Horizontal and Vertical Hover Tabs

hey divination welcome to a brand-new Divi use-case livestream where each week we show you how to add new design and functionality to your Divi websites and today I'm gonna be showing you how to convert entire Divi row or row content into vertical and horizontal hover tabs this will unlock the power of Divi to design complete row layouts with you know different any module basically that you want for your actual tab content and this is without a plugin so just using Divi I hope you enjoy it don't forget to check the video description for more information including a link to the blog post that goes along with this use case tutorial and let's go ahead and jump in and get started and of course I definitely want to welcome everyone and make sure to post any comments questions you have in the chat box there on YouTube or Facebook wherever you're tuning in today and of course if you can please give me a thumbs up make sure you can hear me okay the streams coming in all right for you and I'm always looking forward to seeing way you guys are from and I'm over here in Houston so Houston Texas and looking forward to getting into this live stream to use case tutorial with you guys about hover tabs alright so hello Peter from Maine welcome all right looking like we got a thumbs up from Thomas thank you very much for that and from Blue Ridge Mountain Virginia coach fir thank you for joining us today all right John all right from Houston - all right welcome nice to have you all right we've got a couple of Houston natives here Houstonians all right welcome convex from Germany and from Austin all right mark from Austin and we got like media web from Chile awesome guys thanks for tuning in Jana's from Scotland and we got Oh Dennis from Paris Texas looks like we got a lot of people from Texas here today Irene thanks for reaching out hello from Germany all right now let's not I don't want to waste too much time thanks for the welcomes let's go ahead and jump in and get started if you're looking at my screen here you can see that I have kind of a working model of where we're going today what we're going to be building this is the first example up at the top here is an example of a Divi row or actually three dippy rows that have been converted into hover tabs so as you can see the tabs are up here on the right when I hover over my tab - you'll see a change to my different row and tab 3 still says tab - but that's tab 3 and you can see you can just hovering over each tab will reveal the new row of content so this is what we're looking to build today and and it's actually pretty simple to go ahead and convert that to a vertical tab functionality here you can see there the tabs here vertically on the left and I'll show you how it's um you know basic tricks there to make sure that it's all mobile responsive and things like that but that's that's basically where we're going you can see I've added you know a few design elements I didn't get too fancy here with the examples but this is actually a gradient crown that kind of matches the tab up here at the top which is nice and you can see that it's actually a transition of Voe pasady actually for each tab that you can actually do with the built-in Divi settings for each of the modules and of course you can actually choose to include different transition or hover effects to do that as well so excited to jump in and get started again if you are just joining us this is our weekly the views case live stream and today we'll be showing you how to you know convert entire Divi rows into hover tabs don't forget to check the link in the video description below for a link to the blog post that goes along with this tutorial which went out I believe today this morning so you can check our blog to see that post all right so we're gonna get started building it from scratch so make sure you have Divya active and installed got a new page going get a page title in there and then deploy the Divi builder on the front end and this is our blank canvas here which we will begin by inserting a new section or a regular section with a full one column row actually just kidding we're gonna do a two column wrote for this one alright so two column row and again each one of these rows will be eventually we'll make up your tab content so this will be our first row with the row column layout alright now I don't want to miss any steps try to go in order here but the first thing we're going to do is since we're going to be adding some white text or content with my modules here I want to hold off and adding my modules I'm gonna go into my row settings and here I'm just going to add my my background gradient colors here so I'm gonna give it a background gradient and let's give my left color this saved this color to my palette here so I'm gonna give it this color here but you can refer to the article for those specific colors if you want them so that's my left color and then my right color let's go ahead and make it this purple and I'll keep it you know a linear gradient type with 180 degrees for this one and I'm gonna jump over to my padding here so I'm gonna go to my spacing and for this one I want it to be I'm gonna be positioning my tabs and I'll show you that in a little bit but so I want to make my Patty I'm gonna get my padding an actual pixel value here so I can make it more predictable and precise and this will make sense a little earlier later on but it'll allow me to set my margins for my tab later on so I'll know it's exactly 50 pixels so I'm gonna set it to 50 pixels for top and bottom and actually 50 pixels for left and right as well so that's for my row so in my entire row now has the 50 pixels all the way around for my padding and just one little design element I'm just gonna add a box shadow all right so just right down there so kind of a little broken grid kind of design there just add a box shadow from my hover tab and let's just give it a color paste it in there it's kind of like a semi-transparent purple of that matches the layout there alright so that's my basic setup for my row design we'll come back later on to do some other things but for now that's good enough for me to start adding my content to my row and again this is our first tab essentially so this will be the content for our first hover tab we're gonna be building and just to get some mock content in here I'm just gonna add an image to my left column and I'm just going to use an image from the design conference layout pack there you go and I'm going to want to see let's see save that out and then I'm gonna add an actual call to action module on the right side and I'm going to just kind of keep that content the same the mock content but I do want to see my button so for now I'm just gonna give my look my button link URL a hashtag or well yeah the hashtag and then just so I can see it there and then I'm gonna choose not to use my background color so I'm gonna just toggle that off to know and then I'll go over to my text alignment make it left and let's go ahead and come down here to my title text and I'm going to make that give it a lotto font and I'm going to increase my text size to let's do a big save 60 pixels there so it kind of goes on to lot breaks into another line there and let's go ahead and give it a mobile for phone let's do it for phone display let's cut that down to 50 pixels so that way it doesn't span more than two lines there this is actually really important because all of our rows will need to be around the same height of content for this particular design to work so just keep that in mind when you're building out each one of your row content for each tab needs to be about the same amount of content because each time you hover over one we want that we're gonna set that height of your entire tab our tabs to be the same height for each one so again just keep that in mind and I'll show you how to do that a little bit all right so now that I have kind of my mark content here next I'm going to add a tab and that's the tab that's gonna sit up to the top left here of my cup tab content to do that so I'm gonna add a text module and I'm just going to let's go ahead and save it out I'm just gonna drag it up here you actually don't need to drag it up to the top if you don't want to but I like to just because I can you know it's easier to see or find it whenever whenever I want to edit it later on but we're actually going to give this an absolute position so it really doesn't matter where it is just as long as it's in the left column over here and then I'm just gonna add some mock content just going to call it tab one I don't know if you can see it there because still kind of have a dark text color let me go and design my text tab excuse me my text module text settings and let's go to make the alignment Center and let's go ahead and give it a custom color of white now we can see it a lot better and I want my tabs to be all the same width so I'm going to give my text module here a custom width of 100 pixels as you can see once it resized there it's just going to automatically you know a line over to the left by default but now my text module is 100 pixels wide and I want to give it a height as well so I'm going to give it a 50 pixel height all right and then let's go we're gonna position it actually with some custom margin here but before I add the margin it's kind of important that I go ahead and position it give it the absolute position property first so hold office one second first thing I want to do is can't really see the the the tab because it has a matching background color which we need to add so before I start positioning it further let me go ahead and add that background color of my tab here and I wanted to match the top gradient or left gradient of my road content so that it blends nicely or seamlessly so I'm gonna give it that same blue there now I'm gonna go back to my spacing and I want to Center the text within my 50 pixel high text module to do that I'm just gonna add a little top padding to it of 14 pixels all right and now I'm gonna jump over to my Advanced tab and go to my custom CSS and this is a really small you know two lines of CSS here that's just going to position my module absolutely and this will allow us to you know make sure it stays in place at the top of my row a lot easier you can actually do this without positioning and absolutely I just think it's a lot cleaner and since we're you're going to be using this for the row as well later on I thought we would just kind of keep it consistent so so it's position:absolute and I'm going to give it an important at the end so make sure it overrides the default and as you can see now it's given an absolute position and it's going to default kind of to the top left there I'm just going to give it a top zero I don't think it's necessary but you know if it's positioned somewhere at the bottom you might need to do that so that means it's going to stay at the very top of your column there or whatever the container is and now I'm going to go back to my margin now that it's positioned absolutely and I'm going to give it a custom margin remember my padding here that I've added to my row if you remember is 50 pixels and my actual tab here which is kind of well it's actually the same so it's 50 pixels high so 50 pixels high height on my tap a text tab here and 50 pixels of padding here on my row will kind of give me an indication of how far I need to bring this tab up so actually that will be a negative 100 pixels and there you go now you can see my tab is exactly sitting on top of my row and then I want to give it a left margin if you remember my padding for my row here is 50 pixels so I'll have to do is bring it over to the left with 50 pixel a negative 50 pixel margin to the left so negative 50 that'll bring it to the left alright pretty simple so I'm gonna save that out it kind of takes case takes care of our initial or first row tab here of content now I can see that I need some more spacing here because I'm running out of room so I'm just going to go to my section here and I'm going to give it a min height or I'm gonna set actually yes I'm gonna set the height of my section now but bear in mind that the whatever you set the height for your section will be the height of all of your row taps so I'm gonna give it a set height and and then that'll be kind of the the set height for your entire hover taps functionality so I'm gonna do that right now I'm just gonna give it a height of 500 pixels on desktop and I'm gonna change that up because might if you notice my con if you know since it's in a two column layout this will stack on top of each other on tab on tablet and phone so I'll need more height for those devices so I'm going to give it a height of 900 pixels for tablet and then eye height of 750 pixels on phone and I know that value now because I've already built it but you may need to go back and change those whenever you finally get all the content in there to see exactly what height you need for your hover tabs we give it some margin now go to my space and give it a top margin of 100 pixels and a bottom margin of 100 pixels gives us some room there and then for my padding let's go ahead and get rid of my top and bottom padding set those to zero on the top and bottom so that takes care of my section settings all right i'ma pause there before I go in and create my second tab see if I have any questions that I can address all right so I have a question um let's see MD how to design the tab you shown but you've shown before I'm getting there hopefully I can answer that for you this is the same one that we've that I showed you in the beginning alright alright so let's continue on let's go into my second tab a row of content and to do that I'm just simply going to duplicate my entire row so there you go so I've duplicated my entire row and as you can see it's going above actually over my section height that I've declared here so it's just that's why it looks this way but we're going to eventually you know stack all of my my rows 2 & 3 on top of row 1 so they're all kind of be in the same spot eventually but for now this is what it's kind of easier to just edit all of them before we position each one all right so let's create our second row we duplicated our first row and just to kind of give us a different look I'm just going to move my content over switch it from left to right and you can change our image if we want something else alright so I pause there because it looks like we were offline for a bit had a brief a brief hiccup with our stream connection here all right so I'm just going to give it a moment to boot back up make sure that we are all back up and running here so if you can just hear me you can hear me now we had a brief fallout with our stream there so apologize for that alright so I'm back on thanks Peter for confirming we are taking care of our second row of tab content all right so now all I need to do is know this is a matter of design here I'm just going to flip my colors around and go ahead and match my edit my second tab right now it's it's positioned and styled in the same way as our first one but we can change that let's just go ahead and give it AB to content there and let's go ahead and give it a different background color that matches our left gradient that we changed and now we need to position it so if you remember we positioned our first tab with a negative 50 50 pixel left margin we just need to up that to actually a 50 pixel I believe there you go so that'll kind of take the account for the 100 pixel wide tab there from our second one so I'm just going to save that out and at this point you can actually add a filter effect to your row settings if you wanted to for the opacity so if I go to my filters and this is for my row by the way and I go to my opacity filter here I can set the default value to like 70 percent and and then when I hover over it I'll scuse me hover when I hover over it I'm gonna bring it to 100 pixels and that will just kind of add that but just you know a little transition when hovering over the tabs for our hover content so I'll take care of that if I wanted to I could you know go to my Advanced tab go to my transitions and slow my transition speed up let's say we wanted to about 500 milliseconds and that's for that opacity effect we can do that as well all right that takes care of my second row of content let's duplicate it one more time and let's go ahead and move our content over to get a new look let's change my image to something else here alright and let's go ahead and change my background color to let's give my left one here a dark background and let's change my hover excuse me tab to text module let's make it say tab 3 and let's change the background color to match my dark gray and now we need to space out my tab moving over to the right 100 pixels so to do that let's go to spacing and let's make it left 150 pixels to the left all right so let's save that out now that your page kind of looks like this with all three tabs or rows ready to be positioned we're going to be overlapping the rows with absolute positioning and then we're going to use the index to kind of pick which one is shown on top of the other whenever you hover over it by default the topmost are sorry the bottom most row will will have the will show up on the very top of the Z index and z space where whatever will show up on top by default so we'll need to change that and I'll show you how to do that first thing we're going to do is go to each one of our rows and give it a height of 100 percent so I'm actually going to go over to my wireframe view mode make this a little easier on us since we are going to be overlapping some stuff so here are my three rows and I'm gonna use multi select to select all of my rows so I can update the settings for all three rows at the same time so I'm gonna hold ctrl or hold command and then click on each of my rows I'm gonna click on the Settings icon for one of them and that will open up my element settings box there I'm gonna set my height or go to my sizing options set my height to 100% now actually this will not do anything on the design as it currently is because 100% of I believe it's a the default positioning of the of any element on Divi is is I believe I forget the time I forget what the default default position is it's I don't want to say static but it's not that but it's it's not going to recognize the height because it really has no set height at the parent element but now we do because the section has a height and we're setting it with an absolute position so when you do that you said anything with an absolute position you can actually give it a height of 100 percent and it'll span the height of your parent element which in this case is a section with a height of I think 500 pixels so this is why the height 100% works it really wouldn't work if you didn't have this set up so I'm gonna save that out hope that made sense and then I'm going to go to my second row actually I exit it out too soon let's go back to multi select cuz I'm gonna add this to all three of my rows open up the settings to edit all of my rows at once go to Advanced tab and now I'm going to add my absolute positioning here which is I'm going to paste it in here basically all this does is again like we did with our text module tabs we positioned it with absolute property there and then we positioned it with a left and a right this is basically a way that you horizontally Center your row an absolute position element so you give it a left of zero a right of zero and then you give it a margin of auto and make sure it aligns horizontally on the page so that's all we're doing there but once that's done if you go back I'm gonna save it and let's just go back to our desktop View mode and you'll see how it magically stacks on top of one another the tabs are in the right place and it's the basic functionality is is there so the only thing left we have to do is change the order of our rows on hover with Z and X just to show you where we are I'm going to save that out I'm gonna exit in a different tab here to show you what it's like live so you can see the functionality works but as you can see this top this one's staying on top no matter what so it's not really working out the way we want that the contents not going away and that's because we need to you know give it a Z index or update the Z index properties for our rows so to do that I'm going to go back to my wireframe view mode go to my top row here this is the first one so I'll really want this one to be the default to show up you know by default when I'm not hovering over any other tab so to do that I'm gonna set my Z index by going to advanced visibility set my Z index to 10 all right so I think the in Dibby the default Z index for a a row if I'm if I remember right is 9 so this is basically making sure that it sits up sits up above any of the default rows out there so this will show up above any row that you have here by giving it as the index of 10 the next thing so that's done with that and then the next one here we're going to give those aren't my second tab so we only want this one to show above the first one when we hover over it so we're gonna keep the default the same we're not going to change the default a z-index property but we are going to change it on hover because we want it to sit above even the first one on hover so we want to give the hover State as the index of 11 so one more above the first one there and then the same for this one the third one I'm going to give it a z-index on hover of 11 as well alright I'll save that out now when we go back to our example here so if I hover over the second one you can see now it's sitting nicely above even our first tab and when I go to the third one it will sit nicely and I can engage in the content however I want and when I exit let's say I'm on hovering over Tab 3 and I exit out it'll default back to the tab 1 when I'm not hovering over anything and there you go that's our basic functionality I want to jump over and see if we have any questions here so can you please teach us how to add a top 2 pixel border on each tab 1 tab to section etc that would be pretty simple just make sure that you know whenever you're adding a border you know take into account that the border will affect you know the spacing and things like that so if I wanted to add a border to my tabs for example let me go back to my desktop View mode and let's say I hover over this first tab go to border here you know you could do things like the top one you can give them some rounded corners if you want say if I wanted to you know the top and top left top right give it a 5 pixel rounded edge I don't know if you can see that maybe I thought up it to 10 you'd do something like that for a classic tab look and then you could of course add up I wouldn't add a bottom border because I would like it to bleed over there so I would actually add a top border here something like that three pixels and then same to the right three pixels and then the left three pixels that's basically how I would add a border to that and then the same would be for your actual row you can add a border to your entire row so a lot like I said a lot you can do here it kind of brings the power of Divi to building your own custom hover tabs okay so Peter asked a question why wouldn't you set the tab 3 with a z-index of 12 that's because the Z index of 11 is only being applied to the row on hover so let's say I'm hovering over tab to well that now that let me go back to my live version here if I go over tab to now that one has a z-index of 11 tab 3 has as a default Z index at this point because it's not being hovered over so it's kind of like 9 or below or something like that the tab one has a z-index of 10 but because but tab 2 now has 11 so now it's in the it's in the lead it's it's above everything else if I hover over tab 3 well tab 2 goes back to the default Z index and then tap 3 now has the 11 which sits above the default tab 2 and also the tab one which has the index of 10 so that's really all you need is the 11 on the hover State but good question all right let's see how are we doing on time let's see we have a few more minutes let's go ahead and jump over and I'll show you how to convert your tabs into vertical tabs and it's basically you probably could already guess that's basically those those tab those text modules that we're using for our tabs all right so let's go with our first one here so I'm hover actually let me do placate this entire section so we can keep our hover a horizontal tabs and then let's go ahead and change this one give my tab this is a tab one by the way so text module tab one and I'm gonna go to my settings here my spacing right now it's it has a custom top margin of negative 100 but I want to change that so sorry I just want to make sure I'm doing the right value here just checking my notes okay all right so we're gonna give it a margin a desktop margin here of negative 50 pixels so that brings it up basically up until the padding we have set for our row top row so and so that takes care of our vertical position but our our left position or a horizontal position we need to give it a negative 150 so that brings it over there to the left to stick out like a nice vertical tab one thing to make note of here and this is something I went into more detail on the blog post is you'll want to give you'll probably want to convert the vertical tabs back into horizontal tabs on on tablet or phone so basically all you would do is set your responsive settings for tablet and phone back to whatever it is you need to get the horizontal tabs that we've had before so just keep that in mind in case you were wondering how to make that more mobile responsive so that's my first one let's go ahead and hover over my second tack text tab here and let's get my spacing let's go ahead and give it a negative 50 I'm sorry let's go ahead and give it a zero top margin there and then and then pull it over to the left so a negative 150 here and there you go now it's in its rightful place do the last one here let's give it a top margin of 50 and then a left of negative 150 again and there you go now we've positioned our tabs in there and one thing that I didn't mention let's go ahead and see what it looks like on a live version here so works the same way we just have our tabs positioned vertically instead of horizontally above our row content but one thing I didn't mention earlier is that the way this or the reason why this works is because even though we are hovering over a text module that's technically outside of our row because we moved it with negative margin still on the back end in HTML and the code still recognizes as the row being the actual container of that text module tab so basically if we hover over the text module it's essentially the same as hovering over the entire row so that's why we can target the each of our and/or display each of our rows with these tabs because they're basically sticking out above our row but they're still a part of the row so I hope that makes sense it's kind of key to the concept behind the design you probably want to know what it looks like on mobile so let's take a crack at it I know my bottom one I really didn't setup for mobile I'd do that on the on the blog post but you can check that out the settings basically you want to just create more room on the right and left margins for this one initially what I'm just going to check out what this looks like so the it'll you know display nicely because we have our heights and this is important on tabs on our tab layout the content breaks into two columns but now this actual section is actually set to a height of a I believe 900 pixels which is why this works and you can see it's not actually perfect because here you'll see what I mean I might need to increase my height a little bit more because you can see my content of one of my rows kind of overlapping and that's because it's extending beyond the height that I have set for my section there so you'll need to tweak that in order to make sure it looks nicely and then my hover my vertical every tabs you can see I'll need to get some more spacing on the or my margins there but there's your you know final design there let's go ahead and see if we have any questions about rap time to wrap this thing up alright looks like we were good on questions all right okay that's all I got for you guys this week thanks for tuning in and be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook the way you don't miss out on any future live streams or freebies will be throwing your way and don't forget to check out our next live stream which is the a weekly WP roundup which is should be this Friday 3 p.m. Eastern and we should be back here next Tuesday with another use case live stream Davey use case livestream as well if you want to share your own knowledge expertise with our elegant themes blog or on our elegant themes blog check out the video description for a link with more information on how you can contribute your own unique content so check that out thanks again guys and I look forward to seeing you again in our next video you

Channel: Elegant Themes

Views: 11,406

Keywords:

Id: NZbXhAyoeg0

Length: 45min 35sec (2735 seconds)

Published: Tue May 28 2019