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
Comment *don’t work :-(
It worked! :)
I hate to sound repetitive but I also have not received the confirmation email.
As I have an account on divicio.us I then tried logging in first and then subscribing again (with the same data) — but no luck again.
I don’t think the hick-up is on my side, even more so because I remember that when I made my divicio.us purchase there was the same issue with confirmation emails not coming through. Eventually it got solved but it was both an unusual and an unpleasant experience.
Ivan, I think you’re doing great work but there roams a beast within your mailserver that you need to chase back in its cage.
Hi Marc.
I’m sorry about that, our email service provider had a major update these days and wasn’t functioning well for 2 or 3 days, and maybe they’re still experiencing some issues with delivery.
I’ve just checked the delivery status for your email address and it shows as delivered. Can you please confirm that?
Thank you and congrats on what seems to be a great freebie.
I have tried to subscribe and get your email/access to it without success. Just did it again now but, in case it does not work, please, add me up ;)
Hi Bruno.
Please confirm your email address, the email with download link will be sent after the confirmation.
Hi Ivan,
I am not sure where would you like me to confirm my email address.
I never got any email from divicio.us to confirm my subscription but I filled the “subscribe to download” CTA above with the same email I used here (to submit a comment) and in my original comment.
Please let me know how would you like me to confirm it, if needed, and I will do it again.
You need to confirm your email address via the confirmation email that has been sent to the email address that you subscribed with. If you don’t see it in your inbox, please check the spam folder as well.
I had done the Subscribe CTA 3 times with my Gmail account and never received the confirmation email and it was not in the Spam folder.
I succeeded with my corporate account and just confirmed my email.
Gmail may have blacklisted your provider or url in case you want to check that.
A few other Gmail addresses have been successfully confirmed and sent the download link today, so, I don’t think that Gmail has blacklisted us. Not sure why you cannot find the confirmation email, but I checked the delivery status for your email address and it shows as successful.
Anyway, I’m glad you’ve sorted it out using a different email. Thanks for subscribing.
I also didn’t receive the download link/files for the Fullwidth Header Section with a shade and zoom effect after signing up.
Sometimes it may take a bit longer for the Welcome email with download link to arrive, please check again later.
Hello, I susbscribed but I did not receive the email with the Fullwidth Header files. Is it possible to get it?
Hi Alfonso,
the email with download link has been sent, please check again.
can you use a 3rd party slider module instead of the full-width header module with this effect?
Probably yes, try adding the
dvcs_shade_effectCSS class to the section containing your sider module and thedvcs_fullwidth_header_effectclass to the module itself.A bit worried if this added function will slow browsing speed.
Will it?
thanks
Hi Kay.
No, it will not slow the browsing speed.
Hi Ivan
I have subscribed to your newsletter with a view to get the Fullwidth Header Section with the shade and zoom effect. I have confirmed my emaikl address but got links to the Divi Team Section Layouts with custom hover effects and Divi Filterable Portfolio Section Layouts with custom hover effects. I have not received a download link for the Fullwidth Header Section with the shade and zoom effect.
Hi Eitel.
I appologize for that, some of our new subscribers were getting the old welcome email not containing the download link for the Fullwidth Header Section with the shade and zoom effect.
I’ve resent the updated welcome email to these subscribers and to you as well, please check your inbox.
Thank you Ivan. I have received the updated email.
Kind regards
Eitel
That’s great, Eitel! Thanks for letting me know.
Never mind.
I went back to the original email I got form you and click the download button. All good! Cannot wait to try this…thank you!
Hi Dean.
You have already subscribed and confirmed your email before, that’s why you did not receive the confirmation email again. The existing subscibers(like you) do not need to subscribe again to download, they receive the download links in their inbox whenever there is anything new to download.
Glad you’ve sorted it out, feel free to use the layout in your projects :)
Applied my info in your fields to get this download. I guess you have a 2 step optin and 15 minutes later, I have not rec’d an email to verify my email address. So how do we download this if we cannot confirm email to complete the subscription?