Hi, Divi peeps, in this Divi theme tutorial we’re going to be showing you how to create an expanding / zoom in CTA like the one you can currently find above the footer over on Elegant Themes very own website.

Elegant Themes did their very own tutorial on how to implement this cool little feature back in 2017, but they left out how to make it look prettier on smaller devices by utilising media queries with Divi, and the footer CTA has changed a little since then, so we decided to make an updated version.

divi theme call to action

This post will show you how to make the call to action match completely, leaving you with the “simple” task of tweaking around with the colour scheme of it to help incorporate it snugly into your website project. A tut isn’t a tut without a demo.

View Demo

Ok, let’s get started.

Step 1: Adding the Jquery

We’ll start off by adding the Jquery code required to get the call to action to expand when in view and shrink when out of view.

Head over to Divi, within the WordPress admin area, select theme options, then select integration. Add the code below to the head of blog section.

Divi head of blog

Put the Jquery code in the theme options integration panel, ‘head of blog’

<script>
jQuery(document).ready(function(){
    jQuery('#cta-section').waypoint(function() {
        jQuery('#cta-section').toggleClass('animate-cta');
    }, {offset: '80%'});
});
</script>

Step 2: Making the CTA with the Divi Builder

Now that you have your Jquery code in place, add a standard, one column section to your new Divi Builder page.

We’re going to select the section and navigate to the advanced tab to give it an #id.

In the css ID box write cta-section and save.

Then, open the row up and navigate to the advanced tab and give that a css ID too. Call it cta-row.

Finally, add a code module to the standard section and insert the following into the content box.

<div class="cta-info">
 
<h3>500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>
 
<p class="guarantee">We offer a 30 Day Money Back Guarantee, so joining is <span class="risk-free">Risk-Free!</span></p>
 
<a href="ENTER URL HERE" id="sign">Sign Up Today</a>
 
</div>

Step 3: Adding the CTA CSS

You should now have your page builder layout all set up, as well as your Jquery code in place. Here’s the CSS you’ll need to make the CTA look like Elegant Themes very own CTA.

/*****************************************************************
     Expanding CTA Divi Tutorials UK
*****************************************************************/
 
/*** style CTA section and row when waypoint is not triggered ***/

#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}

#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
 
}

/*** Style CTA section and row once waypoint toggles animate-cta class ***/

#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}

.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}

/*** style button ***/
 
#sign {
    display: block;
    width: 246px;  
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin: 0 auto;
	margin-top: 40px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}

#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}
 
/*** style content within the code module ***/
 
.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1120px;
    padding: 0 80px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
	padding: 0 50px;
	font-weight: 400;
}

.cta-info p.guarantee {
    margin: 30px auto 0 auto;
    color: #b2afff;
    font-size: 20px;
	font-weight: 400;
}

.cta-info .risk-free {
    color: #37e89a;
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
.cta-info h3 {
    font-size: 28px;
    line-height: 30px;
    padding: 0;
}
.cta-info {
    padding: 0 60px;
	}
}

@media only screen and (max-width: 420px) {
	.cta-info h3 {
		font-size: 20px;
		line-height: 24px;
	}
	.cta-info {
		padding: 0 40px;
	}
	#sign {
		width: 100%;
        max-width: 100%;
        min-width: 100%;
	}
}

/*****************************************************************
     Expanding CTA Divi Tutorials UK End
*****************************************************************/

Paste the CSS into your Divi theme options custom CSS box, or where ever it is you prefer to place your CSS.

Step 4 (Optional): Adding the same font style ‘poppins’

If you wish to use the same font style that’s used in the example, you’ll have to install the Google font by revisiting your theme options integration section and add this penultimate piece of code to the ‘head of blog’ box.

<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600" rel="stylesheet">

And, lastly, in your theme options CSS box, add;

body {
    font-family: "poppins";
}

And there you have it

You should now be the proud new owner of a tasty looking zoom in Divi CTA that looks great on desktop, tablet and mobiles. If you enjoyed this tutorial or have any issues or questions, please let us know in the comments below.

Stay tuned for more educational Divi tutorials and have fun with your brand new CTA.