Follow us

How to create a Hidden Slide In Section using the Divi Toggle Module - Tutorial for Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

How to create a Hidden Slide In Section using the Divi Toggle Module

 

In Recipe #30 I am going to show you how to create a hidden content area that slides in from the top of the screen on click, using only the native Divi Toggle Module and a relatively small amount of CSS.

This recipe was a request from a member of my Divi Soupies Facebook Group who wanted something like the slide in effect seen on the Avada theme here.

I decided to bump this request up to the top of the list as I think it can be really useful to have an extra hidden content area, and also because I love to see how I can manipulate Divi’s native modules into doing something they were not designed for, using only CSS wink

So let’s get cooking!

Ingredients

 

The latest version of the Divi Theme from Elegant Themes.

Cooking time

 

This should take you around 10 minutes.

Preparation

 

First we are going to set up our section. On your page add a new standard section with a single column, you can do this anywhere on the page but I would recommend adding it at the very top.

How to create a hidden slide in section using the divi toggle module

 

Next open up the section settings, click the Advanced tab and add a CSS Class of ds-top-toggle-section

How to create a hidden slide in section using the divi toggle module

 

Now click on the Design tab, scroll to the bottom and in the Spacing section, add a Custom Padding of 0 in the Top and Bottom fields.

How to create a hidden slide in section using the divi toggle module

 

Finally, click the Content tab and set Transparent Background Color to Yes, then Save & Exit the section.

How to create a hidden slide in section using the divi toggle module

 

Ok, that’s our prep done.

 

Method

 

Now let’s set up our module.

Open up the Row Settings and in the Design tab, scroll down to the Sizing section and set Make This Row Fullwidth to Yes, Use Custom Gutter Width to Yes and then set the Gutter Width to 1.

How to create a hidden slide in section using the divi toggle module

 

Then scroll down further to the Spacing section and in the Custom Margin, Custom Padding and Column Padding areas, give both the Top and Bottom fields a value of 0. The Save & Exit.

How to create a hidden slide in section using the divi toggle module

 

Now for our module. Click on Insert Module in your row and add the Toggle Module.

How to create a hidden slide in section using the divi toggle module

 

Click on the Advanced tab and give your module a CSS Class of ds-top-toggle.

How to create a hidden slide in section using the divi toggle module

 

Next, in the Design tab set an Icon Color and select your fonts and text colours etc. What you choose here is entirely up to you.

Now click on the Content tab. We are NOT going to add a title, leave this field blank. Scroll down to the State area and make sure the State is set to closed, then in the Background area, set the colour you want for your slide in section background, these three fields should all have the same colour value.

How to create a hidden slide in section using the divi toggle module

 

At this stage you’ll want to add what you want displayed in the Toggle in the Content area. Anything goes here, I have used Divi’s built in responsive column shortcodes to add a three column layout with text, images and buttons in each of the columns but you can add anything you want. If you want to use my HTML as a base to work with, you can download a zipped text file by clicking the button below.

How to create a hidden slide in section using the divi toggle module

 

You could also develop a layout in the Divi Library and add that via shortcodes using either the VRYN Library Shortcodes or AC ShortCodes plugins.

Once you have finished adding your content Save & Exit the module.

At this stage you are just going to have a Toggle module sitting at the top of your page (or wherever you added it). Let’s add some CSS to change that.

We are actually using very little CSS considering the difference its makes, I’ll explain what we are doing:

This is the most important part. We are positioning our section absolutely so we can add a negative top position which takes it outside of the viewable area. Then we make it fullwidth and give it a high z-index so it will display on top of all other content.

.ds-top-toggle-section {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    z-index: 999999;
}

 

Next we are removing the default toggle border and then positioning the toggle title and setting that to fullwidth also. The toggle title is the open trigger for the toggle, that’s why we didn’t add a title to the module, we are using its container as the click trigger.

.ds-top-toggle {
    border: none;
}

.ds-top-toggle h5.et_pb_toggle_title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

This next section styles the icon we are using in the corner tab to open the toggle. We are adding a background in the same colour we set our toggle background and then using the transform property to rotate it to give us the triangle effect. I have also switched out the default + icon for an x icon. As we have rotated all of the content by 45 degrees the + would display as an x, so by using the x instead, it now looks like a + (brain hurt yet? wink )

I have also switched the default – icon used when the toggle is open to an Up Left arrow, again with the rotation added this just displays as an Up arrow. You can switch out the icons for whatever you want just keep in mind the rotation will affect what you use.

If you are in my Divi Academy Membership, this week’s resource is a handy cheatsheet where you can view and grab the codes for all 360 ETModules icons.

 

.ds-top-toggle .et_pb_toggle_title:before {
    content: '\4d';
    padding: 20px 35px 0 30px;
    width: 20px;
    height: 20px;
    right: -40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #272727; 
    top: 100%;
}

.ds-top-toggle.et_pb_toggle_open .et_pb_toggle_title:before {
    content: '\25'; 
}

 

This final section sets the width of the toggle content. I have it set to Divi’s default page width which is 1080px. If you have changed your page width settings in the Theme Customiser, you may want to change the width and max-width values here to match but you don’t have to, it’s up to you how you want it to look.

And then the last little snippet ensures that our content which is positioned off-page doesn’t create a horizontal scrollbar.

.ds-top-toggle .et_pb_toggle_content {
    padding: 50px 0 20px;
    width: 80%; 
    max-width: 1080px; 
    margin: auto;
}

#page-container {
    overflow: hidden;
    position: relative;
}

 

The toggle below contains the complete CSS along with full comments and areas you may/will want to change to match your site.

Copy and paste this into your child theme stylesheet or Divi theme options Custom CSS box.

 

Full CSS
/*----------------------------------------------*/
/*-----Slide In Toggle Section by Divi Soup-----*/
/*----------------------------------------------*/


/*Set the position of the section off the page*/

.ds-top-toggle-section {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    z-index: 999999;
}

/*Remove the toggle border*/

.ds-top-toggle {
    border: none;
}

/*Position the toggle title*/

.ds-top-toggle h5.et_pb_toggle_title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Position and style the toggle open and close icons*/

.ds-top-toggle .et_pb_toggle_title:before {
    content: '\4d'; /*You can change the icon code to something else*/
    padding: 20px 35px 0 30px;
    width: 20px;
    height: 20px;
    right: -40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #272727; /*Change this colour to match the colour you have chosen for your toggle background in the module settings*/
    top: 100%;
}

/*Icon when toggle is open*/

.ds-top-toggle.et_pb_toggle_open .et_pb_toggle_title:before {
    content: '\25'; /*You can change the icon code to something else*/
}

/*Set the content width of the toggle*/

.ds-top-toggle .et_pb_toggle_content {
    padding: 50px 0 20px;
    width: 80%; 
    max-width: 1080px; /*Change this value to match what you have in Theme Customiser>General Settings>Layout Settings>Website Content Width*/
    margin: auto;
}

/*Stops the corner tab creating horizontal scrollbars on smaller screens*/

#page-container {
    overflow: hidden;
    position: relative;
}

/*----------------------------------------------*/
/*---End Slide In Toggle Section by Divi Soup---*/
/*----------------------------------------------*/

 

And that’s it, view your page and you should see a toggle similar to my demo.

It’s a good idea to save the entire toggle section to your Divi Library as a global module so you can add it to any page you like with just a few clicks.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!