Free Download: Divi CTA Section Expanding on Scroll (like on ElegantThemes.com site)
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
589,814 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web
We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!
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.
Thank you Ivan.
I really appreciate your work.
I do have a question, and I hope you are willing to help me.
I edited the color of the background to blue. This works fine.
But when I test it, the module still pops up as purple. How can I change the color of the module pop up when it is triggered?
Thanks a lot!
Hi Rich.
You can change the background color(gradient) of the content row (not the one with the SVG image but with content) in Row Settings -> Content -> Background.
To change the background color of the background overlay go to the overlay section settings(the section with the dvcs-highlighted-overlay class) and set the color using the Background setting.
Amazing, gonna apply it as soon as possible. Thank you!
Thanks so much for sharing this!
But I noticed a problem with the Divi Theme Builder. On all sites without a body layout it works fine. Like the shop site. But all “generated” pages like the product pages & product categorie pages got a problem – the overlay is kinda not working.
And I can’t find the issue in the CSS or JavaScript… Maybe you can help.
Or is it just not working with predefined layouts?
Your layout is in the footer area…
Thanks
PS: the website is still in construction
alptime.at – the CTA is working,
alptime.at/uebernachtungen it’s not working anymore…
Hi Jessica.
It seems to work for me on both of those pages. The issue might be related to the top offset trigger, the effect is triggered when the CTA section reaches certain point of the viewport while you are scrolling the page and if the CTA section is at the very bottom of your page layout and you are using a large screen then the CTA section may not reach the trigger point thus the effect will not be triggered.
You can try to experiment with different offset values on line 22 of the JS snippet(change the 600 to some larger value) and also move the CTA section up a bit in your page layout to ensure that the trigger point will be reached while scrolling.
Where can I find the JS snippet to change the offset values? Thank you in advance.
Hi Robbert.
JS code is added using a Code module. First add the layout to the page, then switch Divi Builder to Wireframe View mode and find the Code module with the JS code, it’s labeled accordingly.
This is great, you have done a really fantastic job of it. but I can’t download the layout! I get an error asking if I have JavaScript enabled. I have checked and it is enabled on my Chrome version. So how do I download the layout. I have tried Firefox with the same results.
Hi Jim. Fixed now, please try to download again. Thanks for the heads up.
Sorry but its doing the same thing. The download button link is https://divicio.us/tutorials/free-download-divi-cta-section-expanding-on-scroll/# which is the same page your post is on so I guess its still not working!
Issues with the reCAPTCHA, sorry. Please clear cache and try again, now you should be able to verify and download.
Hey Ivan! Thanks so much for this freebie – it’s brilliant!
Can you let me know how to save this in my Divi Library as a Section? For some reason it will only save as a Layout.
I’ve tried both options while saving – with the “Import Presets” box both ticked and not ticked.
When I tick the box, it saves – but as a layout.
When I leave the box unticked, it appears to save at first (as in, the form refreshes and I land back in my Divi Library dashboard) but the section doesn’t appear at all in my Divi Library list of items.
I’ve tried a bunch of times now, but can only get it to save as a Layout. But adding the Layout into my pages is causing problems when the page loads so I really need to figure out how to save it as a Section.
Would love if you can let me know what I’m doing wrong here!
Hi Leanne.
That’s correct, it’s a Layout (it consists of two sections) and cannot be imported as a Section. You can only add it as a layout to the existing page layout.
Hello Ivan,
I am trying to add the JSON file but it says ‘This file should not be imported in this context’. Can you tell me where I am doing wrong?
Hi Kanishk.
Try to import it into Divi Library and then add it to your page from the Library as section.
Hello Ivan,
Sorry, I’m learning as I go.. I downloaded the freebie, installed it, and it’s working.
I now need to customize the css. I can’t find where to edit the css. Sorry.
Please help.. thank you so much!
Hi Raine.
The expanding effect is set to trigger when the top offset of the CTA section is 600px (see the line 22 in the JS code provided above), so please make sure your section can be scrolled till that trigger point. Generally, the effect does not get triggered if the CTA section is the very last section on the page(or will only trigger on smaller screens in such a case), so, you may need to make sure the CTA section is not the last section or you can also try to adjust the 600 pixels offset to something larger.
You can find the custom CSS and JS of this section in the module labeled Code – CSS & JS (please check the section structure provided in the tutorial above).
Great work Ivan, really beautiful and exactly what I was looking for! Thanks
Thank you Ivan! Love it.
Hi Ivan, I’m understand that you are not obligated to provide timely support but i sure am desperate since my CTA stopped working all of a sudden (on my live website). It was working all fine but suddenly it disappeared today. It’s surprising, since only the overlay is working and the content just disappeared. I tried re-installing the json file but it’s not working. Please suggest since mine is a live business website (www.staffiohr.com). On this page, if you scroll down you will find the Expanding CTC section
Hi Sandy.
Your CTA section is actually there and it works fine but looks like the row containing the content of your CTA section is missing. Please check the CTA section structure above, there should be two rows in it: the CODE row and the CONTENT row.
Hi Ivan, A really helpful layout. I had downloaded the layout a month ago (the json file) and it was working all fine until today. It just seems to have stopped working. I again deleted and re imported the file to library but it doesn’t seem to work at all. Please suggest
Thank you so much man! Obviously you’re not obligated to give support for this free download lol but if you get time and it’s easy to see, could you tell me answer a few questions I had?
1, where are the circles behind the form located so we can remove or replace them?
2, How do we get that color to fill the background as the form pops up like it does with divi?
In case it helps, the site I’m working on is zz7.d1c.myftpupload.com/home-page/ and the form is halfway down the page.
Thank you!
Hi John.
1) those circles are the :before and :after pseudo elements of the dvcs_card_featured row, you can remove/customize them in the custom CSS of the freebie
2) the background is actually a second section having the dvcs-highlighted-overlay CSS class, looks like it is missing on your page
Please check the freebie’s structure graphics above.
Ooooh K I see; I exported the section from the page so I could add to an existing page without replacing content but obviously that was a mistake.
For the card_featured I just went through and deleted everything with that term in it so I hope that’s ok haha.
But 2 more questions then I’m out of your hair.
1. I don’t understand where the color of the highlighted overlay is specified; can it be altered?
2. If you go to the page I shared, can you tell why I’m getting that white background between the row and the overlay?
Thanks so much man.
nevermind I figured out that white thing so disregard item 2
But if you could tell me how to change the overlay color I would love you forever… even more ha.
thanks again
It is set in the Section Settings->Background
OH, MY, GAAAWWWWDDDD.
I kept looking at the first section smh.
Can you send me a place(s) you’d like reviews written?
Glad you’ve sorted it out :) You can submit reviews/testimonials using this contact form. Or simply tell people about this freebie, it’ll be much appreciated and helpful. Thank you.
You got it mate
You guys are so amazing! Thanks for helping us..
1 quick question do you know why I get this error?
Contacting your host and asking them to increase the following PHP variables may help: memory_limit, max_execution_time, upload_max_filesize, post_max_size, max_input_time, max_input_vars. In addition, auditing your firewall error log (such as ModSecurity) may reveal false positives that are preventing saves from completing.
I already disabled all plugins.. but still same issue.. Looking forward to hearing from you..
There are certain minimum requirements for Divi to function properly and looks like those requirements are not met on your host. Just do what the error says – ask your host to increase all those PHP variables. Or contact ET support, they will help you with this issue.
I already contacted Web Host Support and all System checks have passed already. But when I try to load from library, it gives me the same error..
You should better contact ET support so that they check it for you.
I’m glad it helped :)
It doesn’t work for me ;( Scroll down and nothing… Section overflow changed to hidden. Divi 4.0.2
Hi Pawel.
Tested with Divi v4.0.3 and its working fine. Make sure you follow the isntructions, it should work.
I don’t now what I’m doing wrong. Import in DIVI / DIVI Library => import/export, choose JSON file, then click import. after that I see blank page, need to refresh to see Library layout. Next step go to the page, click at three dots (…), next plus button (+) Load from library = > Your saved layouts=>CTA section. I see CTA section but when scroll down page it don’t “popuping” . What i’m doing wrong ?
YES!! Finally work :) The problem exist when CTA module was last on my page. When add another module bottom CTA it works :)
The CTA section needs to reach to a certain point while scrolling in order for the effect to be triggered, so, if the CTA section is the last section at the bottom then it may not get triggered because it cannot reach that trigger point. Glad you’ve figured that out.
Hi! Really like what you did here!
I was wondering, if I add this to my footer, how can I make it stay expanded as you reach the bottom of the page?
YOU ARE THE BEST BRO!
Thank you so much! Really, you are awesome!
Thanks, Colin! :)
Hi Ivan, beautiful work as always. I notice when i use this, though, that it adds a secondary scroll bar to the right of the page (its definitely because of the zoom in cta).
Any ideas how to remove that.
Cheers.
Hi nicholas.
It’s an overflow issue, try setting the
overflow: hidden;for section. Not happening on my end though.not sure if i can link it
candnpropertyrefurbishment.co.uk/kitchens-birmingham/
the bar only appears when i activate the zoom in cta.
i added the overflow hidden to the section and that didn’t work, I also added !important;
when i push f5 on your page (this one), for a brief second (on the right) i can see the mini scroll bar appear next to the other scroll bar. (see yourself) It is triggered by your code somehow but you are blocking it with other CSS.
Yes, I noticed it now too, thanks for heads up.
But the fix is very simple, as I’ve already said before, it is an overflow issue but not of the section but the page main area container(
#et-main-area). Try this:/* hide the #et-main-area vertical scroll bar */
#et-main-area {
overflow-y: hidden;
}
happy to have been of buggy help lol. No worries and thanks for the fix!
how can i change the hexagon at the back to my custom shape?
Thanks
Hi json.
The hexagon shape in the background is an SVG image, it is added using the Code module (labeled Code – SVG). You can create an SVG image and add it’s code into this code module.
can i create a custom shape with it? like the logo?
how to create multiple instances of the cta section? because i insert another, like two of them on the same page, but whatever changes i made on the second one also reflect on the first one.
No, you cannot create SVG images with this CTA section, Divi does not have such a functionality. You can create an SVG image with applications like Adobe Illustrator and use its code in this CTA section.
If you are making changes to the custom CSS of the second section, these changes will override the CSS of the first section because both instances of the CTA section have the same custom CSS classes applied to them. To avoid the conflict you’ll need to alter the CSS classes added to either the first or the second CTA section as well as in their custom JS and CSS accordingly.
Hi,
1. At the bottom right of the CTA there is a green circle. How can I move that circle to the top left of the CTA?
2. How can I remove the purple background of that section?
Hi David.
1. Find the
.dvcs_card_featured:afterselector in the CSS and modify therightandbottomproperties as per your needs, or set therightandbottomproperties toautoand add thetopandleftproperties with your desired values.2. The section backgound color and gradient can be changed in section settings(for not-expanded state) and if you need to modify the background gradient of the expanded row with CTA info then please edit the CSS (it is commented accordingly)
Thank you Ivan! Awesome.
You are welcome, Josh. Glad to see you here
hi link not working please update it
Hi Haroon,
make sure you check the reCaptcha checkbox before clicking the download button. Otherwise you won’t be able to download the file.
But how? This Design was Announced 4 days ago and you provide it to us that much fast.Amazing Work.You are a Great developer.
Thanks Samar. It turned out to be easier than I thought :)
i Love you, thanks for that tut
You’re welcome, Patrick :)
Dude, is beautiful! Thx so much to help us!
Glad to be helpful!