Tools we use in this training:
How to create a landing page in WordPress
To continue on this stage you need to have wordpress installed and divi theme or divi page builder plugin activated.
Create a Landing Page and Apply Custom CSS
Let’s start by creating a new page, so hover over Pages and Click Add New. First you want to add your landing page title and inside page attributes select blank page as a page template.
Once done make sure to save draft and click to continue with editing click on use divi builder.
We are building this page from scratch so select building from scratch in blue tab then click single row column and one more time click single column row and finally insert text module.
In my previous wordpress landing page tutorial I used slightly different method to create a landing page, while this one will be much simpler.
So we are going to start by adding custom class in the section settings. So just add custom css class sk_landing.
Next we are going to create a new section. In this second section on the site add sames css class sk_landing then add single column row and code module.
Copy css code from below into your code module.
Design Your Landing PageIn the first section edit text module. Enter your landing page heading wrapped up with h1 tag. Then add new image module and upload your image. In this lander template I’ve integrated two image designs to activate them you have to go to advanced tab and then you can try and test them by adding css classes: sk_image_light or sk_image_dark. To match the design of the demo page add following settings to your module. Image and module alignment to center, sizing max-width to 400 and custom css class sk_image_dark. Next you wanna add a text field and enter code below.
Now save changes in divi theme options and continue creating your landing page by optimizing this text module, again to achieve demo look apply settings below.
Text size 55px and text alignment to center.
Now add button module. For this module I’ve added three different effects, elevate, bounce and rocking effects. To add these effects you have to add one of these three css classes sk_button_elevate, sk_button_rocking, sk_button_bounce to advanced tab css code.
To achieve demo look center align button set background color to #e43b2c and add custom css class sk_button_rocking.
Next add a text module and enter your message. Default one is (No Email Required!) and it’s bold.
As you can see this is clickbank landing page for offers that sell better without getting them to opt-in for email marketing, still if you want to get them opt in in your emails list check 3rd bonus step.
Add Popup Opt-In On Click With Bloom
To add a bloom popup opt-in into this form you need to simply do 2 things. You have to add custom css class get-access-now into your button advanced settings. And then setup your popup according to your needs with bloom. If you get stuck refer to this video.
As a bonus in this tutorial add this code below into new code module to get this great popup design.
That’s us boys! Hope you love it! Cheers, Spiro!