Adding delayed button animations to any CTA can be an effective way to draw attention to visitors and, in turn, increase the likelihood of getting a click. In this tutorial, we will show you how to use Divi to create 8 delayed button animation for a custom header CTA. To do this, we will be combining animation settings in ways you may have never considered. Plus, these animations can be applied to almost any CTA button throughout your site.
Let’s get started.
Here is a peek at the 8 delayed button animations we will be adding to the custom header CTA in Divi:
Download the 8 Delayed Header Button Animations Layout for FREE
To lay your hands on the 8 delayed button animations from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.
Let’s get to the tutorial shall we?
What You Need to Get Started
To get started, you will need to install and activate the Divi Theme. Make sure you have the latest version of Divi.
You will need to download the Second Theme Builder Pack since we will be using the custom Header on the 404 page template from that pack for this tutorial.
After that, you are ready to go.
Importing the Template from the Second Theme Builder Pack
From the WordPress dashboard, navigate to Divi > Theme Builder. Within the theme builder, select the portability icon at the top right of the page. In the portability popup, select the import tab, choose the theme-builder-pack-2-404-page-template.json file and click the import button. (This import file will be inside the Second Theme Builder Pack folder)
This article was written by Jason Champagne and originally published on Elegant Themes Blog.