{"id":2048,"date":"2025-04-05T21:40:14","date_gmt":"2025-04-05T18:40:14","guid":{"rendered":"https:\/\/jasonblackeye.com\/?p=2048"},"modified":"2026-02-19T19:33:53","modified_gmt":"2026-02-19T17:33:53","slug":"how-to-create-a-footer-reveal-effect-in-bricks-builder","status":"publish","type":"post","link":"https:\/\/jasonblackeye.com\/el\/how-to-create-a-footer-reveal-effect-in-bricks-builder\/","title":{"rendered":"How to Create a Footer Reveal Effect in Bricks Builder"},"content":{"rendered":"

In this tutorial, we\u2019ll show you how to create a stylish footer reveal effect using Bricks Builder \u2014 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.<\/p>\n\n\n\n

You can see this effect on this website: https:\/\/nueve.gr\/<\/strong><\/a><\/p>\n\n\n\n

\"Footer<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 1: Create a Footer Template in Bricks<\/h4>\n\n\n\n

Go to Bricks > Templates and create a new Template of type Footer.<\/strong><\/p>\n\n\n\n

Design your footer as you wish. For this effect to work smoothly, it\u2019s best if your footer section is set to 100vh height (full viewport height).<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\"Footer<\/a><\/figure>\n\n\n\n
\"Footer<\/a><\/figure>\n<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step 2: Add Custom CSS to the Footer Section<\/h4>\n\n\n\n

Once your Footer is designed, select the main Section inside the Footer Template and apply the following CSS:<\/p>\n\n\n\n

<\/div>\n\n\n\n
main {\n  \/* make sure to cover the screen *\/\n  min-height: 100vh;\n\n  \/* need a solid bg to hide the footer *\/\n  background: #E8E4D9;\n\n  \/* put on top *\/\n  position: relative;\n  z-index: 1;\n}\n\n#brx-footer {\n  \/* place on the bottom *\/\n  position: sticky;\n  bottom: 0;\n  left: 0;\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
This makes the footer fixed to the bottom of the page and allows it to \u201creveal<\/strong>\u201d as users scroll down.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
That\u2019s it \u2014 you now have a smooth footer reveal effect in Bricks!<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, we\u2019ll show you how to create a stylish footer reveal effect using Bricks Builder <\/p>","protected":false},"author":1,"featured_media":2324,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"How to Create a Footer Reveal Effect in Bricks Builder %%sep%% %%sitetitle%%","_seopress_titles_desc":"%%post_excerpt%%","_seopress_robots_index":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-2048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/comments?post=2048"}],"version-history":[{"count":0,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2048\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media\/2324"}],"wp:attachment":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media?parent=2048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/categories?post=2048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/tags?post=2048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}