Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
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!
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.
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.
Michelle X
I have created a page with the toggle module only. I want to show globally on top in all pages, possible?
You can add as a global section in the Divi Library and then edit your header.php file of your child theme to do that
Very nice, and thanks for taking time to share this info! I love learning new creative ways to use Divi. Never even noticed the toggle module before
I didn’t come here looking for this tutorial, I was actually after something else
but I found it very enlightening, so decided to subscribe! Thanks
Thanks Andy!
Hello congratulations for your tutorial. Very well explained. Thank you. I have reproduced on my site and everything works fine. Except for Chrome (Mac and PC). But, your DEMO works well in Chrome.
Do you have an explanation for me?
And how to keep it fixed if we fixed the menu in my page layout when I scroll content?
Do you have a link so I can take a look please
Thank you Michelle
A small thing, it is possible to integrate a layout without plug-in Divi.
You have to put this in the page function.php:
Better in english
sorry
Yes it is possible Bruno, there are a number of tutorial on this easily found with a google search.
This is great. One question though how do I get icon codes? I would like a different arrow added instead.
I love your page keep up the great work
You can find them all here https://www.elegantthemes.com/blog/resources/elegant-icon-font
Great post, thanks Michelle
Alessio
P.S. Some days ago I sent you a long message with a question about (that obviously I cannot find because I used this form, not a mail).. Can you check please? I would be very glad if you could give me an answer
I do not see any message. You can submit a ticket at divisoup.com/contact
wow! awesome tutorial!! very cool!
thanks for this Michelle!
Most welcome
This is amazing! Would there be a way to put a contact form in the toggle content? I assume you could with a shortcode from something like Contact Form 7, but probably not the native Divi contact form module?
Check the plugins I mention at the end of the post Meg
I was just thinking about this for a site. Right on time.
Brilliant!! Thank you!
Welcome Claude
Another brilliant and useful solution from Michele, Thank you so much. You always know what I’d love to see next as a tutorial.
Thank you Al, you are always so gracious
No comments
By the end of summer i will join the Club 
Look forward to it Dimitris
Hi Michelle,
Thanks for this… it is seriously cool. You are the best!
Patrick
Most welcome Patrick
Thanks for your demo. It fits well with what I hope to accomplish. Instructions were right-on. However I find that for some reason the tab/arrow does not remain fixed on the front page. Perhaps I’m missing something? Also, how to replace the arrow with a icon? I subscribed some time ago. You are very helpful. Thanks!
I would need to see a live link to find the problem Terry.
For the icon you need to set the icon code and the icon font in the before pseudo elements
.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’;
}
I got it together. Thanks!
This is GREAT!!!! Thank YOU!
I have the same issue as Terry. I pasted your code directly in case it was due to a typo, but I still have that issue – when the toggle is open, neither the icon nor the tab show.
Can you provide a link so I can take a look please