Create Better Divi Headers

Free Download: Divi CTA Sections Expanding On Scroll

by | Sep 8, 2022 | 2 comments

The FREE Divi CTA Sections Expanding On Scroll are now available for download with our Freebies Package.

These CTA sections use Divi Builder native modules with some custom CSS and JS used to implement the expanding on scroll effect as explained in this tutorial.

There are three CTA sections available:

N

Expanding CTA Section #1: Text and Button

N

Expanding CTA Section #2: Contact Form

N

Expanding CTA Section #3: Opt-In Form

How To Download

These CTA section layouts are available to our verified subscribers only.

In order to download them you need to subscribe using the opt-in form below and confirm your email address.

After confirmation you will receive the Welcome email with the download link.

If you’ve already subscribed before then you don’t need to subscribe again, all our subscribers receive an email with the updated Freebies Package download link immediately after there is a new freebie released.

Requirements

These free Divi CTA sections require Divi v4+.

CTA Layouts Installation

After you’ve downloaded and unzipped the freebies file find the CTA sections directory inside, it contains the JSON files for these layouts.

First you need to import them into the Divi Library in Divi -> Divi Library.

Then open the page layout you want to add the expanding CTA section to and click the “+” button to add the imported CTA layout(s) from Divi Library.

On the Load From Library popup:

  1. Go to the Your Saved Layouts tab
  2. Select the Divicio.us Freebies category
  3. Select the CTA layout you need to add to your page.

After you’ve added the layout you can start customizing it if you need to. Then save your layout and that’s all, you don’t need to do anyting else.

How To Customize

You can customize the CTA layout in Divi Builder like any other Divi layout.

But you should not apply any settings that could potentially conflict with the expanding on scroll effect. Like Animation, Position, Transform and Scroll Effects settings, apply these settings with caution.

To customize the expanding effect JS and CSS please refer to this tutorial.

If you need any additional help or have any suggestions please feel free to leave your comment in the comments section below.

View Live Demos & Get Divi MadMenu

Download FREE Divi Sections

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!