Since the Divi sticky alternatives upgrade has actually been launched, we have actually been sharing pointers and techniques on how to utilize them throughout your site develops with Divi, and today, we’re including another one for you to bookmark! This tutorial will be everything about interaction. We’ll immediately put a custom-made header listed below each page’s hero area and turn that header sticky as quickly as visitors scroll past it, which leads to a gorgeous scrolling experience. You’ll have the ability to download the JSON declare totally free also!
Let’s get to it.
Prior to we dive into the tutorial, let’s take a glimpse at the result throughout various screen sizes.
< img loading=" lazy" class=" with-border aligncenter wp-image-139520 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area.gif" alt=" get header" width
=” 1000″ height =” 601″ >
Mobile Download The Design Template free of charge To lay your hands on the complimentary page design template, you will initially require to download it utilizing the button listed below. To get to the download you will require to sign up for our Divi Daily e-mail list by utilizing the kind listed below. As a brand-new customer, you
>< div class =" et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline" > You have actually effectively subscribed. Please examine your e-mail address to validate your membership and get access to complimentary weekly Divi
design loads! 1. Produce a New Page Utilizing Divi’s Upholstery Design Load Landing Page For this tutorial, we’re going to utilize the Upholstery Design Load and its totally free header and footer design template that you can download on the blog site. We’re utilizing this specific design pack, you can use this technique to any kind of site you’re constructing. To sneak peek the outcome while going through the tutorial listed below, we suggest you establish a page that you keep open in a different tab. To match the header and footer we’ll utilize, we’re establishing a brand-new page utilizing a design of option that includes Divi’s Upholstery Design Load.< img loading =" lazy" class =" with-border aligncenter wp-image-139523 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-10.jpg" alt=" get header" width=" 880" height=" 531" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-10.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-11.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-12.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-13.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > 2. Download & Set Up the Free Header & Footer for Divi’s Upholstery Design Load Download the Free Header & Footer on Our Blog site Next, we’ll download & the totally free header & and footer design template for Divi’s Upholstery Design Load. Installing this giveaway and downloading will assist us focus on the
essential part of this tutorial, which is getting the method. Browse to the e-mail optin kind and fill in your e-mail address as soon as you have actually gone to the blog site post. A download button will appear. This download button will enable you to download a zipped folder. You can discover a JSON file that consists of a default site design template with an international header and footer as soon as you have actually unzipped the folder.< img loading =" lazy" class=" with-border aligncenter wp-image-139524 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus2.jpg" alt= "get header" width =" 880 "height= "739" srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus2.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus2-300x252.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus2-768x645.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus2-610x512.jpg 610w" sizes=" (max-width: 880px) 100vw, 880px" >< img loading=" lazy" class=" with-border aligncenter wp-image-139525 size-full "src= "https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus3.jpg" alt=" get header" width=" 880" height=" 604" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus3.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus3-300x206.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus3-768x527.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus3-610x419.jpg 610w" sizes=" (max-width: 880px) 100vw, 880px" > Browse to Divi’s Style Contractor To utilize the JSON file you have actually simply downloaded, browse to your Divi Style Contractor.< img loading=" lazy" class=" with-border aligncenter wp-image-139526 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus4.jpg" alt=" get header" width=" 880" height=" 691" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus4.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus4-300x236.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus4-768x603.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus4-610x479.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Upload the Default Site Design Template with Header & Footer Styles There, click the import & export button in the leading right corner and submit the JSON file you can discover in your download folder.< img loading=" lazy" class=" with-border aligncenter wp-image-139527 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus5.jpg" alt=" get header" width=" 880" height=" 640" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus5.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus5-300x218.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus5-768x559.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus5-610x444.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" >< img loading=" lazy" class=" with-border aligncenter wp-image-139528 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus6.jpg" alt=" get header" width=" 880" height=" 610" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus6.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus6-300x208.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus6-768x532.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus6-610x423.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Produce New Page Design Template As quickly as you have actually submitted the design template, you’ll see an international header and footer appear inside your default site design template. To prevent odd header positionings, we’ll just use the” choose up sticky header” result to our pages, however if you have a Divi-built hero area on other customized post types too, feel complimentary to utilize the header there. Include a brand-new design template and utilize it on all pages.< img loading=" lazy" class=" with-border aligncenter wp-image-139529 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-1.jpg" alt="
get header” width=” 880
” height =” 563″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-1.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-14.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-15.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-16.jpg 610w” sizes =”( max-width: 880px) 100vw, 880px
- ” > Usage On: All Pages
< img loading=" & lazy" class=" with-border aligncenter wp-image-139530 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-2.jpg"
alt =” get header” width=” 880″ height= “968” srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-17.jpg 273w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-18.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-19.jpg 610w” sizes =”( max-width: 880px) 100vw, 880px” > Eliminate Header & Footer Design Template from Default Site Design Template As quickly as you include the page design template, the worldwide header and footer will immediately be contributed to that design template. We’re turning this international header into a customized header by eliminating the international header and footer in our default site design template. By doing this, the modifications we make to our header will just use to pages.< img loading=" lazy" class=" with-border aligncenter wp-image-139531 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus10.jpg" alt=" get header" width=" 880" height=" 581" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus10.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus10-300x198.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus10-768x507.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/apus10-610x403.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > 3. Location Header Area Below Hero Area Open Global Header Design Template Now that we have actually established the style contractor environment for our header, it’s
time to switch to our header design template by clicking the pencil icon.< img loading=" lazy" class =" with-border aligncenter wp-image-139532 size-full" src =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus1.jpg" alt=" get header" width=" 880" height=" 600" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus1.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus1-300x205.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus1-768x524.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus1-610x416.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Designate a Customized CSS ID to Area Within Global Header When inside the design template editor, you’ll see a header style which contains an area,
row and a number of modules. To instantly put the header listed below each page’s very first hero area, we’re going to require to designate a customized ID to our area. The strategy we’re utilizing is based upon a previous tutorial. The distinction in between this post and the one pointed out in the previous sentence is that as quickly as a visitor goes by the header, it’ll be turned sticky. It’ll take back its location listed below the hero area when individuals scroll back up. CSS ID: custom-header< img loading=" lazy" class =" with-border aligncenter wp-image-139533 size-full" src =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus2.jpg" alt =" get header" width =" 880" height= "896 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus2.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus2-295x300.jpg 295w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus2-768x782.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/bpus2-610x621.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Include Code Module Below Menu Module in Column 1 Continue by including a brand-new Code Module to the row’s very first column.< img loading=" lazy" class=" with-border aligncenter wp-image-139534 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-3.jpg" alt=" get header" width=" 880" height=" 363" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-3.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-20.jpg
300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-21.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-22.jpg 610w “sizes= “( max-width: 880px) 100vw, 880px” > Include JQuery Code to Location Area
Below Each Page’s First Area There, we’ll place some JQuery code that’ll instantly position the header area listed below each page’s very first hero area.
jQuery( function($) $( file). prepared( function() ) ;. ) ;
< img loading=" lazy" class= & "with-border aligncenter wp-image-139535 size-full" src =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-4.jpg" alt=" get header"
width=” 880″ height=” 980″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-4.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-23.jpg 269w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-24.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-25.jpg 610w” sizes=”( max-width: 880px )100vw, 880px “> 4. Use Sticky Position & Styles to Header Include Sticky Placing to Area Now that our area is positioned listed below each page’s very first hero area
- , it’s time to use the
sticky result too. To do that, we’ll utilize Divi
‘s integrated sticky settings in the innovative tab. Sticky Position: Stay With Leading< img loading= "lazy "class =" with-border aligncenter wp-image-139537 size-full "src =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-5.jpg" alt =" get header" width =" 880 "height= "989" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-5.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-26.jpg 267w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-27.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-28.jpg 610w" sizes=" (max-width
- : 880px) 100vw, 880px” >
- Include Sticky Box Shadow to Area
- Now that the sticky position has actually been used, we can begin making sticky modifications to our area
and all kid components it includes. We’ll begin by including a sticky box shadow to
our area container. Box Shadow Blur Strength: 30px Shadow Color. Default: rgba( 0,0,0,0) Sticky: rgba( 0,0,0,0.13)< img loading=" lazy "class="
- with-border aligncenter
- wp-image-139538 size-full “src=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-6.jpg”
alt=” get header” width= “880 “height=” 938″
srcset =” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-6.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-29.jpg 281w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-30.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-31.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Modify Sticky Row Gradient Background We’ll
- apply an use gradient background to our row. Color 1
: #ffffff Color 2: #e 8e8e8< img loading=" lazy" class =" with-border aligncenter wp-image-139539 size-full" src =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-7.jpg" alt=" get header" width=" 880" height
“( max-width: 880px) 100vw, 880px
” > Modify Sticky Menu Module Text Color We’ll open the Menu Module and alter the menu text color in a sticky state. Menu Text Color: # 2d2e34< img loading= "lazy" class=" with-border aligncenter wp-image-139540 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-8.jpg" alt= "get header "width=" 880 "height=" 969" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-8.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-35.jpg 272w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-36.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-37.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px" > Modify Sticky Menu Hamburger Icon Color We’ll customize the sticky menu hamburger icon color too.
- Hamburger Menu Icon Color: # 2d2e34< img loading=" lazy" class=" with-border aligncenter wp-image-139541 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-9.jpg" alt=" get header" width=" 880" height=" 990" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-9.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-38.jpg 267w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-39.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area-40.jpg 610w" sizes=" (max-width: 880px) 100vw, 880px" > Include Sticky Logo Design Invert Filter And we’ll finish the tutorial by including an image invert filter. That’s it! When you have actually used all these modifications to your header, make certain you conserve the design template and Divi Style Home builder modifications prior to seeing the result on the page you have actually developed in the very first part of the tutorial. Image Invert: 80 %< img loading=" lazy" class=" with-border aligncenter wp-image-139542 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/cpus6.jpg" alt=" get header" width=" 880" height=" 944" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/cpus6.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/cpus6-280x300.jpg 280w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/cpus6-768x824.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/cpus6-610x654.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Sneak peek Now that we have actually gone through all the actions, let’s take a last appearance
at the result throughout various screen sizes. Desktop< img loading =" lazy" class =" with-border aligncenter wp-image-139520 size-full" src
=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-get-your-divi-sticky-header-when-passing-your-pages-hero-area.gif” alt
=” get header
” width= “1000 “height=” 601″ > Mobile Last Ideas In this post, we have actually shared another idea and technique you can use with Divi’s integrated sticky choices. More particularly, we have actually revealed you how to “get” your header once you scroll past it. The header will be immediately put listed below each page’s very first area. If you have any tips or concerns, do not hesitate to leave a remark in the remark area listed below!
If you aspire to find out more about Divi and get more Divi giveaways, make certain you register for our e-mail newsletter and YouTube channel You’ll constantly be one of the very first individuals to understand and get advantages from this totally free material.