{"id":29807,"date":"2023-04-26T07:57:16","date_gmt":"2023-04-26T05:57:16","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=29807"},"modified":"2023-04-26T08:04:07","modified_gmt":"2023-04-26T06:04:07","slug":"how-to-make-a-transparent-header-in-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/","title":{"rendered":"How to Make a Transparent Header In Divi"},"content":{"rendered":"\n<p>Are you looking for an easy way to create a transparent header in Divi?<\/p>\n\n\n\n<p>Look no further! With just 5 minutes of your time, you can make a transparent header in Divi. I provide detailed step-by-step instructions on how to do so in the most efficient way &#8211; allowing you to save time and not have to worry about finding resources elsewhere.<\/p>\n\n\n\n<p>If you are using the default Divi menu then creating a transparent header is just switching a toggle, but when you have created a custom global header in the Theme Builder then there is no such an option.<\/p>\n\n\n\n<p>In this tutorial, I will provide you with 3 solutions. The first 2 solutions are for headers that are created in the Theme Builder. One is for transparent headers that are not sticky and the other one is for sticky headers.<\/p>\n\n\n\n<p>If you are not using the Theme Builder but the default <a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-menu\/\">Divi menu<\/a> then I will explain to you how you can enable the transparent header.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#when-transparent-header\">When to use a Divi transparent header<\/a><\/li><li><a href=\"#how-to-make-a-transparent-header-in-theme-builder\">How to make a transparent header in the Theme Builder<\/a><\/li><li><a href=\"#how-to-make-a-transparent-header-on-scroll\">How to make a transparent header sticky on scroll<\/a><\/li><li><a href=\"#default-transparent-header\">How to make a transparent header in the default Divi menu<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"when-transparent-header\">When to use a Divi transparent header<\/h2>\n\n\n\n<p>A Divi transparent header is a sleek and modern way to showcase your brand and content. Adding transparency to your header design can create a unique aesthetic that sets your website apart from others. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"263\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example.jpg\" alt=\"Divi transparent header example\" class=\"wp-image-29816\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example-380x147.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example-300x116.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example-510x197.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example-155x60.jpg 155w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-transparent-header-example-233x90.jpg 233w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>The transparent header allows your visitors to see the background image or video clearly while still providing easy access to your navigation menu. This not only looks great, but it also makes your website more user-friendly.<\/p>\n\n\n\n<p>With Divi&#8217;s transparent header feature, you can easily customize the opacity level and add additional elements like a logo or search bar. Incorporating a Divi transparent header into your website design is a smart choice to achieve a professional and contemporary look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-make-a-transparent-header-in-theme-builder\">How to make a transparent header in the Theme Builder<\/h2>\n\n\n\n<p>This solution is for headers that are created in the Theme Builder and will not scroll down with the page content.<\/p>\n\n\n\n<p>If you want the transparent header to scroll down the page (a sticky header) follow the steps in the next chapter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Make the section and menu background transparent<\/h3>\n\n\n\n<p>Go to the Global Header in your <a href=\"https:\/\/www.markhendriksen.com\/divi-builder-plugin-review-by-elegant-themes\/\">Divi Theme Builder<\/a> and open the section of your header. Go to the background tab and make the background color transparent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"326\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent.jpg\" alt=\"Set the section background to transparent\" class=\"wp-image-29817\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent-380x182.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent-300x144.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent-510x245.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent-125x60.jpg 125w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-section-background-to-transparent-188x90.jpg 188w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Then open your Divi menu module and make the background color transparent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"326\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent.jpg\" alt=\"Set the menu background to transparent\" class=\"wp-image-29818\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent-380x182.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent-300x144.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent-510x245.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent-125x60.jpg 125w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-menu-background-to-transparent-188x90.jpg 188w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Give the section Position Absolute<\/h3>\n\n\n\n<p>Open the section and go to the Advanced tab, under position set it to Absolute, and choose the Location top center.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"326\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute.jpg\" alt=\"Set the position to absolute\" class=\"wp-image-29819\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute-380x182.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute-300x144.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute-510x245.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute-125x60.jpg 125w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-the-position-to-absolute-188x90.jpg 188w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-make-a-transparent-header-on-scroll\">How to make a transparent header sticky on scroll<\/h2>\n\n\n\n<p>With the previous method, the transparent header stayed static but if you want to make it sticky then you can follow these steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Make the section and menu background transparent&nbsp;<\/h3>\n\n\n\n<p>Make the header section background transparent and also make the background of the menu transparent. See step 1 of the previous chapter for images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Make the header section sticky<\/h3>\n\n\n\n<p>Open your header section and go to the Advanced tab, under Scroll Effects set Stick to Top. For tablet and mobile set this to Do Not Stick.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"325\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top.jpg\" alt=\"Set sticky position to top\" class=\"wp-image-29820\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top-380x182.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top-300x143.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top-510x244.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top-126x60.jpg 126w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Set-sticky-position-to-top-188x90.jpg 188w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add the CSS code<\/h3>\n\n\n\n<p>Add the following CSS code in Divi > Theme Options > CSS or in your <a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">Divi child theme<\/a> if you are using any.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>@media screen and (min-width: 981px) { \n.et-l--header {\n\n   margin-bottom: -70px;\n\n}}<\/code><\/pre>\n\n\n\n<p>The value -70px is the height of your header section. You have to adjust this value to the height of your header.<\/p>\n\n\n\n<p>The easiest way to find this height is through the inspector tool.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"310\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool.jpg\" alt=\"Header height in inspector tool\" class=\"wp-image-29821\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool-380x173.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool-300x137.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool-510x233.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool-132x60.jpg 132w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Header-height-in-inspector-tool-197x90.jpg 197w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Change the header background color<\/h3>\n\n\n\n<p>When you scroll down the page you likely want to give the transparent header a background color. To do this open your header section and go to the background, switch to Sticky tab and here you can change the background color.<\/p>\n\n\n\n<p>To learn more about sticky headers you can follow this tutorial &#8220;<a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/\">How to Create a Sticky Header in Divi<\/a>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"326\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab.jpg\" alt=\"Sticky tab\" class=\"wp-image-29822\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab-380x182.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab-300x144.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab-510x245.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab-125x60.jpg 125w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Sticky-tab-188x90.jpg 188w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"default-transparent-header\">How to make a transparent header in the default Divi menu<\/h2>\n\n\n\n<p>If you are using the default Divi menu and want to make it a transparent menu then follow these steps.<\/p>\n\n\n\n<p>In your WordPress Dashboard navigate to Divi &gt; Theme Customizer &gt; Header &amp; Navigation &gt; Primary Menu Bar &gt; Background Color.<\/p>\n\n\n\n<p>Set the transparency tab to 0.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"506\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu.jpg\" alt=\"Default Divi menu transparent menu\" class=\"wp-image-29824\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu-380x283.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu-300x223.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu-510x380.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu-81x60.jpg 81w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Default-divi-menu-transparent-menu-121x90.jpg 121w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>You will now have a transparent <a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\">Divi header<\/a>.<\/p>\n\n\n\n<p>To change the transparent background on scroll you can use the background color option in Divi &gt; Theme Customizer &gt; Header &amp; Navigation &gt; Fixed Navigation Settings &gt; Primary Menu Background Color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In conclusion, creating a transparent header in Divi is simple and easy to do. Whether you\u2019re using the default Divi menu or have created a custom global header, there are solutions that can save you time and energy.<\/p>\n\n\n\n<p>By following the step-by-step instructions outlined in this tutorial, you\u2019ll be able to create a transparent header for your Divi website in under 5 minutes.<\/p>\n\n\n\n<p>If you have any questions please let me know in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for an easy way to create a transparent header in Divi? Look no further! With just 5 minutes of your time, you can make a transparent header in Divi. I provide detailed step-by-step instructions on how to do so in the most efficient way &#8211; allowing you to save time and not [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":29825,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-29807","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 Make a Transparent Header In Divi (5 Minutes)<\/title>\n<meta name=\"description\" content=\"Learn how to quickly and easily create a transparent Divi header in the Theme Builder using this step-by-step guide.\" \/>\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-make-a-transparent-header-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 Make a Transparent Header In Divi (5 Minutes)\" \/>\n<meta property=\"og:description\" content=\"Learn how to quickly and easily create a transparent Divi header in the Theme Builder using this step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-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-04-26T05:57:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-26T06:04:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.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-make-a-transparent-header-in-divi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Make a Transparent Header In Divi\",\"datePublished\":\"2023-04-26T05:57:16+00:00\",\"dateModified\":\"2023-04-26T06:04:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/\"},\"wordCount\":858,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/\",\"name\":\"How to Make a Transparent Header In Divi (5 Minutes)\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg\",\"datePublished\":\"2023-04-26T05:57:16+00:00\",\"dateModified\":\"2023-04-26T06:04:07+00:00\",\"description\":\"Learn how to quickly and easily create a transparent Divi header in the Theme Builder using this step-by-step guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi Transparent Header\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-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 Make a Transparent Header 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 Make a Transparent Header In Divi (5 Minutes)","description":"Learn how to quickly and easily create a transparent Divi header in the Theme Builder using this step-by-step guide.","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-make-a-transparent-header-in-divi\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Transparent Header In Divi (5 Minutes)","og_description":"Learn how to quickly and easily create a transparent Divi header in the Theme Builder using this step-by-step guide.","og_url":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-04-26T05:57:16+00:00","article_modified_time":"2023-04-26T06:04:07+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.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-make-a-transparent-header-in-divi\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Make a Transparent Header In Divi","datePublished":"2023-04-26T05:57:16+00:00","dateModified":"2023-04-26T06:04:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/"},"wordCount":858,"commentCount":1,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/","url":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/","name":"How to Make a Transparent Header In Divi (5 Minutes)","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg","datePublished":"2023-04-26T05:57:16+00:00","dateModified":"2023-04-26T06:04:07+00:00","description":"Learn how to quickly and easily create a transparent Divi header in the Theme Builder using this step-by-step guide.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-Transparent-Header.jpg","width":720,"height":400,"caption":"Divi Transparent Header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-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 Make a Transparent Header 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\/29807","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=29807"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/29807\/revisions"}],"predecessor-version":[{"id":29831,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/29807\/revisions\/29831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/29825"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=29807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=29807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=29807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}