Adding Footer Reveal Effect into Beaver Builder Footer

Footer Reveal for Beaver Builder Website
What is the footer reveal?

footer-reveal.js is a jQuery plugin which allows you to apply that great ‘fixed/reveal’ effect to your footer quickly and easily. Source – http://iainandrew.github.io/footer-reveal/

Creating the footer layout using Beaver Themer

Beaver Themer – A new member of Beaver Builder product family is giving the extra control of your website. You can build custom header, footer layouts, single post, archive layouts, 404 layouts and much more using it.

Lets create the footer layout using this awesome tools.

  1. Navigate to Builder -> Theme Layouts
  2. Click on “Add New” button
  3. Enter title
  4. Select type “Themer Layout”
  5. Select “Footer” from Layout drop down list.
  6. Click on Add Theme Layout button
  7. You will redirect to another page
  8. Do the other setup under Theme Layout Settings section if required
  9. Click on Launch Page Builder button and edit the default footer design
  10. Click on Done button
  11. Publish the layout.

Downloading the Footer Reveal JS file

Download the footer-reveal.js file. Copy the whole content and paste into footer-reveal.js file. Save the file into your child theme’s js folder.

Creating a new JS file

Open the Notepad+ or any other editor, add this snippet and save it as footer-reveal-init.js file into js folder.

Enqueue the JS scripts

Loading this two files on your site using wp_enqueue_scripts hook. Open the functions.php file and this snippet at end of the file.

5 Comments

  1. udfore on August 31, 2019 at 2:53 pm

    This doesn’t work for me, footer just disappears… Any solution?

  2. Digital Refresh on December 14, 2018 at 4:19 pm

    OMG THANK YOU!!!!! I have been trying to master this for months! But the total solution has eluded me. Added tip for anyone that just wants to have a content reveal on a single one page and a regular footer on all the other pages:
    1. Create a beaver themer footer layout with a single location rule
    2. Launch the Page Builder for that new footer layout and edit the default footer design
    2. While in the page builder simply add the code from footer-reveal.js & footer-reveal-init.js to that page’s custom js settings (under Tools > Layout CSS & JS > Javascript tab), INSTEAD of adding the 3 scripts to your child theme.

  3. Zdenek on October 24, 2017 at 7:17 pm

    Does this work with the plugin Beaver Builder Header Footer from BrainStorm ? I have a footer active via that plugin and it seems to be still “fixed” / the reveal action doesn’t work.

    • WP Beaver World on October 25, 2017 at 6:42 am

      Yes. Will work. Can you share the site URL once? May be you will target the correct CSS class name.

  4. Marilynn Kellum on July 16, 2017 at 9:39 pm

    Great read.

Leave a Comment

You must be logged in to post a comment.

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares