How to Create an “Expanding” CTA like Elegant Themes

Elegant Themes recently changed the design of their website to include some features worth imitating. In earlier posts, I wrote about how to implement the Elegant Theme blog design and duplicate the primary menu. But, for this post, I’m going to show you how to duplicate the Elegant Themes call to action (CTA). This CTA is located at the bottom near the footer of the Elegant Themes website. What is special about this CTA is the added functionality that triggers animation once the user scrolls to the element.

Today, I’m going to show you how to duplicate not only the style of this CTA but also the animation functionality. This is accomplished using Divi’s Code Module with some custom CSS and a a few lines of JavaScript. However, you can easily extend the same animated functionality on any of Divi’s modules.

Let’s get started.

Implementing the Design With Divi

Building the Call To Action Using the Code Module

Using the Visual Builder, add a new regular section with a fullwidth row column.

Next add the Code Module to your row.

Under the General Code Settings, add the following html to the content section.

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

This html will serve as the content for your CTA. You will notice the main CTA headline is wrapped in an h3 tag. The sub-headline is wrapped in a standard p tag. And the link (soon to be button) has a CSS ID called “sign”.

Also a div with the class “cta-info” is wrapped around the content. This is important for styling purposes later on.

Save Changes

Now we need to add a new CSS ID to your new section. Click the section settings icon to open the section settings.

Under the CSS tab in Section Settings, add the CSS ID “cta-section” and save your changes changes.

Next we need to add a CSS ID to your row. Click on the row settings icon.

Under the CSS tab, update the row settings with a new CSS ID called “cta-row”.

Save changes

That’s all we need for the layout of the CTA. With our content in place and our CSS ID’s, we are ready to add some custom CSS.

Adding the Custom CSS

Go to Divi → Theme Customizer → Additional CSS (or you can update your child theme’s style.css file directly). Inside the code box, add the following CSS:

/* Animated Call To Action */

/*** 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: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-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: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

Now your CTA is starting to look the part. All that we have left to do is add a short script in order to give the CTA that eye-catching animation effect once the CTA in visible in your browser’s viewport upon scrolling.

Adding the Waypoint Script to Animate the CTA When Scrolling to the Element

One of the easiest ways to trigger a function when you scroll to an element on your page is by using the JavaScript library called Waypoints. Since Divi already comes with Waypoints installed (yay!), all we need to do is include a script that utilizes the library.

Go to Divi → Theme Options → Integration and paste the following script in the section “Add code to the head of your blog”.

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

This script is adding a function that will toggle a class called “animate-cta” when you scroll to the CTA section (with the CSS ID “cta-section”). Notice the part of the code that designates the offset as 80%. This means the function will be triggered when the top of the CTA section is 80% from the top of the browser window. If you want to delay the function to trigger when the CTA reaches the middle of the page, you could change the offset value to something like 50%. However, if your CTA is going to be at the very bottom of the page, you should stick with a value closer to 80% – 90%. This is because your CTA may never reach the middle of your browser window when scrolling and, therefore, will not be triggered.

That’s it!

Now let’s take a look at the finished project.

Adding the CTA Functionality to other Modules

If you want to add this CTA functionality to other modules within the Divi Builder, this is fairly easy to do. Here are the steps to get you started:

1. Create a standard section with a fullwidth (single column) row.
2. In Section Settings, under CSS, add the CSS ID “cta-section”.
3. In Row Settings, under CSS, add the CSS ID “cta-row” AND add the Column CSS Class “cta-column”.
4. Insert the following custom CSS:

 .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

5. Add any module you want to the row (ie. Call to Action Module) and style it accordingly. You may want to add transparent backgrounds to your module so that it won’t over lap the section background color of your CTA.

Important Note: You can’t add more than one CTA with this function per page.

Final Thoughts

Duplicating Elegant Theme’s CTA is a useful feature to add to any future project. It grabs the reader’s attention without being too overbearing. Using the Code Module gives developers more flexibility to add custom html within the CTA. And, the waypoint animation functionality is not limited to the Code Module.  You can also add the necessary CSS ID’s to any section, row, and column to create CTA’s with any any module using the Divi Builder.

I look forward to hearing from you in the comments below.

Cheers!