Create Better Divi Headers

Free Download: Divi CTA Section Expanding on Scroll (like on ElegantThemes.com site)

by | May 24, 2019 | 76 comments

In this tutorial I’ll show how to create a Divi CTA section expanding on scroll like on the Elegant Themes website.

ET team has recently launched the new design of the elegantthemes.com site (which I find to be really nice), and one of the design elements that I liked the most is the new CTA section at the bottom of each page (for example, their home page) which is expanding when you reach to it while scrolling the page.

I wondered if I could replicate this CTA section expanding effect for Divi and did some reverse engineering of the effect by looking into source code.

Obviously, it was not possible to replicate the same effect on scroll by using just built in options of Divi, so I had to “borrow” the JS script and the accompanying CSS from the ET site source code.

So, all the credits go to ET team :) .

Below I provide both the CSS and JS code and show how to implement the effect using Divi(I had to make some adjustments to make it work with Divi).

But if you find the implementation too technical for you then you can skip it and simply download the layout (you don’t have to subscribe for that).

I’ve replicated the original design of the CTA section from the ElegantThemes site for demo purposes only, so, you should consider changing the design as per your needs.

Click the live demo button to scroll down to the CTA section demo to see it in action.

 

UPDATE: I’ve created a new tutorial about how to create Divi CTA sections expanding on scroll using a different approach.

You can check out the live demos of the expanding CTA sections created using that new tutorial and download them for FREE here.

 

CTA Section Structure

We’ll use two sections for the CTA, one for the content(labeled CTA) and the other for the background overlay which fades in when the CTA section expands.

There are two rows in the first section, the first row contains two Code modules containing the background SVG image, CSS and JS code, and the second row contains the Text and Button modules.

The second section(labeled CTA BACKGROUND OVERLAY) is completely empty, it has absolute positioning and covers the entire viewport remaining transparent untill the expanding effect is triggered.

Adding CSS Classes

First, let’s add the CSS classes to the sections and rows as indicated in the screenshot below.

The classes should be added into section and row settings Advanced -> CSS ID & CLASSES section.

Adding Custom CSS

Then add the following CSS.

For the demo layout I used the Code module to add both CSS and JS code so that they load only on the page where the layout is being used. But you can add the CSS into Divi Theme Options -> Custom CSS field as well as into the child theme style.css file, and the JS code into the Divi Theme Options ->Integration or your child theme JS code file.

Also it is much more convenient to have all the layout, custom CSS and JS in a single JSON file which makes the installation much easier, this way you don’t have to deal with adding the custom code manually.

/* Divi CTA Section Expanding on Scroll */

/* hide the horizontal scrollbar when CTA section expands */
#et-main-area {
  overflow-x: hidden;
}

/* CTA section */
.dvcs-highlightable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 5;
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  -o-transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

/* expanded CTA section */
.dvcs-highlightable.dvcs-highlighted {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

/* the row containing the SVG image */
.dvcs_card_featured_svg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}

/* SVG image */
.dvcs_card_featured_svg svg {
  position: absolute;
  width: 60%;
  margin-top: -15%;
  margin-left: -13%;
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}
.dvcs-highlightable .dvcs_card_featured_svg svg {
  opacity: 0.2;
}

/* the row with CTA info */
.dvcs_card_featured {
  -webkit-box-shadow: 0 48px 48px -32px rgba(23, 16, 159, 0.2),
    0 96px 96px -64px rgba(23, 16, 159, 0.4);
  box-shadow: 0 48px 48px -32px rgba(23, 16, 159, 0.2),
    0 96px 96px -64px rgba(23, 16, 159, 0.4);
  overflow: visible !important;
  -webkit-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
  transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
  z-index: unset;
}

