How to Design a Floating Footer Drawer in Divi

well hello Debbie nation and welcome to a brand-new Debbie use-case live stream where each week we show you how to add new design and functionality to your Divi websites today in this live tutorial we're going to be showing you how you can design a floating footer drawer in Divi and with this process you'll be able to transform any Divi section with all its contents into a clickable drawer that opens up from the bottom of your browser window and this is a cool little hiding place for a premium content and it's super accessible for users don't forget to check out the video description for a link to the blog post that goes along with this use case live stream and let's go ahead and jump in and get started alright so welcome everyone just want to make sure that we you can hear me and that I'm coming in loud and clear feel free to say hello in the chat let us know where you're from and how you're coping with being home 24/7 and all that good stuff great to be here great to have you guys we're gonna hopefully learn some things today together all right I got no sound from Andrew I got loud and clear from Brian so I got mixed signals hopefully maybe Andrew check your sound settings maybe it's on your end all right hello mark from Bermuda and Connie from Florida welcome all right Andrew looks like we're good now all right excellent all right so I'm just going to give you a little sneak peek as are to the design we're going to be doing today and basically it is a a footer drawer call it a drawer because it opens and closes at the bottom of your screen here and you can see as I scroll up and down you have that little icon down there that stays fixed in place ready to be clicked and once I click it it's going to open up a drawer of information and content this is actually a section that you know from a premade layout that we have and so it's really easy to add any section and create a custom drawer for that content or using that content and actually have a cool design of a blurb logo or icon here it looks like a water drop so show you how to do that too and so here's here's our drawer and we're going to be adding it to the template of our Divi website so we're going to be using the theme builder you can actually do this on any page individually not on the theme builder but I thought it would be useful to have this drawer through site-wide so we're going to be adding it to our global footer in the theme builder all right so to get started let's go over let's go over to our dashboard and let's go to Divi theme builder and there's my global footer that I've already designed I'm just going to erase it so we can start from scratch I can see you guys still saying hello hi Marcos and Rob welcome I know we have a few more trickling in feel free to say hello and thanks Trish for telling me the audio is fine let's see Felix a quick question from you we where can these live videos be found after the live session good question you're coming from Facebook they will be on our Facebook page and it just takes a moment for them to be published after our live stream so be looking for that on our main Facebook page facebook.com for slash elegant themes and then also on our YouTube page as well and they'll be available so we got you covered on Facebook and YouTube good question alright so if you're just joining us I do want to welcome you to today's this week Debbie use case livestream and today we're going to be showing you how to create a fixed or floating footer drawer in Divi I'm gonna do that by adding it to our global footer so here we are in our theme builder we're gonna add a new global footer so I'm gonna click on this let me blow it up here this little area here called add global footer and then that's gonna bring me up a drop-down I'm gonna select build global footer alright then it's gonna ask me if I want to build it from scratch or choose a premade layout or clone existing page I actually going to choose a premade layout for this one and that's just to speed up the design aspect because like I said earlier you can add any section and create a footer drawer with it so choose a premade layout we're gonna use the stationary layout pack so I'm going to scroll and find that when it's a pretty recent one these layout packs or pre-made layout packs are available within the Divi Builder if you have a prescription prescription subscription okay so stationery shop here it is layout pack I'm gonna add the landing page it has that footer down there that I'm just in this section here then we use as my footer drawer so I'm gonna click use this layout and this is going to be a cool setup because you're gonna be able to keep your own global footer like standard footer at the bottom of your page and in addition to that have a footer drawer that stays fixed on your page as you scroll up and down so you can have both and so this little global footer layout will have two sections one for the regular footer and then one for the footer drawer and to make things easier I'm going to in my little settings menu down here I'm going to click on the layout excuse me layers box here this layers feature which is gonna help me you know make some changes to the page and access things a little quicker and easier and organize them and label them a lot easier as well so I'm gonna be using my layers box for now I'm just going to erase everything but the bottom two sections so I'm gonna erase every section here except the one that says how it works just go ahead and blow that up here except the one that says how it works and the one that says footer and then what I want to do is actually move these or switch them around because I want the footer at the top this is gonna be my regular footer and then this is gonna be the section that I'm gonna have for my footer drawer and so I'm just gonna label that using the inline text thing here we'll call it footer drawer okay zoom out and so this area here that says custom personalized stationery will be my footage or area this has like a call to action and this kind of what this is for where a user can click on the icon and see a call to action or basically any content you want in that little drawer there okay so I've switched them around let's see the first now that I got that done I'm gonna create our fixed footer drawer so first up to do that is to create the button so if you are using your own section that you built or from a premade layout other than this one at this point is where you kind of add the customization to your section this so in this section I'm gonna add a button I'm gonna need to add that icon that one let's see I'm just gonna get that preview of our finished design here over so you can take a look and what I mean so what we need to do is add this icon here at the top of my section and then later on we'll add the transform translate to bring the section out of view and then add the code that makes the section toggle up and down when you click this icon so this at this point we want to add this icon to this section and then position it kind of above the section so that's what we're gonna do to do that we are going to need to create a new row so I'm going to create a new row here give it a one column row and then I'm going to add a blurb the popular blurb module I don't know about you guys but I use it more than any other module by far all right here we go blurb and then we're gonna take out this content because we don't need it the title and the body shrink up my box and then we are gonna want to use an icon so let's do that and can't see it so let me bring it over here in my layers view and let's select this this arrow with that kind of points off to the top left corner and we're gonna actually rotate that later on that's why I chose this one first all right so let's add a background color to our blurb module let's see if this is in the middle of my face okay all right so background color I'm just gonna pasting this could be a dark navy blue color and let's jump over to the design settings change the icon color to a basically an off light or really light light gray or you can just use white and I do want to make it a circle icon so I'm gonna click yes it's gonna give me my nice circle shape but I want the circle color to match my background color so I'm gonna add the same color to that I do want to use a custom icon font size I'm gonna give it 17 pixels okay and then there's a little cool trick to get that shape we want I'm gonna give a custom height and width to our blurb module so let's do that let's do 30 pixels and width and then 30 pixels height and there you can see the shape that we were going for it's actually just a square in a circle that are basically combined together you see that icons kind of overflowing our our small blurb container alright we want to add an absolute position to our blurb so let's do that absolute and we want to Center it at the top there and let's go ahead and save it out because before I do the next step I want to make sure I have cleaned up a few things let's you can see my row is still underneath this top row so I want to make sure that that rows at the top so I'm gonna drag it up there and then I want to take out the padding that's at the top of this section so I'm going to open up the section settings the footage or section there and let's just take out that top padding and then we're gonna do the same for the row oh we don't want any padding at the top or bottom of our row so let's do that now it's kind of sitting at the top of our section where we want it and now we're ready to add our put our transform options to our blurb here so I'm open up my blurb module again this time I'm going to go to the design settings and I'm gonna add some transform translate to it basically all this is going to do is relocate it and transform translate it's actually great to use for whenever you're using like hover effects or like transitions on click or things like that because it keeps its original placement within the document flow you're just kind of moving it temporarily basically without taking it out of the normal flow of things that makes sense the transfer translate x-axis we're going to make sure and toggle off this lock or this link because we don't want to change them both at the same time and for my y-axis I'm gonna do negative 250% all right you see how that brought it up here and these percentages are based on the actual height or width of the actual module so for this next one it's just negative 50% and the reason why I'm doing that is because we already set the absolute go back here the position is absolute and you see how we made the top center position there well that's actually using the transform translate in the back end and applying the negative 50% along the x-axis already but when we start messing with the transform translate here in addition to having that absolute position in place we kind of mess it up so we got have to add it back all right so that's so just be warned whenever you're using that absolute position there you might want to understand how that's working before you start adding transform translate to it as well all right so that hope that makes sense all right let's continue on there's another transform option of rotate so I'm gonna rotate my icon 45 degrees that way it's now pointing upwards and my arrow of course is pointing upwards as well so we have the nice drop effect and of course you can not do that and have that keep that original design which is also really cool but I thought from a user experience it would you know pointing up to show that the drawer is gonna go up when you click on it I do want to take out the default animation of our blurb icon so let's do that set no animation and I do want to add a CSS class to our blurb since this is going to be the target that's going to initialize the click function basically of our code there which is going to cause the drawer for the door to toggle up and down just going to add a class here so we can use it later on in our code I'm just going to call it drawer target and of course you can refer to the blog post that goes along with this that went out today if you you know want to see these classes and the code so you can paste it in be easier to do it that way and then I'm gonna save that out and now we can go to our footer drawers section here open up my settings for our footer drawer again and we're gonna add a transform translate this is the the point in which we're going to basically hide our entire section from view initially so that when later on when we click the button or the the icon it's going to toggle up so since we want to start with a hidden drawer we're going to go to our section add a transform translate to the section which is going to I'm gonna add along the y-axis because we want to move it down vertically so 100% that's gonna bring it out of view so remember this is based on the actual height of the section no matter what it is so 100% it's gonna make it nice and cleanly high just out of you so now that that's done let's go over to the position options and let's do a fixed so this is going to be floating we want it floating or fixed at the bottom of our browser window at all times so I'm gonna add a fixed position and then at the bottom so do bottom left there I'm at the move my section menu out of the way so you can see now it's fixed at the bottom which is where we want it and let's go ahead and add a CSS class to our section as well so that we can target this later on in our code basically I want to tell it or I'm gonna label it has transform because it has a transform translate that we need to toggle on and off all right oh and for my fix I'm gonna go back to my position option make sure it's set the z-index to 13 I think sections have a default of like 11 or something Z and X we want this one to sit above all the other sections on the page so this guarantees that it does that all right and we're almost done but I do want to be mindful that this is actually a lot of content and it's you know it looks cool but on mobile it's gonna be too much so just be mindful that for a mobile drawer you're gonna need you're gonna have limited vertical space as well as horizontal space so basically a quick and easy thing you can do is just take out the UH non-essential content and maybe just keep the button in the title there so I'm gonna actually click on this middle row and go to my Advanced tab and under my visibility I'm going to disable it on phone and tablet save and basically I'm hiding this middle row with the one two three little blurbs there okay and now for the last step is we need some code so again you can go to the blog post to get this be a lot easier for you to see but I'm gonna create a new code module I'm just gonna add it underneath my blurb module with my Ike that I've used to make my icon it's not essential that you put it there I just like to keep it close by alright so let me open this up paste in my code there i'ma try and zoom in it's probably gonna be alright so yeah so the first top portion here is a style these basically my my CSS that I'm adding to my page here adding it to a code module just so that you can bring it with you download it with the layout but of course you have if you have a child theme or want to add it in your theme customizer or whatever you can do that but this is the CSS and basically this one is going to be added to our section because our footer drawer basically because it's going to be added or toggled on and off by taking out that transform translate up a hundred percent and so by toggling this class on and off we're gonna be having that functionality of going interview and out of view this one here the toggle icon animation we're going to toggle this class whenever we click on the icon and we're going to rotate it negative 135 degrees and if you notice whenever I click on this icon it rotates to point downward for a nice UX feature there and the toggle icon enemy we did that one draw our target just make sure that it looks like a cursor when you have the pointer when you hover over the icon like a button and then below there see if I can zoom in on that part it's not liking my zoom capability from here but this here we go so this little function here is wrapped in a script tag and this is my jQuery that gets the click function so here's my target that CSS class I added to the button and I'm basically saying when on when that I that blurb icon gets clicked I'm gonna toggle that that icon animation that turns it around or rotates it and I'm also going to toggle that class to open and close the drawer all right so simple really simple stuff but you don't have to understand it of course to paste it in there once that's added I'm going to save it out and notice I didn't do anything to this section because it's already set to be my regular footer at the bottom of my page so after I save it I want to make sure and do that before I exit out and then Save Changes on the page and then I'll go to a sample page refresh and it should work there you go oh it looks like I did forget a step notice when I hover over this bottom of the icon it's actually not clickable which is a problem because I need to add some padding there so I'm gonna do that real quick so I'm gonna go to my back to my global footer layout editor sorry I've been ignoring you guys probably have some really good questions I just kind of got in the zone here I'll come back to you in a second just want to do this one thing quickly before I forget open up my layers view and I want to go to the column that holds my icon there there it is so I'm open up my column settings and at the bottom I'm just gonna add 50 pixels of spacing or padding click Save let's just refresh I think that took care of it yep now it's fully clickable okay let's see inspect and let's see what this looks like on mobile you can see that when I open it on mobile it actually has a you know a minimized content version of it so that it looks good on mobile as well all right questions let's look in here Trish says that I wish the layers panel would remember where you opened it last yes yes that would that's a that's a good idea I sometimes I forget though that you can click on any element like for example if I wanted to you know go to this row I can right click or use the more menu options here and go to layer and that'll open it up in the layers view box automatically so it's kind of another way to get to where you want to go in the layers view so you may have known that already but it's a helpful tip thanks for the helpful article I probably should have linked to that in the in the blog that's to understanding the understanding the absolute positioning in Divi so just show you that blog post here yeah I got to understanding using two V's absolute position this would be helpful to understanding how that works there's also one on fixed as well both of those will come in handy if you're kind of confused about when I was talking about the transit using the translate transform translate to position things that article covers some those things so thanks for remembering that article Trish let's go to youtube here let's see let's see okay Marcus greetings from Germany welcome Rob from Aspinwall welcome and Robert from Tanzania Wow Victoria from Arizona welcome Levi from Chad and then uncle social hello uh you're saying that you were lost with the custom width and height turned into a circle and a teardrop shape yeah so that's uh yeah I thought I explained it but it probably didn't do a very good job basically if I inspect this you probably get a better idea so this right here is the module you can see how it is actually square and this right here is the actual icon and it's the circle and basically that little icon with the circle shape is outside basically overflowing the small square container that is the blurb we're just kind of pushing it out just perfect enough that it creates that shape good question all right so it looks like we are good on the questions so far just one last chance just in case you have any questions I'll be I'll wrap it up really quickly I did show you the mobile version so that's good and again you can use this too with any content that you want you can put a contact form email opt-in form in there if you want you know a an announcement anything CTAs like this one it's just really nice to have it at a click of a button always at the in the the view browser viewport when the user is on your page all right alright guys that's all I got for you this week thanks for tuning in and please be sure to subscribe to our blog blog newsletter our YouTube channel and like us on Facebook and make sure you click to receive those notifications so you can be notified every time we have something new for you we'll be back here next Tuesday with another Divi use-case livestream but until then be looking forward to this Friday which is a live stream with BJ Keeton the weekly WP roundup so we're looking forward to that at 3 p.m. Eastern this Friday and go ahead and check out the blog post or the video description for more information on how you can contribute your own unique content to our elegant themes blog so check that out and thanks again and we'll see you guys in another video you

Channel: Elegant Themes

Views: 2,547

Keywords:

Id: mhB40iauuPo

Length: 35min 47sec (2147 seconds)

Published: Wed Apr 22 2020