How to create a good Landing Page with WordPress and Divi

We do the unthinkable to get visits by improving the positioning of our blog at all costs and we publicize our articles, projects, courses, day and night, etc.

But what about the content and design of your pages? What is the use of attracting thousands of visits if your pages are not optimized and do not respond to the needs of your ideal reader?

Your visits will reach your blog, yes, but probably a high percentage of them leave as they have come. In other words, your blog will not convert enough and without conversion there will be no monetization.

My intention is to prevent this from happening to you, that’s why I have created an article about landing pages (also known as landing pages), highly optimized web pages that will help you like no other to retain your traffic and, incidentally, increase your conversions as much as you really need it.

Let’s see step by step how to create a lead generation or subscriber acquisition page in WordPress. For this we are going to use Divi, one of the best premium WordPress themes that exist, if not the best, and that is sweeping the market.

With Divi, the Divi Builder plugin is integrated for visual page layout. However, you can use Divi Builder with any other WordPress theme as well, so you can do exactly the same as what I will do here with Divi with the WordPress theme you are already using right now

We will see everything quickly and very simply, without absolutely any code, so that you can design it yourself without any problem.

If at this point you still do not know anything about Divi and its builder Divi Builder, I recommend you take a look at these two articles where I show you all the benefits and characteristics of these products

Anyway, don’t worry; you will have several videos where you will see in detail the operation of these tools, so you can get everything you need.

What is a landing page?

You may not be clear yet what exactly a changing page is. Don’t worry, he can explain it to you very easily and in a few words:

In online marketing, an autonomous page within a website, specifically created for a specific campaign (sale of a product, sale of a service, recruitment of subscribers with a free download on the home page of a blog, etc.) is called a landing page. ).

This is the page visitors “land” on after clicking an ad, search result, or other content designed to take them to that page.

The landing pages are designed with a single objective, known as a call to action or CTA (from Call to Action in English). For example: getting the click on the button to buy the product.

Therefore, the fundamental design principle in landing pages is to eliminate any distraction that jeopardizes that objective (social buttons, sidebars with links, etc.).

A good landing page design focuses on guiding the user to get them to follow the call to action. So conversions on landing pages are much better than on a “normal” page.

Structure and basic elements of a landing page

To develop your landing page I have divided our landing page into several sections, trying to include in it each and every one of the essential elements that every landing page must have.

These elements are:

  1. Unique Value Proposition (USP)
  2. Problem (P).
  3. Attention to).
  4. Solution (S).
  5. List of Benefits.
  6. Statement of support.
  7. Social Evidence.
  8. Closing argument.
  9. CTA Final.

First steps to make a landing page in WordPress

Choosing your color palette

One of the most important factors when designing not only on landing pages, but on any type of web page, is readability.

In order to make the experience of your users as easy as possible and to convert properly, your pages must be readable and this involves using contrasting colors and adequate typography.

Otherwise you will only be able to generate confusion and thereby decrease your conversion rate drastically.

In order to avoid this, we will use two complementary colors that are in perfect harmony and allow us to clearly differentiate any element on the page:

  • Red: # CB6063
  • Green: # 98C9C5

For the fonts we will use dark and light colors of the type:

  • Dark: #363e50 and #444444
  • Sure: #ffffff

To establish your color palette, I recommend using Paletton, a free online tool that is very simple but very practical, while it will help you achieve colors that are in balance and greatly facilitate reading.

Also, if you want to investigate more about the use of this tool and learn about certain aspects related to colors, I recommend this great article about colors and color harmony.

Previous settings on your landing page with WordPress and Divi

To start with the design of your landing page with WordPress and Divi we must establish a series of previous basic configurations, to eliminate the vanishing points.

Vanishing points are nothing more than links that lead to other pages of your website (such as those found, for example, in your navigation menu and your footer) or even to other websites external to your project.

We must get rid of all of them, otherwise we will increase the chances that your readers will abandon your landing page.

