facebook_pixel

Recreating the Divi Landing Page with Animated Call to Action Button & Play Button

by | Oct 17, 2017 | Divi Tutorials | 4 comments

Welcome back for part two of our two part series on recreating the top section of the Divi landing page by Elegant Themes. In part one of this series, we showed you how to recreate Elegant Themes’ popup video with call to action button in Divi using our plugin Divi Overlays. And we gave a way the popup overlay layout for all Divi Overlays customers.

In today’s tutorial, we’re going to be recreating the section with the animated play button on hover, as well as the animated call to action button. And of course, we’ll be giving away the layout for you to download and install. 🙂

Take a look at the demo of what we’ll be creating by clicking on the button below!

Demo Site for the Tutorial

Let’s get started!

Want to download the free layout of this tutorial that you can use on your own site?

Click Here

Adding the Sections, Rows, & Modules

The first thing we’re going to want to do is create a new section, with a 1/2 1/2 column layout. Then, on the left column, insert a code module. This is where we’re going to insert the image. The reason we’re using a code module instead of the image module is we need to be able to add the HTML for the play button, and it’s much more difficult to do that with the image module.

Now, here’s what you need to insert into the code module:

Okay a couple things about the above code. You’ll notice that the image is src=”/wp-content/uploads/2017/10/1.jpg” which is a “relative” link path. You’ll need to download the image here, or use your own image instead. Once you download the image, go to your media library, and upload. Then, copy the URL (shown below), and replace the relative URL in the your code module with the URL of the image on your own website.

Okay, the next step is to add a Text Module to the right column of your layout. You can add the below text, or, add your own text instead:

Divi. The Ultimate WordPress Theme and Visual Page Builder

In order to get the styling the way we want. Navigate to the Design tab and make the following changes:

  • Text Font: Open Sans
  • Text Font Size:
    • Desktop: 60
    • Tablet: 42
    • Mobile 42
  • Text Text Color: #20292f
  • Text Letter Spacing: 0px
  • Text Line Height: 1em
  • Custom Margin:
    • Top: -10px
  • Custom Padding:
    • Top: 0px

 

 

Once you’ve made those changes in the design tab, you can go ahead and click save.

The next step is to add the button module below the text module in the right column. For the button text, you can add whatever you like, but to match the Divi page we added: Try it For Free

The Button URL can point to any page you want.

The next step is to click over to the Design tab of the module, and turn on the “Use Custom Styles for Button.” Here’s the settings we to change:

  • Button Text Size: 15
  • Button Text Color: #ffffff
  • Button Border Width: 2
  • Button Border Color: rgba(0,0,0,0)
  • Button Border Radius: 60px
  • Button Font: (click the B and TT icons for Bold and Uppercase)
  • Show Button Icon: No
  • Custom Padding:
    • Top: 20px
    • Right: 40px
    • Bottom: 20px
    • Left: 40px

 

 

You’ll notice we didn’t touch some of the settings such as background color. This is because we’ll control the background with CSS since it’s going to be animating.

The lat thing we need to do in the button module is add the following to the CSS Class filed in the Advanced tab: et-gallery-button–animated

 

The above step is VERY important! Without it, the button will not animate 🙂

Adding the Custom CSS

Okay now that the modules are all set up with the content and settings configured, it’s time to add the custom CSS.

So you have several options of where to put the below CSS.

  1. Copy and Paste it into the stylesheet of a child theme
  2. Copy and Paste it into the custom CSS box in Divi > Divi Theme Options (recommended for beginners)
  3. Copy and paste it into a code module within the layout between two style tags: <style> </style>

Aright that’s it! You should now have a layout section that looks almost identical to the Divi landing page top section, complete with the “growing” play button on hover, and the animated call to action button that changes background colors and “hops” every few seconds to grab attention.

But I imagine you’ll probably want to customize it a bit to match your own colors right?

So to customize the colors of the animated call to action button, simply change the background colors shown in this part of the CSS:

@-webkit-keyframes divi-button{
0% {
background: #7E3BD0;
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
background: #c73bd0;
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
47% {
-webkit-transform: scale(1);
transform: scale(1);
}
66% {
background: #3bd0c9;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
background: #7E3BD0;
}

The keyframes show the progression of the animation, and the styling that corresponds to that part of the animation progression. So at the very end of the animation (100%) the background color is #7E3BD0. 

Okay we’re done! Do you want to download the layout? Just click the button below. The video embedded above shows you how to import the layout (and customize it).

Want to download the free layout of this tutorial that you can use on your own site?

Click Here

Subscribe to Get the Divi Landing Page Layout

Want the layout we created in today's tutorial for free? You can easily import to your site and customize it with ease. Note: You will be subscribing to our email list, however you can unsubscribe at anytime. But I doubt you'll want to 😉

4 Comments

  1. Maciej

    Great tutorial. Thanks Tim!

    Reply
  2. Paul

    Fantastic Tim.
    Did i miss how to add the close icon (X) top-right of the video?
    Tutorial example can also be closed by clicking outside the actual video.
    Is this possible with any overlay popup?

    Great tutorial.

    Reply
    • Tim Strifler

      Hey Paul!

      Did you take a look at part one? If not, I recommend checking it out 🙂

      https://divilife.com/how-to-create-pop-up-video-in-divi-with-call-to-action-button-using-divi-overlays/

      Part one talks about the custom close button, and then you can also install the video layout and take a look at it for yourself. And yes, clicking the background will close any overlay. Sometimes the padding from the row will keep this from happening, but if you add the custom class close-divi-overlay to the section then that will fix it. Adding that class is also how you create custom close buttons. 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

We're creating more tutorials!

Subscribe and we'll notify you when we publish more tutorials and blog posts similar to this. :)

 

We protect your email & never spam.

You have Successfully Subscribed!