Animated drawers are useful additions to any website as they store additional content that is easily accessible to users. Animated drawers are web content containers (like a Divi section) that can be opened and closed by clicking a button or hovering over it. It’s like having a little stash for premium content.
In this tutorial, we are going to design floating animated drawers in Divi. We will add the animated drawers to the overall website template animated area so that the animated drawers are site-wide accessible with normal animated content.
With the process we’re going to use, any Divi section (and its content) can be converted to animated drawers in a matter of minutes.
How to add the animated drawers template to your Divi site
Adding this template will replace the default website template (if you have one) on your Divi site. We suggest you add it to a test site so you don’t mess anything up on a live site.
To import the fixed animated drawers template to your 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 default website template that you didn’t. did not want to replace.
Then click on the Import button.
Finally, save the theme builder changes and view a live page to see the fixed footer bar.
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 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 in the editor, expand the Layers pop-up box by clicking on 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 “Animated Drawers”. This will be the section that we will use as the content of our animated drawer.
Part 2: Create the Fixed Animated Drawers
Now that we’ve designated one of the sections like the animated and the other as the animated drawers, we’re ready to start building our fixed animated drawers. Let’s start by creating the blurb icon that we’ll use to toggle the animated drawers.
Creating the animated drawers button
Add a new row
In the bottom “Animated Drawers” 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 “Animated Drawers” section and update the padding.
To create the clickable button that toggles the animated 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 to do it.
Add a Blurb module
Add a blurb module to the “Drawer Button” row 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 rotate it later.
Blurb Design
Then give the blurb 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
Next, give the blurb an absolute position at the top center of the section.
- Position: Absolute
- Location: Top Center
Blurb transformation parameters
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:
- 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
Animated Drawers Section Settings
Now we are going to hide the “Animated Drawers” 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 (no matter what it is at any given time). In other words, the element will be moved down the exact distance as its height.
To bring the “Animated Drawers” 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).
Read more: Create a floating contact section with a scrolling effect on Divi
Add CSS Class to Animated Drawers Section
Under the advanced tab, add the following CSS class:
- CSS class: has-transform
Animated Drawers Section Fixed Position
For the last step, we need to make the animated drawer fixed so that it (with the icon) floats at the bottom of the browser window.
Update the position of the “Animated Drawers” section as follows:
- Position: fixed
- Location: bottom left
- Z Index: 13
Disable mobile content
Because you will have a limited amount of animated drawers content that will fit the tablet and phone (due to the limited height of the screens), you will need to turn off / 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 “Animated Drawers” 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 animated drawers, 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 into the code box:
Save changes
Remember to save the layout before exiting the editor.
Also, save the changes in the theme builder.
Final thoughts
Hope the floating animated drawers 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.
For website maintenance service contact us.