How to Design a Floating Footer Drawer in Divi

Footer drawers are useful additions to any website because they store additional content that is easily accessed by users. Footer drawers are containers of web content (like a Divi section) that can be toggled open and closed by the click of a button or on hover. It is like having a little hiding place for premium content.

In this tutorial, we are going to 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 accessible site-wide along with the regular footer content.

With the process we are going to use, any Divi section (and its content) can be converted into a footer drawer in minutes.

Let’s get started!

Sneak Peek

Here is a quick look at the fixed footer drawer we will build in this tutorial.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

How to Add the Footer Drawer Template to Your Divi Site

WARNING!: Adding this template will override the default website template (if you have one) on your Divi site. We suggest adding this to a test site so that you don’t mess anything up on a live site.

To import the fixed footer drawer template to your own website, unzip the download zip file to access the JSON file.

Then go the WordPress Dashboard and navigate to Divi > Theme Builder.

Then click the portability icon at the top right of the page.

Inside the portability popup, choose the JSON file you just unzipped and select the option “Download backup before importing”, just in case you had something in the default website template previously that you didn’t want to override.

Then click the Import button.

fixed footer drawer

Lastly, save the Theme Builder changes and view a live page to see the fixed footer bar.

fixed footer drawer

Now, let’s get to the tutorial, shall we?

Part 1: Adding a Global Footer

Divi’s Theme Builder 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 navigate to Divi > Theme Builder. Then click the “Add Global Footer” space inside the Default Website Template.

divi fixed footer bar

Then select the option “Build Global Footer” from the dropdown.

divi fixed footer bar

Add Premade Layout to Global Footer Layout

This will deploy the Template Layout Editor where you will immediately be prompted with the three choices for how you want to start building. Select the option to “Choose a Premade Layout”.

fixed footer drawer

From the Load From Library popup, find the Stationery Shop Landing Page layout.  Then click “Use This Layout”.

fixed footer drawer

Delete Unwanted Content from Premade Layout

Once the layout is loaded into the editor, deploy the Layers popup box by clicking the layers icon from the settings menu. Then delete all the sections in the layout except the last two.

fixed footer drawer

Move and Label the Two Sections

Once the sections are deleted, you should have two sections, one labeled “Footer” and the other labeled “How it Works”. Move the “Footer” section to the top of the layout.

fixed footer drawer

Change the Label of the bottom section to “Footer Drawer”. This will be the section we will use as our footer drawer content.

fixed footer drawer

Part 2: Creating the Fixed Footer Drawer

Now that we have designated one of the sections as our footer and the other as the footer drawer, we are ready to start creating our fixed footer drawer. Let’s start with creating the blurb icon we will use to toggle the footer drawer.

Creating the Footer Drawer Button

Add New Row

Inside the bottom “Footer Drawer” section, add a new one-column row.

fixed footer 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 row to the top of the section.

fixed footer drawer

Row Padding

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

  • Padding: 0px top, 0px bottom

fixed footer drawer

Section Padding

Then open the settings for the “Footer Drawer” section and update the padding as follows:

fixed footer drawer

To create the clickable button that toggles the footer drawer, we are going to use a blurb module with an icon. And, we are going to give it a unique water drop shape by combining the square shape of the blurb module container with the circle icon.

Here’s how to do it.

Add Blurb Module

Add a blurb module to the “Drawer Button” row at the top of the section.

fixed footer drawer

Blurb Content/Icon

Then delete the default Title and Body content and select the arrow icon that is pointing to the top left corner (see screenshot). We are using the partially rotated icon because we are going to rotate it later on.

fixed footer drawer

Blurb Design

Next, give the blurb a background as follows:

  • Background Color: #081540

fixed footer drawer

Then update the design settings as follows:

  • Icon Color: #eeeeee
  • Circle Icon: YES
  • Circle Color: #081540
  • Use Icon Font Size: YES
  • Icon Font Size: 17px

fixed footer drawer

Blurb Size

Now give the module a height and a width as follows:

  • Width: 30px
  • Height: 30px

This will cause the circle icon to overflow the blurb container to create the water drop shape.

fixed footer drawer

Blurb Position

Next, give the blurb an absolute position at the top center of the section.

  • Position: Absolute
  • Location: Top Center

fixed footer drawer

Blurb Transform Settings

Now we can use the transform options to rotate the blurb/icon upright and position it just above the section container. Now when we hide the section below the browser window, the icon will remain visible/clickable.

Update the following:

  • Transform Translate X Axis: -50%
  • Transform Translate Y Axis: -250%
  • Transform Rotate Z Axis: -45deg

Then take out the default icon animation:

  • Image/Icon Animation: No Animation

fixed footer drawer

We are going to use JQuery to toggle the drawer, so we need to target the blurb/icon as the clickable element with a CSS class we will later use in the code. Add the following CSS Class:

  • CSS Class: drawer-target

fixed footer drawer

Footer Drawer Section Settings

Now we are going to hide the “Footer Drawer” section using the transform translate option. Open the section settings and update the following:

  • Transform Translate Y Axis: 100%

The beauty of using transform translate here is that the percentage values are based on the actual size of the element. So 100% on the Y axis will be directly relative to the height of the section (nomatter what it is at any give moment). In other words, the element will be moved downward the exact distance as its own height.

fixed footer drawer

In order to bring the “Footer Drawer” back into view, we are going to need to reverse the transform translate that we just added to the section. To do this we will need to target the element with a CSS Class and turn off the transform translate when clicking the icon (bring the full section back to its original position).

Add CSS Class to Footer Drawer Section

Under the advanced tab, add the following CSS Class:

  • CSS Class: has-transform

fixed footer drawer

Footer Drawer Section Fixed Position

For the last step, we need to make the footer drawer fixed so that it (along with the icon) floats at the bottom of the browser window.

Update the position of the “Footer Drawer” section as follows:

  • Positon: Fixed
  • Location: Bottom Left
  • Z Index: 13

fixed footer drawer

Disabling Content for Mobile

Because you will have a limited amount of footer drawer content that will fit on tablet and phone (because of the limited height of the screens), you will need to disable/hide the non-essential elements from being displayed. In this example, we are going to hide the middle row of the section layout.

fixed footer drawer

Open the settings for the second to last row in the “Footer Drawer” section. Under the advanced tab, update the visibility option to disable the row on phone and tablet.

fixed footer drawer

Adding the Custom Code

To add the click and toggle functionality to the footer drawer, we need to add some custom CSS and JQuery to the page. To do this, create a new code module below the blurb module used for the button.

fixed footer drawer

Then paste the following code into the code box:

<style>
  .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;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.drawer-target').click(function(){
      $(this).toggleClass('toggle-icon-animation');      
      $('.has-transform').toggleClass('toggle-drawer-animation');   
    });    
  });
})( jQuery );   
</script>

fixed footer drawer

Save Changes

Don’t forget to save the layout before exiting the editor.

fixed footer drawer

Save the Changes on the Theme Builder as well.

fixed footer drawer

Final Result

Now we can go to any of the pages on your website to see the final result.

And here it is on mobile.

Notice how the Global Footer is also in the right spot at the bottom of the page as well as the fixed footer drawer.

fixed footer drawer

Final Thoughts

Hopefully, the floating footer drawer will help you promote content in a fun and accessible fashion. Like any drawer, you can fill it with just about anything you can think of.

I look forward to hearing from you in the comments.

Cheers!

The post How to Design a Floating Footer Drawer in Divi appeared first on Elegant Themes Blog.

Go to source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.