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

by | Apr 26, 2018 | 9 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

Pin It on Pinterest

Shares
Share This