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!

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).