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

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

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.

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

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.

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

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.

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.

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

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

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.

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.

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? )

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.

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.

Michelle X