It’s actually really easy to hide the default Divi footer without using custom CSS. This trick works both for hiding the footer on all pages as well as just hiding it on one page or on specific pages.
Let’s hide the default Divi footer without using a single line of CSS. This is the most simple way.
Hide the Divi footer on all pages – with one single click
- Go to your WordPress dashboard and click Divi » Theme Builder
- Find the Default Website Template box
- Click the eye icon
to the right of the Add Global Footer field
- Make sure that the eye icon
is now crossed out
- Click Save Changes and preview in frontend
Voila! The footer should now be hidden on all pages and posts on the website. Clear your browser cache and website cache if you still can see the footer.
Just click the eye icon to hide the footer on all pages.
The eye icon should be crossed out. Don’t forget to save the changes.
Hide the Divi footer on specific pages or posts
- Go to your WordPress dashboard and click Divi » Theme Builder
- Find the Add New Template box
- Click the + icon to add a new template
- Hover Specific Pages (or Specific Posts) and check the pages (or posts) where you want to hide the footer.
- Click the eye icon
to the right of the Add Custom Footer field
- Make sure that the eye icon
is now crossed out
- Click Save Changes and preview in frontend
Well done! The footer should now be hidden on the specific pages and/or posts that you selected. You can of course choose to hide the footer on just one single page or one single post too.
👉 Pro tip: You can also hide the footer on Pages only, on specific Post types only and on specific Archive pages (like Categories and Tags) only by choosing them in the Template Settings (see screenshot #2 below).
Click the + icon to create a new custom template. It will override the Global Template on the associated pages and posts.
Find the pages (or posts) where you want to hide the footer. You can also choose entire post types and archives.
It should look something like this when you have saved the template settings. Hover the box and click the cogwheel to change the associated pages/posts.
Click the eye icon to the right of the box “Add Custom Header”. The eye should be crossed out. Don’t forget to save the changes.
Bonus #1: Hide the Divi footer with custom CSS
Do you prefer custom code over the Theme Builder? Then you can use the CSS snippets below.
Hide the footer on all pages and posts
- Go to your WordPress dashboard
- Click Divi » Theme Customizer » Custom CSS
- Paste the snippet below:
/* Hide the Divi footer on all pages */ #main-footer { display:none; }
- Save and preview in frontend
That’s it!
Hide the footer on specific pages and posts
- Go to your WordPress dashboard
- Find the ID for the page(s) where you want to hide the footer
- Click Divi » Theme Customizer » Custom CSS
- Paste the snippet below:
/* Hide the Divi footer on specific pages */ .page-id-123 #main-footer { display:none; }
- Replace the ID (in this example 123) so that it matches your page ID
- Save and preview in frontend
However, I strongly recommend that you use the Theme Builder instead since it’s much more convenient.
Bonus #2: Hide the Divi bottom bar with custom CSS
Do you still use the old Divi footer and want to hide the bottom bar? My first choice would be to design the footer using the Theme Builder instead. But if you like the good old Divi footer with widgets and stuff, you can use the snippet below to just hide the bottom bar.
Hide the Divi bottom bar on all pages and posts
- Go to your WordPress dashboard
- Click Divi » Theme Customizer » Custom CSS
- Paste the snippet below:
/* Hide the Divi bottom bar on all pages */ #footer-bottom { display:none; }
- Save and preview in frontend
That’s it!
Hide the Divi bottom bar on specific pages and posts
- Go to your WordPress dashboard
- Find the ID for the page(s) where you want to hide the bottom bar
- Click Divi » Theme Customizer » Custom CSS
- Paste the snippet below:
/* Hide the Divi bottom bar on specific pages */ .page-id-123 #footer-bottom { display:none; }
- Replace the ID (in this example 123) so that it matches your page ID
- Save and preview in frontend
However, I strongly recommend that you use the Theme Builder instead since it’s much more convenient.
That’s all for today!
I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.
Related content: How to create a stunning footer with the Divi Theme Builder
Free course: Create a website from scratch with Divi
0 Comments