/* expanded row with CTA info */
.dvcs-highlighted .dvcs_card_featured {
  background: -webkit-radial-gradient(
    top left,
    circle,
    #4a42ec 0%,
    #3a1567 100%
  );
  background: -o-radial-gradient(top left, circle, #4a42ec 0%, #3a1567 100%);
  background: radial-gradient(circle at top left, #4a42ec 0%, #3a1567 100%);
  -webkit-box-shadow: 0 48px 48px -32px rgba(23, 16, 159, 0.2),
    0 96px 96px -64px rgba(3, 2, 20, 0.6);
  box-shadow: 0 48px 48px -32px rgba(23, 16, 159, 0.2),
    0 96px 96px -64px rgba(3, 2, 20, 0.6);
}

/* background circle shapes */
.dvcs_card_featured:before,
.dvcs_card_featured:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.dvcs_card_featured:before {
  width: 32px;
  height: 32px;
  background: rgba(255, 123, 43, 0.5);
  top: -80px;
  right: 30%;
}
.dvcs_card_featured:after {
  visibility: visible;
  width: 440px;
  height: 440px;
  background: #34dd87;
  right: -100px;
  bottom: -80px;
  -webkit-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
  transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
}
.dvcs-highlighted .dvcs_card_featured:before {
  background: #ffad00;
}
.dvcs-highlighted .dvcs_card_featured:after {
  background: #60e4a1;
}

/* CTA background overlay */
.dvcs-highlighted-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  z-index: 4;
}

/* expanded CTA background overlay */
.dvcs-highlighted-hidden .dvcs-highlighted-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

/* Divi CTA Section Expanding on Scroll */

Adding Custom JS

Next let’s add the JS code.

The JS code consists of two parts, the first is a tiny jQuery plugin by Ben Alman(you can read more about what it does here), and the second part is just toggling specific CSS classes depending on the scroll position thus activating/deactivating the expanding effect.

<script type="text/javascript">
    /*
    * jQuery throttle / debounce - v1.1 - 3/7/2010
    * http://benalman.com/projects/jquery-throttle-debounce-plugin/
    * 
    * Copyright (c) 2010 "Cowboy" Ben Alman
    * Dual licensed under the MIT and GPL licenses.
    * http://benalman.com/about/license/
    */
    (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
  
    (function($){
        let $body = $("body"),
            $highlightable = $(".et_pb_section.dvcs-highlightable"),
            highlighted_class = "dvcs-highlighted",
            highlighted_hidden_class = "dvcs-highlighted-hidden";
            
        if ($highlightable.length) {
            $(window).scroll($.throttle(100, function() {
                var scroll = $(window).scrollTop(),
                    itemHeight = $highlightable.height();
                highlightStart = $highlightable.offset().top - 600;
                highlightEnd = $highlightable.offset().top + itemHeight / 4;
                if (scroll > highlightStart & scroll < highlightEnd) {
                    $highlightable.addClass(highlighted_class);
                    $body.addClass(highlighted_hidden_class);
                } else {
                    $highlightable.removeClass(highlighted_class);
                    $body.removeClass(highlighted_hidden_class);
                }
                if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
                    $highlightable.removeClass(highlighted_class);
                    $body.removeClass(highlighted_hidden_class);
                }
            }));
        }

    })(jQuery); 
</script>

How To Customize

You should have a working demo by now, all we need to do now is to add the content and design the CTA content section.

For the background overlay section just set a semi-transparent background color, nothing more.

The normal state(not expanded) of the CTA section can be customized in Divi Builder but for adjusting the styles of the expanded section you’ll need to edit the custom CSS.

The CTA section background circles appearance is also set in the custom CSS snippet.

Download and Install

If you don’t want to create the CTA section from scratch you can simply download the demo file and change the design as per your needs, might save you some time.

The CTA section layout is available for FREE downloading, you are not required to subscribe for that, just click the download button below.

Installation of the layout is straight forward, first import the JSON file into Divi Library and then add it to the page from the Library.

No need to add the CSS and JS code provided above as they are already included into the layout inside the Code module.

DEMO

That’s it, download your copy for FREE now and start using it in your projects. Feel free to share your thoughts and suggestions in the comments section below.

We Have More Freebies for You

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!