How to Hide the Header & Footer in Elementor Maintenance Mode

ElementorMaintenance Mode

When the maintenance mode page in Elementor is active, I used to encounter an issue where the header and footer of the website would show up, despite the maintenance mode being active. This is something that I didn’t want to happen, as the pages in the header and footer wouldn’t link anywhere, which would confuse a user visiting the website. I used to use some CSS to hide the header and footer, and it used to frustrate me that these were not hidden by default when the maintenance mode page was active, or that there was not an easy option to hide them too. That was until I discovered there is an option to hide them, but it is slightly hidden.

In this video, I demonstrate how to hide the header and footer while the maintenance mode page is active, without the need for any custom code.

Watch The Tutorial

Share

How to Create an Advent Calendar with JetEngine, JetPopup & Elementor

How to Create an Advent Calendar with JetEngine, JetPopup & Elementor

Build a festive Advent Calendar with JetEngine & JetPopup by Crocoblock, plus Elementor! Follow this step-by-step tutorial to add holiday magic to your site.
How to Create Scrolling Logos with JetEngine & Elementor

How to Create Scrolling Logos with JetEngine & Elementor

Learn how to create scrolling partner logos in WordPress using JetEngine & Elementor. Step-by-step tutorial for backend management with Listing Grid.
Thumbnail

How to Create Testimonials with JetEngine & Elementor

Learn how to create and display testimonials in WordPress using JetEngine & Elementor. Step-by-step tutorial for easy client management.
How to Create FAQs with JetEngine & Elementor

How to Create FAQs with JetEngine & Elementor

Learn how to create and display FAQs in WordPress with JetEngine & Elementor. Step-by-step tutorial for backend management and easy client updates.
How to Set Up a Maintenance Mode Page in Elementor Thumbnail

How to Set Up a Maintenance Mode Page in Elementor

Discover how to set up a maintenance mode page in Elementor to inform visitors and ensure they can't access the website until maintenance is complete.
How to Install Adobe fonts on Elementor Thumbnail

How to Install Adobe Fonts in Elementor

Learn to install Adobe fonts to Elementor websites with ease. Follow steps to integrate and enhance typography seamlessly on your website.
Hide Background Images on Mobile Devices Thumbnail

How to Hide Background Images on Mobile Devices in Elementor

Learn how to hide Elementor background images on mobile devices using custom CSS while keeping them visible on others. Perfect for responsive design!
How to install a custom font in Elementor Thumbnail

How to Install Custom Fonts in Elementor

Learn to install custom fonts in Elementor, covering font types, weights, and frontend integration for enhanced website design.
How to Change the Font Weight on a Specific Piece of Text in Elementor Thumbnail

How to Change the Font Weight on a Specific Piece of Text in Elementor

Learn how to emphasize specific text in Elementor paragraphs or headings by adjusting font weight with CSS classes. Enhance readability with this tutorial!
How to change the favicon in Elementor Thumbnail

How to Add a Favicon to Your Elementor Website

Learn how to add a favicon to your Elementor website for improved branding and user recognition in browsers and search engines.
How to change a global widget on specific elements Thumbnail

How to Style an Individual Instance of a Global Widget in Elementor

Learn how to style specific instances of Elementor global widgets with unique styles using CSS. Perfect for tailored designs without affecting other instances!
How to download files Thumbnail

How to Create a File Download Button in Elementor

Learn to create a file download button in Elementor with dynamic URLs and custom download attributes for seamless user experience.
How to Change the Font Colour on a Specific Piece of Text in Elementor Thumbnail

How to Change the Font Colour on a Specific Piece of Text in Elementor

Learn to highlight specific text in Elementor paragraphs or headings with custom colours using CSS classes. Enhance readability with this tutorial!