Using Custom CSS to Hide Template Header and Footer on a page in Elementor

By Waicung in Elementor — Sep 11, 2023

Template Header and Footer are set to show on all pages with Elementor. While there is not setting to toggle it on/off. It is possible to hide using a single line of CSS

Photo by Sarah Dorweiler / Unsplash

Custom ID

add via Elementor Header/Footer Editor

Select the Whole Section
In the sidebar, Advanced->Advanced->CSS ID
set "custom-header" for the header; set "custom-footer" for the footer

Code

in the page's Elemenotr editing view, Settings(left bottom corner)->Advanced->Custom CSS, add the following code to hide both header and footer

#custom-header,
#custom-footer {
    display:none;
}