In this beginners friendly landing page tutorial, I will be teaching you how to design simple landing page using WordPress and Divi theme.
This means that in order to build landing page using tutorial you will need to have domain, hosting and a copy of the Divi theme.
Divi theme is currently number one most popular WordPress theme in the world – if you doubt this website is also built in Divi.
If you don’t have your domain and hosting as of yet use this link and get 70% discount with siteground.
Affiliate marketing in 2020 without landing page is almost impossible to do. Firstly you can not use paid traffic for your clickbank affiliate offers, second even free traffic doesn’t convert well without a warm up!
Tools you need to follow:
- 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
Table of Contents:
Create A Landing Page In 30 Minutes
Landing Page Building
Start by logging into your WordPress dashboard and once you’re inside your dashboard hover over Pages and click on Add New.
Now enter name for your landing page, Clickbank Lander 1 Demo, and before getting into page builder itself update template settings to Blank page. To start with page building click on use divi builder.
Once inside the builder click on build from scratch and then insert one column row and text module. Before adding content into page let’s first add all the custom css styles.
To do so, first go to wireframe view and first add new regular section, single column row and module Code. Next copy paste code below and before leaving update admin label to CUSTOM CSS.
<style>
.et_pb_row_0{
width: 90%;
max-width: 936px;
}
.et_pb_row_1 {
max-width: 936px;
}
.get-access-now {
width: 100%;
border: 1px solid rgba(0,0,0,0.2);
border-bottom: 3px solid rgba(0,0,0,0.2) !important;
}
.sk_button_elevate:hover {
transform: translateY(-10px);
box-shadow: 0px 8px 5px -5px rgba(0,0,0,0.25);
}
@media only screen and (min-width:980px){
.et_pb_row_0{
padding: 30px 120px 50px 120px!important;
}
.et_pb_row_1 {
padding: 20px 150px 20px 150px;
}
}
@media only screen and (max-width:980px){
.et_pb_row{
padding: 40px;
}
}
@media only screen and (max-width:580px){
.et_pb_row{
padding: 20px;
}
h1{
font-size: 24px;
}
body #page-container .et_pb_section .et_pb_button_0{
font-size: 24px;
}
}
</style>
Now before anything else if you wanna get same looking landing page first click on gear icon in blue and enter section settings and add your background.
Since my background icon is tiny I’m gonna update background image size to actual size and background image repeat to repeat. Before saving and leaving make sure to update admin label to name landing page and than save.
Next we want to update our row settings – here we only have to add white background and then save.
Continue by editing bottom section which we will use as a footer, so again start editing by clicking on gear icon in blue section.
First select background to color #0a0a0a, and then under design and spacing update top and bottom padding settings to 0px.
Since we using this section as a footer update admin label to footer area.
Now is time to edit landing page modules, so let’s start by editing text module first. Here are the updates.
Add/Edit Text Module
- In the content area add your h1 heading
- Edit heading font to Raleway, bold and center aligned
Add/Edit Video Module
- Add link to vimeo or youtube file
- Add overlay image for your video
Add/Edit Button Module
- First update button text to GET ACCESS NOW
- Under alignment center align
- In button settings use custom styles and update buton text size to 34px, button color to white, button background to color #259e01, button border radius to 0px, select your button icon, set padding top and bottom to 10px and left – right to 25px and add CSS classes sk_button_elevate and get-access-now
Add/Edit Text Module
- Add content into text area
- Update font to Raleway
- Update text color to #333 and center align text
By adding these you’re done with your landing page section, next is to edit bottom fotter area.
Add/Edit Text Module to footer area, single column row and paste footer content from box below.
<span style="color: #ffffff;"><a href="#Link_To_Privacy_Page" style="color: #ffffff;">Privacy Policy</a> | <a href="#Link_To_TOS_Page" style="color: #ffffff;">Terms And Services</a> | <a href="#Link_To_Testimonials" style="color: #ffffff;">Testimonials</a></span>
<p>
This site or the next page is not a part of the Facebook website or Facebook Inc. Additionally, this is NOT endorsed by Facebook in any way to claim your spot now. FACEBOOK is a trademark of FACEBOOK, INC.
</p>Keep Editing Text Module In footer area by updating text font to Raleway, text weight to light, text color to white, text size 12px and text alignment to center.
Save changes, congratulations this is a small victory! Your landing page is designed, now is time to move to the next step!
Email Marketing Setup
No time to rest yet we have to connect our landing page to Aweber. Aweber is best email marketing software available on the market as of times I’m writing this article.
If you already use different email software you can stay with it but I strongly recommend you to check Aweber, also if you use my Aweber link here, you will get 30 days FREE trial.
Bloom Popup Setup & Redirection
<style>/* YouTube-Bloom-Popup */
.et_bloom .et_bloom_form_container .et_bloom_form_container_wrapper {
border: 10px solid #0a0a0a;
}
.et_bloom .et_bloom_form_header .et_bloom_form_text {
box-sizing: border-box;
color: #2d2d2d;
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 #259e01;
-moz-box-shadow: inset 0px 0px 0px 2px #259e01;
box-shadow: inset 0px 0px 0px 2px #259e01;
}
.et_bloom .et_bloom_bottom_stacked button.et_bloom_submit_subscription{
background: #259e01 !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>
0 Comments