Bottom drawers are useful additions to any Website, as they store additional content easily accessible by users. Footer drawers are web content containers (like a Divi section) that can be opened and closed by clicking a button or hovering over them. It's like having a little stash for premium content.
In this tutorial, we will design a floating footer drawer in Divi. We will add the footer drawer to the global footer area of the website template so that the footer drawer is site-wide accessible with normal footer content.
With the process we're going to use, any Divi section (and its content) can be converted to a footer drawer in a matter of minutes.
How to Add the Footer Drawer Template to Your Divi Site
Adding this model will replace the website template by default (if you have one) on your Divi site. We suggest adding it to a test site so you don't mess anything up on a live site.
To import the fixed footer drawer template on your own Website, unzip the download zip file to access the JSON file.
Then go to the WordPress dashboard and go to Divi> Theme Builder.
Then click on the portability icon at the top right of the page.
In the portability window, choose the JSON file you just unzipped and select the “Download backup before import” option, just in case you previously had something in the website template default that you didn't want to override.
Then click on the Import button.
Finally, save the changes to the theme generator and display a live page to see the fixed footer bar.
Now on to the tutorial, okay?
Part 1: Adding a Global Footer
The Divi theme generator allows you to replace the default footer with a new one by updating the default website template.
To create a global footer, go to the WordPress dashboard and go to Divi> Theme Builder. Then click on the “Add Global Footer” space inside the Default Website Template.
Then select the “Build Global Footer” option from the drop-down list.
Add a predefined layout to a global footer layout
This will deploy the Model Layout Editor where you will immediately be prompted with the three choices for how you want to start building. Select the "Choose a predefined layout" option.
In the Load from Library pop-up window, find the stationery landing page layout. Then click on "Use this layout".
Remove unwanted content from premade layout
Once the layout is loaded into the editor, expand the Layers pop-up box by clicking the layers icon in the settings menu. Then delete all sections of the layout except the last two.
Move and label the two sections
Once the sections are removed, you should have two sections, one titled "Footer" and the other titled "How it works". Move the "Footer" section to the top of the layout.
Change the wording in the lower section to read “Footer Drawer”. This will be the section we will use as the content of our footer drawer.
Part 2: Creating the fixed footer drawer
Now that we've designated one of the sections as the footer and the other as the footer drawer, we're ready to start building our fixed footer drawer. Let's start by creating the blurb icon that we'll use to toggle the footer drawer.
Creation of the footer drawer button
Add a new line
In the bottom footer section, add a new row to a column.
Label the new row "Drawer Button" because this is the row that will contain the button used to toggle the drawer open and closed. Then move the line to the top of the section.
Row padding
Before adding a module, open the row settings and update the padding as follows:
- Padding: 0px high, 0px low
Section padding
Then open the settings in the "Footer drawer" section and update the padding as follows:
To create the clickable button that toggles the footer drawer, we're going to use a blurb module with an icon. And, we're going to give it a unique water drop shape by combining the square shape of the Blurb pod container with the circle icon.
Here's how.
Add a Blurb module
Add a presentation text module to the "Drawer button" line at the top of the section.
Blurb content / icon
Then remove the default title and body content and select the arrow icon that points to the top left corner (see screenshot). We're using the partially rotated icon because we'll be rotating it later.
BlurbDesign
Then give the presentation text as follows:
- Background Color: # 081540
Then update the design parameters as follows:
- Icon color: #eeeeee
- Circle icon: YES
- Circle color: # 081540
- Use icon font size: YES
- Icon font size: 17 pixels
Presentation text size
Now give the module a height and a width as follows:
- Width: 30px
- Height: 30px
This will cause the circle icon to overflow into the text container to create the water drop shape.
Blurb Position
Then give the presentation text an absolute position at the top center of the section.
- Position: Absolute
- Location: Top Center
Blurb transformation settings
Now we can use the transform options to rotate the blurb / icon up and position it just above the section container. Now when we hide the section under the browser window, the icon will remain visible / clickable.
Update the following items:
- Transform Translate X axis: -50%
- Transform Y axis translation: -250%
- Transform Z axis rotation: -45 degrees
Then remove the default icon animation:
- Image / Icon Animation: No Animation
We're going to be using JQuery to toggle the drawer, so we need to target the text / icon as a clickable element with a CSS class that we'll use later in the code. Add the following CSS class:
- CSS class: target drawer
Footer drawer section settings
Now we are going to hide the “Footer Drawer” section using the translate transform option. Open section settings and update the following:
- Transform Translate Y axis: 100%
The beauty of using the transform here is that the percentage values are based on the actual size of the element. Thus, 100% on the Y axis will be directly relative to the height of the section (nomatter what it is at any given time). In other words, the element will be moved down the exact distance as its own height.
In order to bring the Footer Drawer back into view, we're going to need to reverse the transform translation we just added to the section. To do this, we will need to target the element with a CSS class and disable the translation transform by clicking on the icon (bring the entire section back to its original position).
Add a CSS class to the footer drawer section
Under the advanced tab, add the following CSS class:
- CSS class: has-transform
Footer drawer section Fixed position
For the last step, we need to make the footer drawer fixed so that it (with the icon) floats at the bottom of the browser window.
Update the position of the "Footer Drawer" section as follows:
- Position: fixed
- Location: bottom left
- Z Index: 13
Turn off mobile content
Because you will have a limited amount of footer drawer content that will fit both tablet and phone (due to limited screen height), you will need to disable / hide non-essential items from the display. In this example, we're going to hide the middle row of the section layout.
Open the settings from the second to last row in the “Footer Drawer” section. Under the advanced tab, update the visibility option to turn off the line on the phone and tablet.
Adding custom code
To add the click and toggle functionality in the footer drawer, we need to add custom CSS and JQuery to the page. To do this, create a new code module under the Blurb module used for the button.
Then paste the following code in the code area:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Save changes
Remember to save the layout before exiting the editor.
Also save the changes in the theme generator.
Final result
Now we can go to any page of your Website to see the final result.
Latest Thoughts
Hope the floating footer drawer will help you promote content in a fun and accessible way. Like any drawer, you can fill it with just about anything you can think of.
Other Resources
Here is a list of tutorials that can help you accomplish more with the internal features of Divi.
- How to create a theme toolbox on Divi
- How to Create an Animated Promotional Section on Divi
- How to customize grids on Divi
Translated from: Elegant themes