The result? A dramatic drop in your conversions. You will get fewer subscribers, you will generate less sales, etc…

Fortunately, with WordPress and Divi you have it really easy.

With a single click you can get rid of your navigation menu and footer precisely, on the page you really need.

You just have to access the back-end of your page and in “Page Attributes> Template” select “Blank Page” and you’re done.

How to create a landing page. Step by step example

1. Create the Unique Selling Proposition (USP)

In this first section we will include what is known as USP (Unique Selling Proposition) or Unique Selling Proposition, a key element in any landing page.

With the USP what we are looking for is to capture a brief and direct description of your offer, as well as the benefits associated with it.

Your USP will be made up of:

  • Title
  • Subtitle
  • Hero shot (offer image)
  • List of benefits
  • CTA

The idea of ​​your USP is to try to convert from the beginning thanks to the conviction power of the title, the subtitle and the benefits linked to your offer.

In this way we will avoid that your reader has to read all the content, get tired and end up leaving your landing page permanently.

In addition, with that CTA in your USP (that is, the button that once pressed will make your readers subscribe), plus the one that we will place at the end of your landing page we will ensure that readers find them easily and convert with greater probability.

Well then …. How to design your USP with Divi without complications?

Well, easy.

We will use the Divi Builder constructor and its design based on sectionsrowscolumns and modules:

  • Sections:are the elements that allow the layout process to start. They allow adding rows, as many as you need.
  • Rows: structure the content in columns with different percentages of widths. Inside those columns the modules will be installed.
  • Modules: they are the functional blocks. They allow adding texts, images, and buttons. All of them with specific functionalities.

In our case, what we will do is add a standard section, we will create rows within it and then we will implement modules with a specific purpose.

The section in this case will consist of a row with two columns:

  1. First column: we will include an image module with the author’s image.
  2. Second column: a text module with the title, another with the subtitle and one more, which acts as a CTA by including a short code in it that will display the pop-up panel.

Well then …. How to design your USP with Divi without complications?

Well, easy.

We will use the Divi Builder constructor and its design based on sectionsrowscolumns and modules:

  • Sections:are the elements that allow the layout process to start. They allow adding rows, as many as you need.
  • Rows: structure the content in columns with different percentages of widths. Inside those columns the modules will be installed.
  • Modules: they are the functional blocks. They allow adding texts, images, and buttons. All of them with specific functionalities.

In our case, what we will do is add a standard section, we will create rows within it and then we will implement modules with a specific purpose.

The section in this case will consist of a row with two columns:

  1. First column: we will include an image module with the author’s image.
  2. Second column: a text module with the title, another with the subtitle and one more, which acts as a CTA by including a shortcode in it that will display the pop-up panel.

Create the main title of our landing page

The first thing we have added is the headline, one of the most relevant elements of any landing page.

A title that attacks the reader’s pain points to cause an immediate power of attraction and provoke interest in the offer.

We choose an H1 element for it with the intention of promoting SEO and we use capital letters and a neutral white color to guarantee the legibility of this element.

All the design we will configure with Divi Builder through the design settings:

Create the subtitle of the landing page

To complete the headline, the ideal is to use a subtitle that provides extra information.

We follow the hierarchical structure for positioning and establish this element with the HTML H2 tag.

In this case we have used a dark color instead of a light one, to break the monotony and favor reading:

The call to action (CTA)

The Call to Action or CTA is the button that will allow the conversion to take place and, therefore, one of the most important elements of your landing page.

