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!