How to Create a Smooth Slide-in Sidebar Section in the Divi Theme

if you would like to learn how to create a hidden section in dvd team that slides out from the site when you click on a button then this tutorial is for you hi my name is anya and my goal here is to help you build awesome websites and in this tutorial i will be showing you how to use the dvd builder to create a section that is fixed to the side of your screen but is only visible when you click on a button so we're going to use some custom css and jquery to achieve that let's have a look at my demo page first so here is the button that triggers the sidebar section here and you can either close it by using the icon inside or by clicking the button again okay so let's go ahead and recreate that in the dv builder i have a new page created here it's empty now so let's start by adding our trigger button you can't see it but i have a nice preset i will use okay so instead of click here i wanted to say open okay and all i need here is custom css sorry custom css class and i will call it the button toggle okay and now we need to add a new section let's add a text module so we can see it better i'm going to change the section background to black and in the advanced tab we're going to change the position to fixed to the top right side of the screen and we have to change the sizing so with 300 pixels i think it will work well both on desktop and mobile so i'm not going to change that and we need to set the minimum height to 100 vh viewport height so it fills the entire right side of the screen and one other important part is the overflow if we are going to add more elements here if the section is fixed it won't scroll so we need to make sure that the vertical overflow is set to scroll if we have a lot of content here okay and this section also needs a custom css class i will call it dl slide sidebar okay great one next element i will use here is i want to create this x the close icon so first in back inside the section when it's fixed it may be difficult to access the section settings so i'm switching to wireframe mode and now i can see my section here so in the design tab i will remove padding inside this section so my content inside fills the entire space here and now for the row i will make this row full width and i will also remove padding okay and instead of the text module i will let's open up layers panel i will add another column add a blurb module okay we are not going to use any content here we only want an icon so use an icon locate our x and now the design tab let's make it actually black and let's change the background color to white and we're going to use different background unhover let's make it gray for now it doesn't matter but and i just want to show you how i did that so uh here the blurb module background changes and in the sizing section we want to set this to fixed size so 50 by 50 pixel um sorry height and width max height max width we can fill those out and we have to change the icon size use icon font size let's say 30 pixels or actually 50 will work better and also let's change the alignment so again in the sizing right aligned okay lovely and this also needs a custom css class sorry class dl close okay so i have the structure ready and now we need the jquery and css part so what i will do is add a new section at the top here with code module so um inside our code module we'll add a script with a jquery function okay and now here we will first define our variables because we don't want the jquery to uh go through all the elements each time we want to use it that's why we are going to define the variable and this way we only need to find it once and then we can use it multiple times inside our jquery code so let's call this dl baton toggle something like that and that equals a selector the our button selector which i believe we called dl btn toggle okay and the second variable is our sidebar section so dlc slide sidebar equals class name was dl slide sidebar okay great so we have our two variables and we are going to toggle css class and with css we'll change the position of the element so when our dl button button toggle is clicked we will run a function okay and here so once that button is clicked we want to [Music] add a css class but we also want to remove that class when it's being clicked the second time so instead of the add class method we're going to use the toggle class so dl slides dl let's copy that toggle class is opened so when we click on a button the site bar section will get this new is opened the css class okay that's maybe let's start with that and next below we can add our css code inside our the style tag when our dl slide sidebar has a class of s opened we will move it to the side with the transform property so transform translate within the x axis minus 300 pixels minus the width of the of the section something like that and then yeah it should be good enough i think let's check let's save that i will exit the builder for a moment okay that doesn't exactly work as i planned but it's a pretty good start and we can fix that easily so we want to move this not minus 300 but 300 pixels when it's open but first we have to hide it so dl slide sidebar and let's hide it and then we will remove that movement but okay we also hide this in the builder and it would be very hard for us to edit that section if we can see it but luckily there is a css class we can use a css class that is added to the body element only inside the visual builder so we want to target our sidebar section when not in the builder so there is also a very useful not property so not etfb when the body element doesn't have the etfb css class well not the we are targeting the slide sidebar so this actually means an element with a class of d l slide sidebar which is within the body which doesn't have an etfp a css class we'll add that part here as well and now if i save that and let's refresh the page here the section is hidden at first and now we are opening and closing it doesn't slide but we can fix that by adding a transition so if we add a transition to our dl slide search sorry dl slide sidebar element like so let's save refresh okay so two problems here clicking on a button causes a page refresh and also the transition is visible on the page load so let me show you how we can fix that first let's add the prevent default method so we're going to name the event and then prevent default like this and also we want the transition to be applied only after the first click not on the not when the document is ready but when we click on a button so with the click let's toggle this class that works well but let's also add a new class so let me copy this and instead of toggle this time we are adding class for good let's call it has transition and now we can move that css to the uh d we don't need that we we can use it like so dl slide sidebar has transition let's save and now hopefully if i refresh the page we don't see that section on page load and it slides nicely because we only adding the transition with the first click so yay that works great the next part is making sure this x closes the section and also we want to change the text within that button so maybe let's do that first back here in our click function we will also toggle a css class but on the button itself so instead of the slide sidebar let's use the button toggle so this element will get the is opened class when we click on it and now we can use that i will create a new function here i will call it dl sidebar check and what this function would it will check if my dl button toggle has class there's a husk class method so if this has got this let's do this or else so that's the structure and if it has the this new class we will change the text of that element so it's as simple as that so there is a text method and we can say so when it is opened we want the button to say close and then when it doesn't has this class we want to say that it's we want to say open and the reason i inserted that inside the function is that i want to use that in a few places so first we'll use that here when we click it will toggle the class and then it will check if it has the class or not right so this is needed here and we'll also want to change that when we then add a function to close the section with the x icon okay so let's save that for now and preview our changes open close lovely so the last element our dl close blurb module so back here we are going to call it only once so we don't need a variable let's not worry about that like this dl close let's target our an element and on the click or we will check for our button if it has or hasn't have to or doesn't have the new class and we also we want to hide hide hide the section so we will call all elements that have is opened sorry it's opened css class we need that symbol here and we simply want to remove that class okay so when we click in on the x every element that has is opened class so our slide sidebar and our button this class will be removed and then we are checking if our button has the class so it won't have the class and it will say close that will hopefully work let's save that i hope i'm explaining it all right so again our final version open open lovely one last thing uh i want to show you so when i hover over it because this isn't a button this is a module so it doesn't have the correct cursor so we can change that with css simple dlclose cursor pointer that's the little hand save refresh open and now we have this nice cursor that looks like it's a link perfect so i hope this was helpful and easy to follow please feel free to download this section as a json file from my website and also copy all the code i used from my blog post if you'd like to recreate it yourself and as always feel free to get in touch if you have any questions and i'll see you next time you

Channel: Ania Romańska

Views: 3,171

Keywords: Divi Theme, Divi Tutorial, Divi 4, Divi, CSS tutorial, jQuery, Free Divi Layout, Custom cursor, Divi walkthrough, divi sidebar, Hide & Show Content, Divi Slide-In Section

Id: b5NKJxERLLA

Length: 21min 4sec (1264 seconds)

Published: Wed Dec 09 2020