The official Divi group on Facebook is an almost never-ending source of ideas for tutorials as people ask how something can be achieved using the Divi Theme/Builder.
This tutorial came about when someone asked how you could create a similar page to the Atomic team page, where a sidebar slides in when you click on one of the team members – see the image below to see how that looked.
Initial thoughts on the post were around using pop-ups for the member details as the slide-in sidebar on that page dynamically loaded the sidebar content. I was curious to see if there was a way this could be done using content from the page, making it easier to design the entire page and not be reliant on a pop-up plugin to create this effect.
I’m pleased to say that I managed to create something very similar with some CSS and a little bit of JavaScript, taking into account the following requirements I set myself:.
- Use content from the current page instead of dynamically loading content
- Add an overlay over the rest of the page content so that they sidebar is highlighted
- Close the sidebar either by clicking outside of it or using the close icon.
- When the sidebar is closed, remove the “#open” part of the URL that is added when the sidebar is opened
Preview
Before I get into the detail of the slide-in sidebar, here’s a preview of what the effect will look like once I’m done:
Creating the content
1. Create the basic page layout
Create the basic page layout using simple sections, rows, and modules and style them to get the look/feel you want – I’m starting with just a single person here to start with. I won’t go into detail about styling this bit as that’s not really an important part of this tutorial.
2. Creating the sidebar content
Add a section to be used as the sidebar content. Again, what content you use or how you style it is up to you so I won’t go into detail about that, but, you will need to add an icon module so that it can be used as the trigger to close the sidebar. More on this later.
3. Set the sidebar content width
Open the sidebar contents section, select the Design tab and open the Sizing toggle. Using the responsive settings set the Max Width as follows:
- Desktop: 750px
- Tablet: 100%
- Phone: 100%
Obviously, the current page looks nothing like what we want as the sidebar content is visible below the main page content. We’ll fix this with a little bit of CSS shortly.
4. Set the section admin name
Open the sidebar contents section, open the Admin Label toggle and enter a label that makes it easy to determine what the section is being used for. Here I’ve used “Slide-in sidebar content Joe Bloggs”.
5. Add required classes to the sidebar content section
Open the section settings, select the Advanced tab, open the CSS ID & Classes toggle and add the following classes:
- slide_in_sidebar_content_trigger_{number}
- scroll_trigger_slide_in
- exit_intent_slide_in
where {number} is the number of the trigger, e.g. 1 for the first person’s sidebar, 2 for the second person’s sidebar etc.
6. Add required classes to the sidebar content close icon
Open the icon settings, select the Advanced tab, open the CSS ID & Classes toggle and add the following classes:
- close_slide-in_sidebar_trigger_{number}
- close_scroll_slide_in
- close_exit_intent
- trigger_{number}
where {number} is the number of the trigger, e.g. 1 for the first person’s sidebar, 2 for the second person’s sidebar etc.
NOTE: the {number} MUST match the {number} used in step 5 above.
7. Add required classes to the person details column
Open the column settings and the individual column settings for the column containing the person details in the page design, select the Advanced tab, open the CSS ID & Classes toggle and add the following classes:
- sidebar_trigger
- trigger_{number}
where {number} is the number of the trigger, e.g. 1 for the first person’s sidebar, 2 for the second person’s sidebar etc.
NOTE: the {number} MUST match the {number} used in step 5 above.
8. Add the link to the person details column
Open the column settings and the individual column settings for the column containing the person details in the page design, open the Link toggle and add the following Column Link URL:
- #open
9. Add the required class to the person details section
Open the section settings, select the Advanced tab, open the CSS ID & Classes toggle and add the following class:
- person-section
10. Add the CSS
If you are using a child theme, place the CSS into the style.css file. If you’re not using a child theme, place the CSS in the Divi Theme Options Custom CSS code box.
10.1 Hide/show the Sidebar CSS
First we’re going to hide the sidebar section using the following CSS:
.scroll_trigger_slide_in {
position: fixed !important;
right: 0px !important;
top: 0px !important;
left: unset !important;
bottom: unset !important;
transform: translateX(100%)!important;
transition: all .4s ease-in-out,width .2s ease-in-out,top
.4s ease-in-out !important;
}This will do the following:
- Fix the position of the sidebar to the top right of the page
- Reposition the sidebar horizontally it’s full width over to the right, thus hiding it off the size of the page
- Set the transition type and length
Next we’re going to make the the sidebar visible using the following CSS:
.scroll_show_slide_in,
.exit_intent_slide_in.activate_exit_intent,
.exit_intent_slide_in_bottom.activate_exit_intent {
transform: translateX(0px) !important;
}This will do the following:
- Reposition the sidebar back to it’s original position, i.e. top right
Once you’ve added the CSS to hide/show the sidebar content it will no longer be visible in the visual builder, obviously. To make it visible again add the following CSS as/when needed:
.et-fb .scroll_trigger_slide_in {
transform: translateX(0px) !important;
} 10.2 Overlay CSS
Set up the overlay using the following CSS:
.overlay {
background: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 200;
opacity: 0;
}This will do the following:
- Sets the background to black
- Sets the overlay to have a fixed position covering the entire page
- Sets the z-index so that it sits above the normal page content
- Sets the overlay opacity to 0, i.e. not visible
Once you’ve added the CSS to create the overlay add the CSS to show the overlay when it’s needed:
.overlay.show {
opacity: .75;
}This will do the following:
- Set the overlay opacity to 75% so that it doesn’t completely blackout the main content
10. Add the JavaScript
If you are using a child theme, place this code into a scripts.js file and remove the <script> tags at the beginning and end, ensuring you enqueue the script. If you’re not using a child theme, place this in the Divi Theme Options Integrations tab Add code to the < head > of your blog code box.
<script>
// Function to get the trigger class from the list of class names
function getToggleClass(classList) {
// Create class array by splitting the class list string
var classArr = classList.split(" ");
// Loop through the class array
for (var i = 0; i < classArr.length; i++) {
// If the current class has "trigger_" in it then this
// is the one we want
if (classArr[i].indexOf("trigger_") >= 0) {
// Set theClass to be the current class
var theClass = classArr[i];
}
}
// Using theClass set the class names to be used in the
// class toggle
var toggleClassName = ".slide_in_sidebar_content_" +
theClass + "," + ".close_slide-in_sidebar_" + theClass;
return toggleClassName;
}
// Function to sanitise the uRL when the sidebar is closed
function sanitiseURL() {
const url = new URL(location);
url.href = url.href.replace("#open", "");
history.pushState(null, document.title, url);
}
jQuery(document).ready(function(){
// Process the sidebar_trigger element click
jQuery(".sidebar_trigger").click(function(){
// Get the class list string
var classList = this.className;
var toggleClassName = getToggleClass(classList);
// Toggle the active state class to show the slide in bar
jQuery(toggleClassName).toggleClass("activate_slide_in");
// Define the overlay div
var overlay = jQuery('<div class="overlay show"> </div>');
// Append the overlay div to the person-section section
overlay.appendTo(".person-section");
// Stop the main content from scrolling
var html = jQuery('html');
html.css('overflow', 'hidden');
});
});
jQuery(document).ready(function(){
jQuery(".close_scroll_slide_in").click(function(){
// Get the class list string
var classList = this.className;
var toggleClassName = getToggleClass(classList);
// Toggle the active state class to show the slide in bar
jQuery(toggleClassName).removeClass("activate_slide_in");
// When clicked #open is added to the URL. Clean this up
// on close
sanitiseURL();
// Remove the overlay div
jQuery(".overlay").remove();
// Allow the main content to scroll again
var html = jQuery('html');
html.css('overflow', 'auto');
});
});
jQuery(document).on("click", function (event) {
// If the target is not the container or a child of the
// container, then process the click event for outside of the
//container.
if (jQuery(event.target).closest(".scroll_trigger_slide_in")
.length === 0) {
// Find the element with the class activate_slide_in and
// remove that class
jQuery(document).find('.activate_slide_in')
.removeClass("activate_slide_in");
// When clicked #open is added to the URL. Clean this up on
// close
sanitiseURL();
// Remove the overlay div
jQuery(".overlay").remove();
// Allow the main content to scroll again
var html = jQuery('html');
html.css('overflow', 'auto');
}
});
</script>Okay, so there’s a bit of JavaScript here so I’ll go over what the different blocks are doing.
First, there are a couple of helper functions that are used in a few places in the rest of the code, making sure we don’t just copy the same code over and over again.
The first function creates the class names that need to be used when we try and toggle the class on the sidebar to make it show or hide. This takes the list of classes for the element that was clicked, iterates over them to find the one that has “trigger_” in it. It then uses this to create the toggle class name so that we target the correct sidebar content.
The second function cleans up the page URL by replacing “#open” with an empty string, therefore removing it from the URL string.
The next block handles opening the sidebar. This gets the classes associated with the element that was clicked – calling the helper function to create the toggle class name – and adds the “activate_slide_in” class to the correct sidebar content section. It then adds the overlay to the page and stops the main page content from scrolling.
The next block handles closing the sidebar. Again, it gets the classes associated with the element that was clicked – calling the helper function to create the toggle class name – and removes the “activate_slide_in” class from the correct sidebar content section. It then removes cleans up the page URL using the helper function, removes the overlay, and finally allows the main page content to scroll again.
The final block handles closing the sidebar when a user clicks outside of it. It first checks to make sure that the click event wasn’t on the side bar content, and if it wasn’t it finds the element on the page with the “active_slide_in” class and removes the class, closing the sidebar. We have to do it this way as we currently don’t know which of the person sections could be active. It then removes cleans up the page URL using the helper function, removes the overlay, and finally allows the main page content to scroll again.
And We’re Done
By using trigger_{number} in the classes the solution above can handle any number of person sections for any number of sidebars. If you want to add a new person, copy the main page content column and the sidebar content section, changing the classes to have a unique trigger_{number} – four classes in total. Once you’ve done that the new sidebar should just work.
Obviously, this solution could be used for anything you wanted to show using a slide-in sidebar as everything is designed using the Divi Builder so there is absolutely no restrictions on what you could add to the sidebar contents. You could also use any module to trigger the sidebar slide-in as well as it only needs to have a link (all modules can have a link) and the classes added (all modules can have custom classes added).
