{"id":12359,"date":"2023-05-19T05:22:38","date_gmt":"2023-05-19T03:22:38","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12359"},"modified":"2025-04-24T06:40:04","modified_gmt":"2025-04-24T04:40:04","slug":"how-to-hide-the-header-and-footer-in-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/","title":{"rendered":"How to Hide the Header and Footer in Divi"},"content":{"rendered":"\n<p>In some cases, you might want to hide the\u00a0<a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\">Divi\u00a0header<\/a> and footer on a certain page or for your entire website. For example, on a landing page, you might want to hide the header for less distraction.<\/p>\n\n\n\n<p>You can hide the header and footer for the entire website or just for individual pages or posts. This can be useful for creating landing pages, sales pages, or other types of pages where you don&#8217;t want the header and footer to be displayed.<\/p>\n\n\n\n<p>There are different methods to do this depending on if you are using the default header and footer or if you are using the Theme Builder.<\/p>\n\n\n\n<p>This tutorial will show you how to hide the header and footer in Divi. I&#8217;ll cover two methods:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#method-1\">Method 1: hide the default header and menu<\/a><\/li><li><a href=\"#method-2\">Method 2: hide the header and footer using the Theme Builder<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"method-1\">Method 1: Hide the default header and menu<\/h2>\n\n\n\n<p>This method is for Divi websites that are using the default header and footer. I have different methods for you depending on what you like to achieve. You just need to place some custom CSS code snippets that I have already created for you.<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#hide-footer-and-header\">Hide the header and footer for an individual page<\/a><\/li><li><a href=\"#hide-header-website\">Hide only the Divi header for the entire website<\/a><\/li><li><a href=\"#hide-header-page\">Hide only the Divi header for an individual page<\/a><\/li><li><a href=\"#hide-footer-website\">Hide only the Divi footer for the entire website<\/a><\/li><li><a href=\"#hide-footer-page\">Hide only the Divi footer for an individual page<\/a><\/li><\/ul>\n\n\n\n<h3 id=\"hide-footer-and-header\">Hide the header and footer for an individual page<\/h3>\n\n\n\n<p>This method will hide both the header and footer for an individual page.<\/p>\n\n\n\n<p>Open the page in the backend where you want to hide the header and footer. On the right, you will find the page attributes, and under the template, you can choose the &#8220;Blank Page&#8221; template.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"321\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/07\/Hide-the-header-and-footer-with-the-blank-page-option.jpg\" alt=\"Hide the header and footer with the blank page option\" class=\"wp-image-12367\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-the-header-and-footer-with-the-blank-page-option.jpg 290w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-the-header-and-footer-with-the-blank-page-option-271x300.jpg 271w\" sizes=\"(max-width: 290px) 100vw, 290px\" \/><\/figure>\n\n\n\n<p>With this option, you can hide the header and footer from that page.<\/p>\n\n\n\n<h3 id=\"hide-header-website\">Hide only the Divi header for the entire website<\/h3>\n\n\n\n<p>This is for websites that are using the default header and you want to hide it for the entire website.<\/p>\n\n\n\n<p>Place the following CSS snippet in Divi &gt; Theme Options &gt; CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>#main-header { \n\tdisplay: none; \n}\n\n#page-container {\n\tpadding-top: 0px !important;\n\tmargin-top: -1px !important;\n}<\/code><\/pre>\n\n\n\n<h3 id=\"hide-header-page\">Hide only the Divi header for an individual page<\/h3>\n\n\n\n<p>If you want to hide the header from a particular page you can use the following snippet.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>.page-id-1098 #main-header { \n\tdisplay: none; \n}\n\n.page-id-1098 #page-container {\n\tpadding-top: 0px !important;\n\tmargin-top: -1px !important;\n}<\/code><\/pre>\n\n\n\n<p>You need to change the page-id number with yours. You can find the page-id number by going to your page in the backend and from the URL you will find your ID number.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"33\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/07\/Find-the-page-id-number.jpg\" alt=\"Find the page id number\" class=\"wp-image-12368\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Find-the-page-id-number.jpg 578w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Find-the-page-id-number-380x22.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Find-the-page-id-number-510x29.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Find-the-page-id-number-300x17.jpg 300w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<h3 id=\"hide-footer-website\">Hide only the Divi footer for the entire website<\/h3>\n\n\n\n<p>To hide the default <a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-footer\/\">Divi footer<\/a> on the entire website you can use this snippet.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>#main-footer {\n\tdisplay: none;\n}<\/code><\/pre>\n\n\n\n<h3 id=\"hide-footer-page\">Hide only the Divi footer for an individual page<\/h3>\n\n\n\n<p>To hide the default footer on an individual page you can use this snippet.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>.page-id-1098 #main-footer {\n\tdisplay: none;\n}<\/code><\/pre>\n\n\n\n<p>Change the ID number with yours the same way as for the header.<\/p>\n\n\n\n<h2 id=\"method-2\">Method 2: hide the header and footer using the Theme Builder<\/h2>\n\n\n\n<p>If you have created a global header and a global footer in the Theme Builder then this is incredibly easy to hide these.<\/p>\n\n\n\n<p>From your WordPress dashboard navigate to: Divi &gt; Theme Builder.<\/p>\n\n\n\n<p>You can click on the eye icon to hide the header or footer from the front end.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"427\" height=\"288\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/hide-the-Divi-header-and-footer-in-the-theme-builder.jpg\" alt=\"Hide the Divi header and footer in the theme builder\" class=\"wp-image-30241\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/hide-the-Divi-header-and-footer-in-the-theme-builder.jpg 427w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/hide-the-Divi-header-and-footer-in-the-theme-builder-380x256.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/hide-the-Divi-header-and-footer-in-the-theme-builder-300x202.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/hide-the-Divi-header-and-footer-in-the-theme-builder-89x60.jpg 89w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/hide-the-Divi-header-and-footer-in-the-theme-builder-133x90.jpg 133w\" sizes=\"(max-width: 427px) 100vw, 427px\" \/><\/figure>\n\n\n\n<p>This is for the entire website, if you want to hide it for an individual page then you need to copy the template and assign it to an individual page or post.<\/p>\n\n\n\n<p>Follow these steps to do that:<\/p>\n\n\n\n<p>Click on Add New Template > Build New Template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"269\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-new-template.jpg\" alt=\"Add new template\" class=\"wp-image-30243\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-new-template.jpg 394w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-new-template-380x259.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-new-template-300x205.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-new-template-88x60.jpg 88w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-new-template-132x90.jpg 132w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/figure>\n\n\n\n<p>Then assign this template to your page or post.<\/p>\n\n\n\n<p>You can use any of the options here but if you want to assign it to a specific page then hover over Specific Pages and choose your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"858\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template.jpg\" alt=\"Assign template\" class=\"wp-image-30244\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template.jpg 739w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template-380x441.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template-680x789.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template-258x300.jpg 258w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template-52x60.jpg 52w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Assign-template-78x90.jpg 78w\" sizes=\"(max-width: 739px) 100vw, 739px\" \/><\/figure>\n\n\n\n<p>Then click on Create Template.<\/p>\n\n\n\n<p>The template will still have the global header and footer so you have to disable the global function.<\/p>\n\n\n\n<p>Click on the 3 vertical dots and then on Disable Global.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"277\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Disable-global-header-and-footer.jpg\" alt=\"Disable global header and footer\" class=\"wp-image-30245\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Disable-global-header-and-footer.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Disable-global-header-and-footer-300x219.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Disable-global-header-and-footer-82x60.jpg 82w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Disable-global-header-and-footer-123x90.jpg 123w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/figure>\n\n\n\n<p>The global header will change to a custom header and now you can hide this for the page or post you have it assigned to.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"271\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/disable-global-and-hide-on-front-end.jpg\" alt=\"Disable global and hide on front end\" class=\"wp-image-30246\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/disable-global-and-hide-on-front-end.jpg 411w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/disable-global-and-hide-on-front-end-380x251.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/disable-global-and-hide-on-front-end-300x198.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/disable-global-and-hide-on-front-end-91x60.jpg 91w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/disable-global-and-hide-on-front-end-136x90.jpg 136w\" sizes=\"(max-width: 411px) 100vw, 411px\" \/><\/figure>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>In conclusion, there are two methods for hiding the header and footer in Divi: using the Divi Theme Builder or using CSS. The <a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">Divi Theme<\/a> Builder is a more visual method while using CSS is a more technical method.<\/p>\n\n\n\n<p>Both methods are effective, and the best method for you will depend if you are using the default header and menu or if you have created a global header and menu in the Theme Builder.<\/p>\n\n\n\n<p>I hope this tutorial has been helpful. If you have any questions, please feel free to leave a comment below.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-2e351e97 gb-headline-text\">You Might Also Like\u2026<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\">How to Create a Custom Divi Header<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-fix-divi-jumping-header\/\">How To Fix Divi Jumping Header<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-remove-or-change-the-divi-header-shadow\/\">How to Remove or Change the Divi Header Shadow<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/wordpress-speed-optimization-guide\/\">How To Speed Up Your Divi Website (Guide)<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">How to Make a Divi Child Theme<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":30248,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-12359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Hide the Header and Footer in Divi | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Hide the Header and Footer in Divi | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T03:22:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:40:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-hide-header-and-footer-in-Divi-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Hide the Header and Footer in Divi\",\"datePublished\":\"2023-05-19T03:22:38+00:00\",\"dateModified\":\"2025-04-24T04:40:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\"},\"wordCount\":817,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\",\"name\":\"How to Hide the Header and Footer in Divi | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg\",\"datePublished\":\"2023-05-19T03:22:38+00:00\",\"dateModified\":\"2025-04-24T04:40:04+00:00\",\"description\":\"In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to Hide the Header and Footer in Divi\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Hide the Header and Footer in Divi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Hide the Header and Footer in Divi | MarkHendriksen.com","description":"In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/","og_locale":"en_US","og_type":"article","og_title":"How to Hide the Header and Footer in Divi | MarkHendriksen.com","og_description":"In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.","og_url":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-05-19T03:22:38+00:00","article_modified_time":"2025-04-24T04:40:04+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-hide-header-and-footer-in-Divi-1.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Hide the Header and Footer in Divi","datePublished":"2023-05-19T03:22:38+00:00","dateModified":"2025-04-24T04:40:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/"},"wordCount":817,"commentCount":20,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/","url":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/","name":"How to Hide the Header and Footer in Divi | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg","datePublished":"2023-05-19T03:22:38+00:00","dateModified":"2025-04-24T04:40:04+00:00","description":"In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/Hide-header-and-footer-in-Divi.jpg","width":720,"height":400,"caption":"How to Hide the Header and Footer in Divi"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-hide-the-header-and-footer-in-divi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Hide the Header and Footer in Divi"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=12359"}],"version-history":[{"count":4,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12359\/revisions"}],"predecessor-version":[{"id":35703,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12359\/revisions\/35703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/30248"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=12359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=12359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=12359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}