We have designed it with a reddish color (# CB6063) in harmony with the main green color (# 98C9C5) and that should be used mainly for the CTAs on the page.

It is also important to add the use of capital letters, a contrasting light color as well as texts that encourage the reader to take action:

Pressing this CTA will immediately show a pop-up with the subscription form so that anyone can subscribe.

How have we achieved this?

Well, with the Thrive Leads plugin, which is in my opinion the most complete opt-in form creation tool on the market:

Thrive Leads allows you to easily design a wide variety of opt-in forms according to your needs:

After its design you will get a shortcode that you must implement on your website as text. This will make it possible for you to press that button to display the pop-up with the form:

The “Hero Shot”

The Hero Shot is nothing more than an image that visually represents your offer, in this case a free guide.

These types of images are typical on landing pages, since they help something else to increase conversions, by giving a feeling of intrinsic value associated with the offer.

In my case, instead of adding it in the section with Divi Builder, I have included it in the opt-in form created with Thrive Leads:

The list of benefits

Many focus on showing the characteristics of the offer instead of the benefits associated with it. And this is honestly a serious mistake.

The characteristics of your product will help the conversion, but it is the seconds that really will make your landing page convert like no other.

And it is that your readers are not so interested in what your offer includes, but what they will get as a result of having acquired it.

In this case, we will locate these benefits in two different places within the landing page:

  • In the opt-in form itself, next to the Hero Shot.
  • Later, in a middle section of your landing page so that the reader can capture those benefits, in case you have not previously pressed the CTA.

Principles of design

In order to further improve subscription rates, we have applied two basic design principles for conversion, which are very simple but really work:

1. Directional Tracks

Directional Tracks are elements that facilitate the location of an area of ​​special importance; in our case, the place where your CTA is located.

We include an author image that points directly to that conversion area:

2. Encapsulation

With this principle, what we seek is to encapsulate or group that area of ​​importance in order to make it stand out from the rest and capture the attention of readers quickly.

We only have to apply a background with a color that contrasts with the background color of your section and that groups the most important elements of your USP, that is, your title, the subtitle and your CTA:

2. State the Problem (P) that we are going to solve

Once we have captured the attention of your reader, it is time to start connecting with him to increase the possibility of converting, as he accesses the content of your entire landing page.

We will do it through an old marketing technique known as “PAS” (Problem, Attention, and Solution).

What we are looking for with this technique is to subtly direct the reader to that part of our page that really interests us the most:

  1. Problem:In this first stage we will do our best to capture the reader’s attention by attacking their pain points.
  2. Attention: we maintain that attention by generating empathy and connecting more with that person.
  3. Solution: Finally, it is time to solve those problems and needs, revealing who you are and how you can help.

In this section we will focus on the first part and for this we will include a section with two rows:

  1. Row: two text modules with a title and subtitle.
  2. Row: four ad modules, which include those pain points of the ideal reader each, accompanied by an attention icon.
  3. To add those phrases that define the pain points of your ideal reader, we have made use of the Divi Builder ad modules since, thanks to their versatility, they allow you to add a title, text, icons or images in the same block.

3. Maintain Attention (A) connecting with the prospect

The next thing we will do is connect a little more with that person through empathy, making them see that you understand their frustrations but that there is a solution for each and every one of their problems.

I have included a row with two columns:

  1. Column: an image module that represents the author in “frustration mode”.
  2. Column: a text module with information about your past, a past with certain similarities to the current situation of the ideal reader.

4. Present Solution (S) to the problem

After connecting it is time to show the solution to all those problems: yourself. Who else?

Introduce yourself to your audience, explain who you are and why you are the ideal person to help them solve all the obstacles they will encounter along the way.

We only have to include two rows:

  1. Row: with a text module that includes a header element that impacts from the beginning.
  2. Row: with two columns:
    1. Column: a module (or two) of text so that you can include all the information about yourself and your story.
    2. Column: an image module about you in “success mode”.

5. List of benefits

The following are the benefits associated with your offer, an element that, as you already know, is essential in any landing page.

As I mentioned before, these were previously included in the opt-in form that is shown when clicking on the CTA.

To increase your conversions we will include it on your landing page directly, in an average area.

To implement them we use two rows:

  1. Row: two text modules to include a title and a subtitle for that section.
  2. Row: three ad modules related to three different themes. In each of them we include an icon or representative image of that theme, a headline and text describing what that reader will achieve by following you through your newsletter.
  3. Thanks to the Divi Builder ad modules we will add an icon for each of them, their title and corresponding content:

6. Statement of support

The following is the Statement of Support, which has a function and characteristics very similar to those of the holder.

The inclusion of this type of element is due to the “rush factor” that practically all Internet users have when accessing and reading the content of a page.

Because of this, we rarely read the content of the entire page, but instead do a visual sweep focusing on the elements that stand out the most.

For this reason, we should include an element similar to the headline in the middle of the landing page, which reinforces the main message and helps convert more.

In this section you will only need one row with a column that takes up the entire width.

Insert a text module there where it includes the previously named benefits or even add new ones if you consider it convenient:

To give more force to that declaration, we can optionally add another section with a row consisting of two columns:

  1. Column: in it we add text that reinforces the statement of support.
  2. Column: an image that visually represents the message that we want to transmit through an image module.

7. Social Evidence

The tests Social are an indispensable element in any landing page as it will increase your credibility more and with them the chances that your readers subscribe or acquire some of your products.

In this case we will include testimonials from clients who have worked with the author of the landing page as well as companies with which they have collaborated.

We will include a testimonial through two sections:

Section: formed by a row with two columns where you can add a testimony of great importance:

  1. Column: testimony image module
  2. Column: text module with written testimony

In the case of companies, we will add a section made up of two or more rows:

  1. Row: text modules for the section titles and subtitles.
  2. Rows: various image modules that include the logos of the companies with which the professional has worked.

If you want to add more than one, it would be possible to add a slider with testimonials that will be displayed one by one automatically:

8. Closing argument + final CTA

To finish, all that remains is to add the Closing Argument, an element with similar characteristics to the headline and that serves as a prelude to the final CTA, your last chance to convert.

You will only need in that section a row with a 3 modules:

  1. Text module: to include the text that complies with your closing argument.
  2. Text module (optional): to add previous information about your CTA.
  3. Text module: your final CTA, also created through a shortcode, in this case with the Thrive Leads plugin.

With all this you would already have your landing page designed and ready to convert, but as you may have doubts about the layout process, I leave you with a first video where I explain the whole process, step by step:

How to adapt your landing page on mobile devices with Divi

Once the design of your landing page is finished, you must adapt it to different mobile devices, that is, tablets and smartphones.

Fortunately, Divi makes it easy for you since it allows you to configure, for example, the sizes of your letters, as well as the height of the sections and rows on the different devices thanks to the options of its “Theme Customizer” tool:

Once these general settings are established, it is time to be more specific and for this Divi Builder helps you apply the necessary changes to each of the elements of your page.

  • With the constructor you can make changes to multiple options, such as:
  • With the constructor you can make changes to multiple options, such as:
  • Margin or separation of the basic elements of Divi (sections, rows and modules).
  • Filling those elements.
  • Size.
  • Font size.
  • Line height of the fonts.
  • Space between letters of those fonts.

With this you will get everything you need so that the content of your landing page adapts perfectly to different mobile devices.

Bonus: How to design your Squeeze Page with Divi

With everything seen above, I could end the article but I would like to go further and give you more value, to maximize your lead conversions in your project.

The truth is that this type of landing page will work better than any other poorly optimized page, but if you want to get subscribers every day you need a super optimized landing page that is synonymous with success.

A page that you can share anywhere, both online and offline, such as in conferences, in your presentations, etc…

I mean your Squeeze Page.

And is that all, absolutely all renowned online entrepreneurs have one and, honestly, I do not want you to be less.

For this reason I am going to show you the steps necessary to design your own Squeeze Page with Divi and, of course, without complications.

You think?

Go for it.

Basic structure of a Squeeze Page

To make your Squeeze Page correctly, always include the following elements:

  1. URL: the address of your page to host your Squeeze Page. I am not referring to including that address in your Squeeze Page, but rather that you create a URL that is easy to remember and that is directly related to your offer. Simply including such a structure is more than enough: https://www.yourdomain.com/gift.
  2. Title.
  3. Subtitle.
  4. List of benefits.
  5. Hero Shot.
  6. CTA with subscription form.
  7. Spam: a message to make it clear that you will not send spam to your subscribers.

Designing your Squeeze Page with Divi

The design process with Divi is much easier than that of a standard landing page, since your Squeeze Page will have fewer elements to include.

You only need a section with two rows:

  1. Row: formed by two text modules. In the first we will make it clear that it is a completely free product. In the second we will include the title of your Lead Magnet. In addition, we will add a separator to facilitate the readability of your page.
  2. Row: simply composed of two columns:
    1. Column: an image module that represents your Lead Magnet.
    2. Column: ad modules that act as bullets, plus a text module with the shortcode to display the form.
  3. As in the previous case, the subscription form is implemented through a shortcode within the CTA created with Divi Builder.
  4. Once this is pressed, a pop-up will be displayed with more information about the offer and the form:

 

The process is very simple and in a couple of minutes you will have a landing page ready that will shoot your conversions like no other.

And if you don’t believe me, take the test, design your own Squeeze Page, measure the conversions and tell me!

Conclusion

As you can see, designing a landing page in one afternoon is something that is practically available to anyone. If you feel like it and work, with what we have seen in this post you should already have enough information to make well-designed landing pages.

On the other hand, Divi and its visual constructor Divi Builder facilitate this task enormously and it also works perfectly with plugins for the design of opt-in forms such as Thrive Leads.

One last essential point is that you improve your conversions by implementing A / B tests. The degree of improvement that can be achieved is surprising. It is not uncommon in which, after several iterations, the conversions can be doubled or tripled.

Although in this post we have seen all the essentials, perhaps you want to delve further into the design of landing pages, the elements that make it up, design principles and other aspects such as the development of sales pages to monetize your business. If so, you already need a professional course like my How to Design Landing Pages to convert course.

In this course I explain the design with landing pages in an even more detailed way through 6 modules , with all the information necessary to design your landing pages, lifetime access to content, updates, exclusive discounts and extras that you They will help to greatly improve the design of your landing pages.

And of course, if you have any doubts, questions or problems, just ask them in the comments.

I’ll be happy to help you.

Arsalan Masoodhttps://arsalanmasood.com/
Internet Entrepreneur, Blogs Writer, Marketer, Social Media & SEO Expert. Passionate about WordPress Blogging, Digital Marketing and SEO. Founder & CEO of Virally Media Private Limited & BloggerGeeks

How to Migrate Blogger to WordPress – The Complete Guide

All are tedious, complicated and unappetizing, but they are nothing compared to migrating a blog from Blogger to WordPress.org without having nightmares and losing hair. So, because...

How to create a good Landing Page with WordPress and Divi

We do the unthinkable to get visits by improving the positioning of our blog at all costs and we publicize our articles, projects, courses, day and night, etc. But...

How to personalize your WordPress blog to the fullest with «shortcodes»

There are posts that really enjoy butt typing. This is one of those because it deals with a very, very useful topic: Learn one of the most powerful techniques that exist to customize WordPress,...

WordPress or Blogger (Blogspot): Which is the best for you?

When it comes to creating a blog or a website in general, WordPress and Blogger are still the two most popular options. But which one...

What is a WordPress plugin and what is it for?

If I had to lean towards any particular factor that makes WordPress.org a blogging platform superior to others, this would undoubtedly be WordPress plugins. Thanks to the plugins...

How to install WordPress step by step in 5 minutes

In this tutorial I am going to teach you how to install WordPress in a way that will serve you for any situation: a hosting server, a...