Free Download: Divi Fullscreen Contact Section with Animated SVG
Today’s freebie is the Divi Fullscreen Contact section layout with sliding in contact form, animated SVG and ripple effect on button click.
This section layout consists of two rows, the first one has the SVG image(downloaded from freepik.com), text, button and social media icons. The contact form is in the second row which slides in from the left when you click the Contact Us button.
The animations (including the SVG image animations) are implemented using the GSAP library (greensock.com). I could have used CSS for that but this lightweight JS library provides a lot more flexibility and saves you tons of time ones you get used to it.
Demo
How To Download
This download is available to our subscribers only, to download first you’ll need to subscribe via the opt-in form below and confirm your email and after that you will receive the Welcome email with the download link.
The existing subscribers don’t need to subscribe again, they always receive the updated Freebies Package immediately after its release.
Requirements
This section layout requires Divi v3.18 and higher.
Installation
The download .zip file includes all of the previously available free section layouts plus the new one – the Fullscreen Contact Section.
After you download the freebies .zip file, unzip it and find the divi-fullscreen-contact-section folder containing the JSON file and the README.txt file with installation instructions, please read it carefully.
I did not include the custom CSS and JS code into separate files but used Code modules to add them directly into the layout to make installation easier without having to deal with copying and pasting the code.
To install the Fullscreen Contact section first import the JSON file into the Divi Library.
Then open the page where you would like to have this section and add the imported section from the Divi Library.
Save it and you’re done, you can now customize and edit the content of the section.
How To Customize
In the Visual Builder you will be able to customize the section as usually, however, svg graphics won’t be rendered and the animations won’t take effect.
Make sure the custom CSS classes and IDs assigned to the section, rows, columns and modules are preserved, otherwise the section won’t function properly.
In case you accidentally delete any of them you can always check the README.txt file to find out the section elements’ classes and IDs, all of them are listed there.
Configuration
The CSS and JS code are added using Code modules, the code is documented well enough for you to be able to edit it if you need to change something.
I hope you’ll find the Fullwidth Contact section useful, subscribe now and download your copy for FREE. If you have any thoughts and suggestions please feel free to leave them in the comments section below.
Hello Ivan,
there seem to be an issue with the scrolling freezing on some iPhones (both safari and chrome).
The issue seems some what related to this stackoverflow issue: https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling
(Even though I cannot find that you are using -webkit-overflow-scrolling in your code)
So when the page is fist loaded, if I withing the first few seconds scoll by touching #dvcs_fr_main_row, I am able to scroll with no problems. After that I either have to touch #dvcs_fr_main_row multiple times to “activate” the scroll or touch the small tabs of #dvcs_fr_contacts on the sides (both left and right works).
When I first have managed to scroll, the scroll work flawless the rest of the session.
This problem also occurs on the demo page, if, and only if the site is loaded with the contact-block in view/at the top, the same happens here – so the issue is clearly related to this block.
I know it can be hard to test this if you do not have access to a iPhone 6, but do you have any suggestion on how I can solve this issue?
Hi Ivan!
Thank you for providing this valuable layout for free.
Is there a way to make the contact row containing two columns so that when in mobile view they also is stacked on top of each other like in the main row.
Thank is advanced!
Hi Paul.
But the Contact Form Row contains only a single column with a contact form in it, so it stays the same on all devices. Not sure if I understand your question correctly though.
Hi there,
i Installed the section and is all good but on iOS, when you click on the button it just refresh the page, everything works well on android
Hi Angelo. Did you try our live demo to check if it has the same issue?
Hi Ivan
I tried
IPad iOS 9 & 10
IPhone iOS 9&10
still the same problem
The new divi builder is buggy and can import this json file but not showing up anymore… Just cannot find the file within library to import into page…
The latest builder is weired and complicated and does load twice all the time with no more logic…
Hi dieter,
that’s a weird issue, you should contact ET support.
Hey Guys,
i subscribed to your newsletter and confirmed but i do not receive a mail with download links.
can your help me with that?
Thanks,
Yannick
Hi Yannick,
sometimes it may take a bit longer to deliver the email, please check your inbox back again later. Feel free to contact me if you still did not receive the email, I’ll check it for you.
This is epic – Thanks a TON!
Thank you, Christian.
Brilliant – love this !! Thank you Ivan :)
Glad to hear that. You are welcome :)