How to Create a Footer Reveal Effect in Bricks Builder

In this tutorial, we’ll show you how to create a stylish footer reveal effect using Bricks Builder — where the footer slides up smoothly as you reach the bottom of the page. This effect adds a dynamic touch to your site and enhances user experience.

You can see this effect on this website: https://nueve.gr/

Step 1: Create a Footer Template in Bricks

Go to Bricks > Templates and create a new Template of type Footer.

Design your footer as you wish. For this effect to work smoothly, it’s best if your footer section is set to 100vh height (full viewport height).

Step 2: Add Custom CSS to the Footer Section

Once your Footer is designed, select the main Section inside the Footer Template and apply the following CSS:

main {
  /* make sure to cover the screen */
  min-height: 100vh;

  /* need a solid bg to hide the footer */
  background: #E8E4D9;

  /* put on top */
  position: relative;
  z-index: 1;
}

#brx-footer {
  /* place on the bottom */
  position: sticky;
  bottom: 0;
  left: 0;
}

This makes the footer fixed to the bottom of the page and allows it to “reveal” as users scroll down.

Make sure the background color of your footer matches your design, as this CSS removes some default spacing or margins. You can change it directly in the Bricks Builder panel or via custom CSS.

That’s it — you now have a smooth footer reveal effect in Bricks!