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.

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

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)

gutenberg blocks - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

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)

Screenshot of my 'Why hire me?' landing page

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

Total Time: 10 minutes

  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.
    GeneratePress Theme - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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.

    wordpress customizer settings - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020 wordpress customizer settings astra - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

    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)

    wordpress title url - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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
    wordpress gp page layout settings disable elements - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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.

    wordpress block add group block - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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

    wordpress blocks add image block and center - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020
    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 posts
    Alt Text: What Is It and How Does It Work?
    OR
    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.
    WordPress h1 - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020
    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

    wordpress add button - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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.
    wordpress add image - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  11. Highlight key features

    Add a columns block; choose 3 column layout. Insert an image, heading and text for each feature.
    wordpress three columns - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020
    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.

    wordpress showcase - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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.
    wordpress quote - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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.
    wordpress privacy link - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

  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.
    WordPress spacing - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020

Finished product

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

Screenshot 2020 01 24 Why hire VJ – STARTER - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020
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.

ultimate add ons for gutenberg - Create an awesome Landing page using WordPress in just 15mins - Illustrated Guide Feb 2020
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

VJ - Vijay Rudraraju

Vijay Rudraraju (VJ)

I am web design and SEO consultant with over 12 years experience. I am obsessed with SEO, web design, WordPress, productivity hacks and page speed optimisation. I publish articles and tips to help you improve your online presence.

22 thoughts on “Create an awesome Landing page using WordPress in just 15mins – Illustrated Guide Feb 2020”

  1. You should take part in a contest for one of the most useful sites on the web.
    I am going to recommend this site!

    Reply
  2. Haven’t seen such a good post for some time. Thanks for sharing.
    town planning consultant, branding agency selangor

    Reply
  3. Haven’t seen such a good post for some time. Thanks for sharing.
    cloud data protection malaysia, property management company malaysia, and non destructive testing malaysia

    Reply
  4. I wanted to thank you for this excellent read!! I definitely loved every bit of it. I have you bookmarked to look at new things you post…

    Reply
  5. Haven’t seen such a good post for some time. Thanks for sharing.
    direct mercury analyser, custom packaging malaysia

    Reply
  6. Your work is so good I like Your articles writing your writing is so clear I liked it you are a great writer.

    Reply
  7. Appreciating the persistence you put into your blog and the detailed information you provide. Keep up the good work.

    Reply
  8. Thanks for this post. I really enjoy your point of view on this topic. Hope you are doing well.

    Reply
  9. Hey, this is a great post, so clear and easy to understand. All your hard work is much appreciated.

    Reply
  10. Great post, I learn something totally new and informative on websites I stumble upon every day. Thanks for sharing.

    Reply
  11. Long time reader, first time commenter — so, thought I’d drop a comment..
    — and at the same time ask for a favor.

    Your wordpress site is very simplistic – hope you don’t mind me asking
    what theme you’re using? (and don’t mind if I steal it?
    :P)

    I just launched my small businesses site –also built
    in wordpress like yours– but the theme slows (!) the
    site down quite a bit.

    In case you have a minute, you can find it by searching for “royal cbd”
    on Google (would appreciate any feedback)

    Keep up the good work– and take care of yourself during the
    coronavirus scare!

    ~Justin

    Reply
    • Hi Justin,
      I like simple and clean design and lightweight pages.

      Of course you can steal my theme!

      In the past I used to custom design my themes from scratch for every website that I built, that is until I came across GeneratePress, a lightweight theme that loads fast. I am using the premium version. I find the code quality of this theme is very good. Tom, the theme developer has also published this handy optimisation guide. Another great theme is Astra.

      When I check your website on https://tools.pingdom.com, there are certainly several opportunities to improve. Looks like you are using the shopkeeper child theme. Your site looks really well designed. Your site is now loading fast (1 to 2 seconds), but can be improved further.

      What causes slow site speed?

      1. Poorly designed/developed themes and plugins
      2. Feature bloat – installing a plugin to add a feature (that you may not need)
      3. Multiple and large CSS and Script files – browser takes a long time to parse through them. I notice 1.2mb of scripts are loaded for each page.
      4. Large high quality images

      What can you do to improve your site speed?

      1. Use the Autoptimize plugin and optimisation tips recommended by Tom above to see if your site speed improves – combining and compressing css and js files.
      2. Also try deactivating one plugin at a time to see if any plugins are poorly coded and if it makes a difference to your page speed
      3. Optimise your images before you upload them (using the ImageOptim app on a mac) or on your WordPress site using a plugin like ShortPixel Image Optimizer. OR use vector (SVG) icons
      4. Use the Gutenberg editor (rather than using page builders). If you need to custom design, use a lightweight block plugin like generateblocks

      Hope this helps!

      Reply

Leave a comment

 

Get in touch


VJ Design - Web Design Melbourne
Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Australia.
Tel : +61389867186
Email : hello@vjdesign.com.au

 Logo

Image of

$600-12000