In this tutorial, we’ll add a creative touch to your website’s footer using Bricks Builder. Specifically, we’ll create a smooth “reveal” effect that makes your footer feel like it’s sliding into view as you scroll. It’s a clean, subtle enhancement that gives your design a bit of dimension and polish, and it’s easier to achieve than you might think.
Let’s walk through how to set it up.
What is a Footer Reveal Effect?
The concept is simple. As you scroll down a page, the footer smoothly reveals itself from the bottom, almost as if the content above it is sliding up to uncover it.
You can even add a shadow to the top edge of your footer to enhance the illusion of depth. It’s a small detail that adds sophistication to your layout.
What You’ll Need
To create this effect, we’ll be working in:
- WordPress
- Bricks Builder (a visual site builder)
- A bit of custom CSS
Don’t worry, the CSS is minimal and will be explained clearly. You can copy and paste it, then tweak it to your own needs.
Step 1: Edit Your Footer Template in Bricks
First, go into your WordPress dashboard and open the Bricks template for your footer.
In this example, the footer template includes two main sections:
- A call to action (CTA)
- The footer itself
We’ll be targeting the CTA section to initiate the reveal effect. Anything below the footer will then be “pushed” into view as part of the effect.
Step 2: Add a Class and Custom CSS
Select your Call to Action section in the Bricks editor and assign it a class if you haven’t already (it helps keep your styles clean and reusable).
Next, go to the “CSS” section for that class and paste in the following custom code.
main {
/* Ensures the main content is at least the full height of the viewport */
min-height: 100vh;
/* Sets a solid background so the footer is hidden until revealed */
background: var(--light);
/* Keeps the main content visually above the footer during scroll */
position: relative;
z-index: 1;
}
#brx-footer {
/* Makes the footer stay visible at the bottom when scrolling into view */
position: sticky;
/* Anchors the sticky footer to the bottom edge of the viewport */
bottom: 0;
/* Aligns the footer to the left edge of the viewport */
left: 0;
}If you’re using a custom ID for your footer instead of the default brx-footerJust update the CSS selector to match your own ID.
Note: position: sticky works in all modern browsers, but very old ones may not support it.
Step 3: Fine-Tune the Look
To add to the effect, you can include a slight drop shadow on the CTA section or the last element above the footer. This gives the visual impression that the footer is sitting just underneath with a bit of depth.
You can easily do this in Bricks using the built-in style controls:
- Select the CTA or relevant section
- Go to “Effects” or similar styling options
- Add a subtle top box-shadow
And That’s It
You’ve now got a footer that smoothly reveals itself as users scroll down your page, complete with a depth effect if you’ve used a drop shadow.
This is a simple but effective design trick that can lift your website’s professionalism and polish.
As always, the full CSS code and further resources are available in the description of the original video, so you can copy it directly or tweak it to fit your designs.
Enjoy experimenting, and keep crafting awesome sites with Bricks.
