Free Download: Divi Fullscreen Contact Section with Animated SVG

by | Feb 22, 2019 | 2 comments

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.

Pin It on Pinterest

Shares
Share This