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.

Import model divi

Finally, save the changes to the theme generator and display a live page to see the fixed footer bar.

Save the divi layout changes

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.

Divi editor selection

Then select the “Build Global Footer” option from the drop-down list.

Add a divi model footer

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.

Choose preconstructed model divi

In the Load from Library pop-up window, find the stationery landing page layout. Then click on "Use this layout".

Use a divi model

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.

Delete unnecessary section

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.

Divi footer

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.

Modify divi footer label

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.

fixed foot drawer

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.

Selection layout divi

Row padding

Before adding a module, open the row settings and update the padding as follows:

  • Padding: 0px high, 0px low
Confiuration divi spacing

Section padding

Then open the settings in the "Footer drawer" section and update the padding as follows:

Divi section spacing configuration

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.

Footer drawer divi
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.

Choose icon footer drawer divi
BlurbDesign

Then give the presentation text as follows:

  • Background Color: # 081540
Modify divi background

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
Customize blurb divi button
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.

Edit divi button design
Blurb Position

Then give the presentation text an absolute position at the top center of the section.

  • Position: Absolute
  • Location: Top Center
Modify divi button position
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
Return divi button

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
Define a divi selector

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.

Transform section divi

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
Add class has transformation divi

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
Modify position on the divi corner

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.

Hide section on mobile

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.

Control visibility divi section

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.

Add module code

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 );   
Add divi code module

Save changes

Remember to save the layout before exiting the editor.

Save divi modifications

Also save the changes in the theme generator.

Save changes

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.

Translated from: Elegant themes