Landing pages are very important in affiliate marketing world. If you don’t have a landing page, you can’t advertise on Google. You can’t advertise on Facebook. You can’t advertise on YouTube you literary can’t advertise on any wide spread platform out there.
So if you do affiliate marketing you need a landing page and I’m going to show you the easiest method to create a landing page.
So here I’m going over a free method to create a landing page even tho there will be few one time expenses in case you’re just starting out and you don’t own any hosting/domain and a wordpress page builder so if you want to save money on this follow this tutorial.
Clickfunnels is the easiest way to quickly create sales funnels, unfortunately it requires decent investment for the beginners, up to $300 a month which, especially at the very beginners level could better spent.
To follow along tutorial you will need a to have domain and hosting and copy of the divi theme. In addition to it if you want to go to connect email marketing software and turn this opt-in page into landing page you will need Aweber – best email marketing software.
So let’s build your clickbank affiliate funnel finally!
Tools we use in this training:
- Siteground – domain registar and web hosting
- WordPress – is open source websites builder
- Divi Theme – simple drag & drop page builder that we use to create landing page and integrate your affiliate products with it
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.
1
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.
<style>/* Landing-Page-Default-Styles */
.sk_landing {
font-family: Arial, 'Raleway',Helvetica,Lucida,sans-serif;
color: #0a0a0a;
padding: 15px 0px;
}
.sk_landing.et_pb_section_0{
font-size: 16px;
}
.sk_landing h1 {
font-weight: 700;
font-size: 42px;
color: #0a0a0a;
text-align: center;
line-height: 1.3em;
}
.sk_landing .sk_image_light img{
border:3px solid #FFF;
}
.sk_landing .sk_image_dark img{
border: 3px solid rgba(0,0,0,0.7);
-webkit-box-shadow: 0 2px 5px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 0 2px 5px 2px rgba(0,0,0,0.4);
box-shadow: 0 2px 5px 2px rgba(0,0,0,0.4);
border-radius: 5px;
}
.sk_landing .et_pb_column_4_4 .et_pb_module {
margin-bottom: 10px;
}
.sk_landing .et_pb_bg_layout_light.et_pb_button {
padding: 0.3em 1em!important;
border: 1px solid rgba(0,0,0,0.2);
border-bottom: 2px solid rgba(0,0,0,0.2) !important;
background-color: #2168e6;
color: #ffffff;
font-size: 30px;
font-weight: 700;
}
.sk_landing .et_pb_bg_layout_light.et_pb_button:hover {
box-shadow: inset 0 2px 2px 0 rgba(255,255,255,0.22), 0 233px 233px 0 rgba(255,255,255,0.12) inset;
background-color: #2168e6;
}
.sk_landing .et_pb_bg_layout_light.et_pb_button:hover:after{
opacity:0;
}
@media only screen and (max-width:790px){
.et_pb_row{
width: 94%;
}
}
@media only screen and (max-width:700px){
.sk_landing h1 {
font-size: 37px;
line-height: 1.2em;
}
.sk_landing .et_pb_bg_layout_light.et_pb_button {
font-size: 23px;
}
}
@media only screen and (max-width:580px){
.sk_landing h1 {
font-size: 24px;
}
.sk_landing .et_pb_bg_layout_light.et_pb_button {
font-size: 22px;
}
}
/* Landing-Page-Button-Effects */
.sk_button_elevate{
transition:.2s;
box-shadow:0px 0px 0px 0px transparent
}
.sk_button_elevate:hover{
transform:translateY(-10px);
box-shadow:0px 8px 5px -5px rgba(0,0,0,0.25);
}
.sk_button_rocking{
animation:rocking 2.5s infinite;
animation-timing-function:cubic-bezier(0, 0, 0.62, 1);
transition:.2s;
}
.sk_button_rocking:hover {
animation: none !important;
}
.sk_button_bounce{
animation:bounce 1.5s infinite;
animation-timing-function:ease-in;
transition:.2s;
}
.sk_button_bounce:hover{
animation:none !important
}
@keyframes rocking{
0%{
transform:rotate(0deg)
}
25%{
transform:rotate(0deg)
}
50%{
transform:rotate(2deg)
}
75%{
transform:rotate(-2deg)
}
100%{
transform:rotate(0deg)
}
}
@keyframes bounce{
15%{
transform:translateY(0);
box-shadow:0px 0px 0px 0px transparent;
}
35%{
transform:translateY(-35%);
box-shadow:0px 8px 5px -5px rgba(0,0,0,0.25);
}
45%{
transform:translateY(0%)box-shadow:0px 0px 0px 0px transparent;
}
55%{
transform:translateY(-20%);
box-shadow:0px 5px 4px -4px rgba(0,0,0,0.25);
}
70%{
transform:translateY(0%);
box-shadow:0px 0px 0px 0px transparent
}
80%{
transform:translateY(-10%);
box-shadow:0px 4px 3px -3px rgba(0,0,0,0.25);
}
90%{
transform:translateY(0%);
box-shadow:0px 0px 0px 0px transparent
}
95%{
transform:translateY(-2%);
box-shadow:0px 2px 3px -3px rgba(0,0,0,0.25)
}
99%{
transform:translateY(0%);
box-shadow:0px 0px 0px 0px transparent
}
100%{
transform:translateY(0);
box-shadow:0px 0px 0px 0px transparent
}
}
</style>Right before saving make sure you add admin label CUSTOM CSS into this code module. To confirm you’re on the right way confim that your wireframe view matches the picutre below. If you preffer video over text tutorial check this video. (LINK TO YOUTUBE)
If your wireframe view looks like one above continue to designing the page. We are switching back to design mode and are about to add the content.
If your wireframe view looks like one above continue to designing the page. We are switching back to design mode and are about to add the content.
2
Design Your Landing Page
In 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.<i class=" fas fa-angle-double-down"></i>Code above will add great looking icon from font awesome set. If nothing is shown on your side that means that you didn’t integrate font awesome with your theme as of yet. To add font awesome into theme just navigate to divi theme options and integrations and add code below to the < head > of your blog.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/v4-shims.css">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.
Final in the second section add text module and create your footer links to terms of service and privacy policy so you comply with google, facebook and other platforms.
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.
3
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.
<style>/* YouTube-Bloom-Popup */
.et_bloom .et_bloom_form_container .et_bloom_form_container_wrapper {
border: 10px solid #2168e6;
}
.et_bloom .et_bloom_form_header .et_bloom_form_text {
box-sizing: border-box;
color: #0a0a0a;
font-family: Roboto, Helvetica, sans-serif;
font-size: 48px !important;
font-weight: 400 !important;
line-height: 1.3em !important;
overflow-wrap: break-word;
position: relative;
text-align: center;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content{
padding: 0px 30px 50px 30px!important;
background: #fff!important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email input {
font-weight: 200;
font-family: Raleway,Helvetica,sans-serif;
font-size: 20px;
line-height: 1.3em;
background-image: url(https://wordpresssociety.com/blogger/wp-content/uploads/2019/12/email2.png);
background-repeat: no-repeat;
background-position: 97%;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 0px !important;
color: black;
padding: 12px 18px!important;
box-shadow: inset 0px 2px 4px rgba(128,128,128,0.15),0px 3px 2px rgba(140,157,169,0.14);
}
.et_bloom .et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email input.et_bloom_warn_field {
-webkit-box-shadow: inset 0px 0px 0px 2px #e43b2c;
-moz-box-shadow: inset 0px 0px 0px 2px #e43b2c;
box-shadow: inset 0px 0px 0px 2px #e43b2c;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription{
background: #e43b2c !important;
font-size: 28px!important;
margin-top:20px;
padding-left: 40px !important;
padding-right: 40px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
border: 1px solid rgba(0,0,0,0.13);
border-bottom: 4px solid rgba(0,0,0,0.13);
box-shadow: inset 0 1px 1px 0 rgba(255,255,255,0.22);
overflow-wrap:break-word;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription:hover{
box-shadow: inset 0 2px 2px 0 rgba(255,255,255,0.22), 0 233px 233px 0 rgba(255,255,255,0.12) inset;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription span.et_bloom_button_text{
font-family: Raleway, Helvetica, sans-serif;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content .et_bloom_form_footer {
padding: 10px 0 0;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content .et_bloom_form_footer p {
text-align: center;
color: #2d2d2d !important;
font-size: 14px !important;
line-height: 1.4em;
font-family: Raleway, Helvetica, sans-serif !important;
}
.et_bloom .et_bloom_popup.et_bloom_animated:after {
background-color: rgba(237, 237, 237, 0.81);
}
/* YouTube-Bloom-Popup-Mobile */
@media only screen and (max-width: 700px){
.et_bloom .et_bloom_form_header .et_bloom_form_text {
font-size: 38px !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email input{
font-size: 16px;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription {
background: #259e01!important;
font-size: 20px!important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 20px!important;
padding-bottom: 20px!important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content .et_bloom_form_footer p{
font-size: 13px !important;
}
}
@media only screen and (max-width: 500px){
.et_bloom .et_bloom_form_header .et_bloom_form_text {
font-size: 28px !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email input{
font-size: 14px;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription {
font-size: 18px!important;
}
}
@media only screen and (max-width: 460px){
.et_bloom .et_bloom_form_header .et_bloom_form_text {
font-size: 26px !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email input{
font-size: 12px;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription {
font-size: 16px!important;
padding-left: 12px!important;
padding-right: 12px!important;
padding-top: 18px!important;
padding-bottom: 18px!important;
}
}
@media only screen and (max-width: 420px){
.et_bloom .et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email input{
font-size: 10px;
}
.et_bloom_form_container .et_bloom_form_content p.et_bloom_popup_input.et_bloom_subscribe_email {
font-size: 10px;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription {
font-size: 13px!important;
padding-left: 9px!important;
padding-right: 9px!important;
padding-top: 15px!important;
padding-bottom: 15px!important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content .et_bloom_form_footer p{
font-size: 12px !important;
}
}
</style>That’s us boys! Hope you love it! Cheers, Spiro!
0 Comments