Create an awesome Landing page using WordPress in just 15mins – Illustrated Guide Feb 2020

Do I need to hire a designer or buy page builder plugins to build a landing page?

Nope. Here is an easy way to create an amazing landing page in WordPress in just 15 minutes without using any expensive tools or plugins that could slow down your site. No page builders or coding required. Let me show you step by step, how I built my Why hire VJ? landing page shown below -- Just using WordPress.

Screenshot of my 'Why hire me?' landing page
Screenshot of my ‘Why hire me?’ landing page

Landing Page in WordPress FAQs

What is a landing page and why build one?

A landing page, also known as a lead capture page or a destination page is a page that appears in response to users clicking on a link in a marketing email, social media promotion, search result in Google or an advertisement. Landing pages are used for lead generation. The landing page typically will focus is on only one particular product or service. Avoid all distractions such as menus, sidebars and footer links that may prevent the potential customer from taking action (buy, subscribe or call). Read more about Landing Page Web Design -- Turn Visitors Into Customers.

What is the difference between WordPress Block Editor (Gutenberg) and Classic editor?

Classic Editor
As a quick refresher, here’s what the Classic WordPress editor looks like:
The WordPress Classic Editor (TinyMCE)
A single pane to contain and control all your content.

New Gutenberg Editor
And here’s what things look like in the new WordPress Gutenberg editor:

The New WordPress Block Editor also known as Gutenberg

What is a block?

Essentially, Gutenberg replaces the single edit field of the Classic editor with lots of individual “blocks”. These blocks then allow you to build more complex designs than those allowed in the current WordPress editor.

So what’s a block?
Blocks are pieces of content that you insert onto your WordPress post or page. A block can be pretty much anything. For example, you can have blocks for:
-- Regular text (paragraph) – simply click and start typing
-- Images
-- Video embeds
-- Buttons
-- Tables
-- and many more
For a full list of blocks and how you can use them, visit the WordPress Blocks Support page.

Why use blocks?

Remember LEGO blocks? You could stack one block on top of the other to create a simple tower or an impressive cathedral.


Picture of LEGO blocks showing 2 different outcomes using the same blocks - a simple tower vs a cathedral
WordPress blocks are just like the LEGO blocks! The same blocks such as paragraphs, columns and images can be combined in myriad ways to create something awesome!
I can click on Block Navigation in the top toolbar to see how different blocks have been arranged.

Illustrating how blocks have been arranged to create this page

How to I add or modify blocks?

At its simplest
1. Click on the Add block button
2. Then either Search for a block or
3. Select the block from one of the categories (most used, common, formatting, layout, widgets, embeds, reusable etc)



For a full list of blocks and how you can use them, visit the WordPress Blocks Support page.

Want to give the new editor a try?
Visit the Gutenberg Editing Experience where you can see and play with all WordPress blocks.

Why should I use the block editor rather than a page builder?

The block builder has adequate options for creating advanced posts and pages.
You can easily create a great, well designed landing page as described in the post below. However, if you are keen to build a highly styled page, you’d be better off with a WordPress page builder like Elementor. Read more about How to build a Landing page using a Page Builder.
While page builders keep coming up with even more advanced design features, the flexibility of working with default editor and the speed with which my sites load encourage me to stick with Gutenberg. I can open the WordPress app on my mobile to perform a quick fix for example…
Also, I am not dependent on a plugin for core functionality.
Even if the block editor may not put the other page builders out of business in the immediate future, I realise that it may do so in another 5 years or so!


How to build a Landing page using the WordPress Block Editor (Gutenberg)

Reading Time:  10 minutes.

Let’s replicate my Why hire VJ? landing page using the block editor in WordPress (Gutenberg).

