Create Better Divi Headers

Free Download: Divi Fullwidth Header Section with Shade Effect on Scroll

by | Apr 26, 2018 | 25 comments

Today’s freebie is a Fullwidth Header Section with a shade and zoom effect taking place on page scroll. When the page is scrolled down the Fullwidth Header content is slowly zoomed in and covered with a semi-transparent overlay (the “shade“). Scrolling the page up reverses the effect.

Also there is a nice jumping animation applied to the scroll down icon.

This effect makes use of some CSS and jQuery code. Check out the demo video below or click the button to view the live demo.

Demo

How To Download

This download is available to our subscribers only, to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.

Requirements

There are no any special requirements for this effect to work, however, it is advised to use the most recent versions of Divi.

Installation

The download .zip file includes the Fullwidth Header section layout JSON file and the custom CSS file as well as the README.txt file which you’ll need to read since it contains the installation guide.
The installation is straight forward. First import the JSON file of the section layout into the Divi Library.

Then add the CSS from the CSS file into the Custom CSS field on Divi -> Theme Options page or to you child theme style.css file.

Next, open the page or post where you would like to have the Fullwidth Header section and add the imported section from the Divi Library.

NOTE:

The background image used for the demo is not included in the download package, it comes with a placeholder image instead to keep the package lightweight.

Demo image source: pixabay.com

Save everything and you are done, enjoy!

Subscribe now and grab your copy for FREE.

Inspired by codepen.io

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!