Divi Plugin Highlight: Revealing Footer for Divi and Extra

Last Updated on September 18, 2022 by 12 Comments

Divi Plugin Highlight: Revealing Footer for Divi and Extra
Blog / Divi Resources / Divi Plugin Highlight: Revealing Footer for Divi and Extra

One of the most interesting footer design elements is a revealing footer. A revealing footer is when your footer remains locked in place but isn’t seen until the web page scrolls past it to reveal the footer underneath. It’s like the footer is sitting behind a curtain. When the curtain is raised the footer is revealed. One of the easiest ways to make a revealing footer is by using a third-party plugin called Revealing Footer for Divi and Extra.

A revealing footer can be created by hand if you want to dig into CSS. CSS can be added to either the theme customizer, theme options, or a single page. You would also add the code to change the footer height. You could even add an extra touch of code for a box shadow effect to the last section so it will stand apart from the footer area. To create a revealing footer by hand see the article How to Create a Footer Reveal with Divi. If you want some inspiration for footer designs, see the article 15 Divi Websites with Excellent Footer Design.

Of course the advantage of a plugin is you don’t have to handle any code at all. This is ideal for those who don’t have the skills or don’t want to deal with code. In this article we’ll see how to create a revealing footer for both Divi and Extra using this plugin.

Installing Revealing Footer for Divi and Extra

This plugin is surprisingly simple to use. Simply upload and activate the plugin. In the dashboard go to Plugins > Add New > Upload Plugin. There is no other setup required. Once you activate the plugin is works automatically. It’s site-wide. Anything you have in your footer area is revealed on scroll. There are no modules or settings to deal with. The last section will show with a box shadow.

This plugin only works on the standard Divi footer. If you’re creating a custom footer using the blank page template this plugin won’t work on that page because it technically doesn’t have a footer.

It’s responsive and works within the three footer areas:

  • Widgets
  • Menu
  • Bottom bar

Styling Your Footer Area

Your footer area will display the bottom bar, which includes the message Designed by Elegant Themes | Powered by WordPress, and your social media icons. It will also display any widgets you’ve placed within the footer widget area and a footer menu if you’ve assigned one. All of this can be customized with the Theme Customizer. You can see the footer being revealed in the image above.

Creating an Interesting Revealing Footer

In this example I want to add images to go along with the website. They will show the various services that the website provides. I’m showing four columns with an image widget in each column. The images are set to show thumbnails and I’ve added a title to each one. The images are starting to show in the image above.

Here’s the footer area after scrolling. The images show the services and clicking on them takes the visitor to that page.

This one uses a footer menu.

Here the footer after the scroll is complete. Next I’ll combine the elements and give them some styling.

I decided to play around with the colors and text. I’ve increased the size and changed the colors of the text, links, footer text, and social icons. I’ve also adjusted the background colors. For the footer menu I added space between the letters. I’ve added my own text at the bottom. The section above the footer creates a nice shadow.

Here the footer is becoming visible as I scroll to the bottom of the page.

And here’s the footer completely revealed as I reached to bottom of the page.

It even adapts to the height of the footer. This is great for large footers or footers that have dynamic content. In this example, which uses random text just to take up space, the previous section has moved completely off the screen. On zoom the section is visible above the footer.

On mobile the section scrolls to reveal the footer as normal.

After the last section has finished scrolling the footer itself will scroll until you reach the bottom of the site.

Here’s a look at the revealing footer in motion.

Using the Revealing Footer with Extra

As promised Revealing Footer for Divi and Extra does work with Extra. The footer elements are different from Divi to Extra but the revealing effect is exactly the same. Extra places the footer menu in the bottom right corner and uses three widgets by default. This example uses the same layout with a sidebar.

Here’s the footer fully revealed. This is the default styling.

License

There are two purchase options. Both options include lifetime support.

  • Single site – $9.99
  • Unlimited sites – $24.99

You can purchase Revealing Footer for Divi and Extra from the developer’s website.

Ending Thoughts

The revealing footer is an excellent design that makes your footers stand out. Using the Revealing Footer for Divi and Extra plugin makes them easy to create. Divi and Extra both can create nice footers which includes the widget area, footer menu, and bottom bar and they can be styled easily with the Theme Customizer.

Although you can add this feature to Divi or Extra by using CSS, this plugin does all of the work for you. Just install it and activate it. No other setup is required. I would like to see some settings for the shadow so it can be adjusted, but it does look good the way it is so most users probably wouldn’t want to adjust it anyway.

If you’re interested in creating a revealing footer for Divi or Extra without having to use code, the Revealing Footer for Divi and Extra plugin might be the solution you need.

We want to hear from you. Have you tried Revealing Footer for Divi and Extra? Let us know how you liked it in the comments.

Featured Image via Maisei Raman / shutterstock.com

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting

Divi Essential

All in one set of 64+ design modules with 600+ layouts and 3 ...

View Product

3997 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

8748 Sales

Divi Supreme Pro

With 60+ Divi premium modules and extensions to choose from. Take ...

View Product

11653 Sales

Divi Contact Form Helper

Upgrade the default Divi Contact Form with tons of missing, premium, ...

View Product

3975 Sales

Table Maker

Table Maker brings beautiful responsive tables to the Divi-Builder. ...

View Product

7448 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

7981 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

8649 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

6155 Sales

Premade Layouts

Check Out These Related Posts

Get a Free Fashion Stylist Layout Pack For Divi

Get a Free Fashion Stylist Layout Pack For Divi

Posted on June 17, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Fashion Stylist Layout Pack that’ll help you get your next Fashion...

View Full Post
How to Build a Website with Divi (2024 Tutorial)

How to Build a Website with Divi (2024 Tutorial)

Posted on June 12, 2024 in Divi Resources

You’ve purchased Divi and are ready to build your website. The only problem is that you need to figure out where to start. Thankfully, Divi is one of the most intuitive WordPress themes available. It offers a user-friendly drag-and-drop Visual Builder that allows you to place design modules...

View Full Post

12 Comments

  1. Very useful blog. thanks for sharing

  2. Wow. I was waiting for this from a long time ago

  3. It would be nice to see this in Divi as an option, I try to use as few plugins as possible.

    Performance is also something that needs to be considered as Google use page load times as an indicator.

    Divi however continues to go from strength to strength and these regular articles are excellent.

    • Yes, I second this. It is a great idea, but it should be a built-in divi option.

      • Yes, I totally agree with you!

        My process was creating a ChildTheme and edit footer.php to add a PageID but was a discovery process, it really should be included.

  4. This can be done easily without the plugin. Then why people will spend money for this?

  5. Finally, thank you!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today