I remember a couple years ago there was a website that kept getting posted in the Facebook groups with a full menu, then a slide out contact form triggered by a button in the menu.
Everyone in the Facebook groups were asking how it was done, myself included, but I never saw an answer posted.
Recently while learning more about how to customise Divi’s header file I finally figured out the method of how to create a slide-in panel like this.
I decided to add it to my free SaaS template demo so people could download the template, but unfortunately as it requires a child theme I wasn’t able to include it as part of the template.
When I posted the free template I said there would be a tutorial on the way soon, but this is the most complicated Divi tutorial I’ve written so it’s taken me longer than expect!
It’s going to help if you have at least a little bit of experience in HTML, CSS, and PHP going into this, but I will try and keep it as simple as possible to follow along.
Method
Here’s how it’s going to work
1. First we’re going to create a new widget area via the functions.php file
2. Then we’re going add this widget area to the header.php file (this is the file with all the code for your menu)
3. We’ll add some CSS and JS for the slide-in functionality
4. Then, we’ll add in a trigger to open the slide-in panel.
5. Once that’s all setup, we can then add widgets to the slide-in panel (e.g. a contact form!!)
Before we start, you’ll need to have a child theme installed on your website. This is my favourite tutorial on how: https://www.eleganttweaks.com/learn/creating-a-child-theme/
Disclaimer: DO NOT DO THIS ON A LIVE WEBSITE! We’re going to be editing theme files which if done incorrectly could crash the website. If they do, it’s a simple fix, but not a risk you should be taking on a live website, especially if it’s a clients website!
Make sure you have a backup of the website before starting.
Okay let’s get stuck in…
Part 1
Adding the widget area
There’s two main methods you can use to edit your theme files. First is via FTP, and the second is using the file manager in cPanel. For this tutorial we’re going to be using the 2nd method, but if you prefer to use FTP it will be very easy to follow along.
1. Navigate to the “Files” section in your cPanel, then click “File Manager”
2. In the popup select the website you’d like to edit
3. To find your child theme folder, click on “Wp-content”, then “Themes”, then your child theme folder will be here.
4. Open your child theme folder, right-click on the functions.php file, then click “code edit”
5. Add the following code before the closing ? and >:
// Add new custom widget area function slidein_widgets_init() { register_sidebar( array( 'name' => __( 'Slide-in Panel', 'slidein' ), 'id' => 'slide-in-panel', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'slidein_widgets_init' );
So it looks like this:
6. Click save in the top-right corner.
You can now go to your widget area in your dashboard and you’ll see a new widget area called “Slide-in Panel”. Cool!
Part 2
Adding widget area to header
1. Go back to the “Themes” folder, then go into Divi folder and find the header.php file and download it
2. Go back to your child theme folder and upload the header.php file
3. Right-click on the header.php file, then click “code edit”
4. Locate the div with class “et_search_outer” (at the time of making this tutorial it’s on line 312). Then add the follow code after the closing div tag and just before the closing header tag:
<!-- Slide in panel --> <div class="slide-panel"> <span class="panel-close panel-toggle"></span> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('slide-in-panel') ) : endif; ?> </div>
So it looks like this:
5. Click save in the top-right corner.
Part 3
Adding the functionality and styling with CSS & JS
1. Add the following CSS either to your style.css file in your child theme, or to the custom CSS box in your theme options.
/*===== Slide-in menu panel styling and animation =====*/ /* Panel styling */ .slide-panel { position: fixed; top: 0; right: -100vw; width: 400px; max-width: 100%; height: 100vh; -webkit-box-shadow: -1px 0 5px rgba(0,0,0,.1); box-shadow: -1px 0 5px rgba(0,0,0,.1); background: #2c3142; padding: 60px 30px; text-align: center; overflow: auto; -webkit-transition: right .4s ease-in-out; transition: right .4s ease-in-out; z-index: 99; } /* Make title and body text white in widget */ .slide-panel .widget-title, .slide-panel .textwidget p { color: white !important; } /* Animates once the toggle is clicked */ .slide-panel.visible { right:0; } /* Adds space to the top when the user is logged in to account for black bar */ .logged-in .slide-panel { top: 32px; height: calc(100vh - 32px); } /* As we won't be using actual links for the triggers, this gives the effect of a link by changing the cursor */ .panel-toggle:hover { cursor: pointer; } /* Style the closing X in the top-right corner */ .panel-close { position:absolute; width: 40px; height: 40px; top: 20px; right: 20px; background: white; border-radius: 50%; } .panel-close:before { content: "\4d"; font-family: ETmodules!important; font-weight: 400; font-style: normal; font-variant: normal; font-size: 26px; position: relative; top: 10px; left: 0; color: #2c3142; }
2. In the integrations tab of your theme options, add the following code to your head box:
<script type="text/javascript"> jQuery(function() { jQuery(".panel-toggle").click(function() { jQuery(".slide-panel").toggleClass('visible'); }); }); </script>
So it looks like this:
3. Click save.
Part 4
Adding a trigger to open the slide in
To trigger the slide-in, all you need to do is add the class “panel-toggle” to any element and it’ll open up the panel. As it’s setup to be a toggle the same class will also close it!
To add this to the menu:
1. When on the menu page in your dashboard, turn on the CSS classes via the “Screen Options” at the top
2. Create a custom link with a “#” as the URL
3. Now it’s added to the menu, remove the “#” and add the css class “panel-toggle”
Note: This class only adds the slide-out functionality. If you’d like to style the menu the same as the SaaS template demo, sign-up to my newsletter at the bottom of the article as I’ll be releasing a tutorial on this soon!
4. Click save.
To turn a module into a trigger, just add the class “panel-toggle” to the custom css class in the advanced tab.
IMPORTANT: if you add the class to a button module or a module with a link, the effect won’t work. It needs to be added to a module without any link attached, so if you’d like to add it to a button it’s best to style some text as a button with CSS instead.
You can now go to the front-end and see the panel in action!
Part 5
Adding a contact form to the widget area
Now we have the panel working we can finally get on to adding in the actual form.
Unfortunately Divi doesn’t have a widget for it’s contact form, so we’ll need to use a plugin.
Personally, my favourite free form builder is Caldera forms. It does most of the basic stuff Gravity Forms does, and is free, so is a good solution for most websites. (I actually use this over the Divi contact form normally as it saves all the entries in a database so I never miss a message!)
1. Create a form in Caldera. Once you’ve created your form it’ll give you a shortcode. Copy/save this shortcode to be used in the next step.
2. Add a text widget to your new slide-in widget area, and paste in your Caldera form shortcode. You can also add in a title above like you would with a normal WordPress text box.
3. Click save at the bottom.
And you’re done! You now have a functional slide-in panel!
Conclusion:
Although the focus of this tutorial has been on adding a slide-in contact form, as it’s a new widget area you can really put anything you want in there!
On my SaaS template I used Bloom to add an email sign-up content locker over the download link which worked great!
You could also create a Divi layout, then add it in as a shortcode with the Divi Shortcode Plugin.
If you’re interested in a 2nd part to this tutorial where I show you how to style the menu like the demo (with the red button), sign-up with the form below and also drop a comment so I know if people are interested!
Get FREE Divi tutorials and layouts each month!
Join 400+ Divi enthusiasts and level up your web design game!
Hello Andy,
Till step 5 all works well, i got the empty slide in, but i can put whatever i want but it does not show up in the slide, still empty.
Did i miss something?
Best regards, Ron
Hey Ron,
Glad you’ve got it working to this stage! Did you definitely save the widget when you added it?
If you send me the URL to my email I can take a look if you’d like: [email protected]
Cheers!
Hi Andy,
I have the same problem. It does not show anything I have placed in the widget.
Am I missing something from the code?
I found the error. A number has been added to the code that does not belong there.
As you see before the last php, one becomes ! and — added. And at the end —
Hey Johan – thanks for the heads-up! Looks like WordPress converts it each time I edit so just fixed it.
I’ve also just updated the php in step 2. Could you let me know if that works for you now?
Hi Andy,
I have send you the url
Thanks.
Yeahhh, working.
Thanks guys, like it very much.
Keep up the good work Andy, appreciates it.
Best regards, Ron
Hey Daniel – you can change the cursor when you hover over an element so it looks like a link. Add this line to your css “cursor: pointer;”
That’s what I figured, but it’s actually working now without adding that snippet. I think there is a delay somewhere, as I am making changes in the css like changing the background colors, and the changes don’t seem to be pushing in real-time, even after clearing the cache. Even tried to use “!important” and the website is still loading the original code. Any idea what could be causing this? Is it better to paste the css into the divi theme options instead?
Looks like I had an issue with my cache, fixed and everything is working great, going to use the divi shortcodes plugin to inject a divi contact layout (that allows me to use the divi contact form from what I can see).
What would you suggest if I wanted to use this for different functions such as loading items in the cart? would you duplicate every snippet with different classes?
Hey Daniel – site’s looking great! Unfortunately when I was doing this I didn’t get it to work with the mobile menu which is why I added the floating CTA. You could probably get it to work but might need to customise how the mobile menu works.
Please remove all of my previous comments and links on this thread, Thank you.
Hi thanks for this tutorial. I have it working after clearing cache. Although it won’t open on edge or internet explorer. Is there a way to make it work on all browsers?
Thanks
Hi I meant to say I added in child theme functions like this:
function et_header_top_hook_example() {
echo ”;
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘slide-in-panel’) ) ;
echo ”;
}
Is there a way to make the jquery work in my theme js files instead of putting it in Divi?