Screenshot of my 'Why hire me?' landing page

  1. Use WordPress block editor (Gutenberg)

    No plugins or page builders required, we will just use the standard WordPress block editor. See why in FAQ above.
    The New WordPress Block Editor also known as Gutenberg

  2. Choose a good theme

    It is good to use themes that were created specifically for the block editor. A few good ones include GeneratePress and Astra.
    I shall be using GeneratePress, but what I describe below works well with Astra as well. GeneratePress is my go to theme. At just 30KB, it is the perfect lightweight theme with:
    1. 200,000+ Active websites (downloaded more than 2 million times)
    2. 800+ 5 star reviews.

  3. Set some sane defaults using WordPress Customizer

    Use the Customizer to set defaults such as Typography, Colors etc. These defaults ensure that any pages (not just landing pages) look good.

    a. Customizer settings in GeneratePress Premium vs Astra.



    b. Select Layout > Container and set:
    -- Separating Space to 0 and
    -- Content Padding Top to 0
    This will remove white space from top of your page

    c. Select Colors > Body and set Background Colour to White.
    Ensure your theme and block colour palette includes your primary brand colour, secondary colour, plus white, black and gray.

  4. Add the title and modify the URL

    Once you enter the title and click Save Draft, Edit the URL (page link)

  5. Remove ALL distractions

    On the Document settings panel on the right, select Layout and make the following changes.
    -- Sidebars -- set Content (no sidebars)
    -- Footer Widgets -- set to 0
    -- Page Builder Container -- set to default/contained
    -- Disable Elements -- as illustrated below hide all distractions including Top Bar, Header (including the logo), Primary and Secondary Navigation menus, Features Image, Content Title and Footer

  6. Create a group

    The Group block is a container block, which allows you to group or nest multiple child blocks within it.
    For the moment it allows us to add background colour. In future, we will be able to set background gradients and images.

  7. Add small logo

    Since we have hidden the default header and logo, let’s add a smaller version of the logo.
    Select Add Block (+) and add an Image Block


    As shown above, don’t forget to add Alt Text (Alternative Text) to describe the image. The alt text is used by screen readers, which are browsers used by blind and visually impaired people, to tell them what is on the image.
    Search engines like Google place a high value on Alt Text to determine not only what is on the image but also how it relates to the surrounding text. Read the post -- Image SEO alt tag and title tag optimization

  8. Clear headline and supporting sub-heading

    Provide a clear headline that sells your services or product and set to a H1.
    Set text colour to white.

    Add a supporting subheading (paragraph/heading H2) and set its text colour to white as well.

  9. Call To Action (CTA)

    A call to action (CTA) is a button, image or line of text that prompts your visitors, leads, and customers to take action. It is, quite literally, a “call” for them to take an “action.” For example, “Contact Sales”.

    Examples of CTAs include:
    -- A button (link) to your contact page
    -- Embed a short form
    -- Download button to download an info product (pdf)
    -- Buy Now button that takes you to an eCommerec Cart.

    Let’s add a simple ‘Hire Me’ button:
    -- align it Center
    -- set its style to Outline
    -- background and foreground colours
    -- set order radius to 0 to create a square edged button

  10. Add custom promo image

    Add a promotional image.

    You could add a simple image or gallery of images. Another option is to use the Media and Text block to add text to the left or right of the image or the Cover Block where you can layer the text over the image.

    Let’s keep it simple and just add a custom image.

  11. Highlight key features

    Add a columns block; choose 3 column layout. Insert an image, heading and text for each feature.

    Leave the columns to default width (flexible). You can set the vertical alignment of contents in each column (default alignment is good). You can also align each item inside the column (image, heading or paragraph) to left, center or right (default alignment is good).

  12. Showcase your portfolio/brands

    Add a columns block; choose 3 column layout.
    Insert an image for each client/brand. Include a caption to explain further.

  13. Testimonials

    Convince your visitor to become your customer; add some testimonials.

    Add a quote block, add a citation, align it center and style it large.

  14. Privacy Links

    Add another Call To Action. Duplicate your CTA and drag it down.

    Include a link to your privacy policy and terms pages. Add a paragraph block, align it right, set text size to Small and create links.

  15. Adjust Spacing, move blocks and complete any final steps

    Make any final adjustments in Customizer.
    Add spacer blocks as required to push content away. Notice the use of 32px since my font size was 16px. Using the same spacing and colours ensures that your design is harmonious.

Finished product

Here is how the landing page looks. Visit https://vjdesign.com.au/why-hire-vj/

Screenshot of my ‘Why hire me?’ landing page
Screenshot of my 'Why hire me?' landing page
Screenshot of same page after adding some simple CSS code

I used some custom css code to improve the landing page with enhancements like shading for images, slanted background gradient (going from blue to pink) and button hover effects.

Did you add a block in the wrong location? -- move it easily

Use the Move Up and Move Down buttons or click and drag to move a block to another location.

How to build a Landing page using Additional Blocks (add-ons)

For more control over your design (without code), supercharge the Gutenberg editor by adding additional 3rd party blocks with more powerful features such as Ultimate Add-ons for Gutenberg and many many more.

Add-on blocks from the folks that created Astra theme

Visit the Gutenberg Block Library (a directory for locating blocks) to find more blocks .

Managing blocks

Upon adding add-on blocks, the Gutenberg Block inserter can quickly become cluttered. You may have no need for all of the blocks. Since they load scripts and styles, they may slow down your site. Use the Disable Gutenberg Blocks plugin to disable the blocks you don’t need.

How to build a Landing page using a Page Builder

Want complete control over your designs? Then build your landing page using a page builder.

Watch this review of top page builders

Detailed Guides/Videos for top page builders

Leave a comment