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.
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:
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:
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.
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.
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)
Let’s replicate my Why hire VJ? landing page (above) using the block editor in WordPress (Gutenberg).
Total Time: 10 minutes
-
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.
-
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.
-
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 pagec. 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. -
Add the title and modify the URL
Once you enter the title and click Save Draft, Edit the URL (page link)
-
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
-
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.
-
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 posts
– Alt Text: What Is It and How Does It Work?
OR
– Image SEO alt tag and title tag optimization -
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. -
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
-
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.
-
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). -
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.
-
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.
-
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.
-
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/
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
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.
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
- Elementor
- Divi
- Beaver Builder
- Brizy
A great article. Have not seen one for some time.
Nicely done article and interesting information. Thanks for your hard work on such a topic.
Nice article. It should be seen by more people. Thanks for sharing
Appreciating the persistence you put into your blog and the detailed information you provide. Keep up the good work.
Nice article you shared. Thanks for sharing.
Nice article you shared. Thanks for sharing.
Nice post, keep it up. Hope you are well.
You should take part in a contest for one of the most useful sites on the web.
I am going to recommend this site!
Haven’t seen such a good post for some time. Thanks for sharing.
town planning consultant, branding agency selangor
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
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…
Haven’t seen such a good post for some time. Thanks for sharing.
direct mercury analyser, custom packaging malaysia
Your work is so good I like Your articles writing your writing is so clear I liked it you are a great writer.
Good content, hope you well and keep it up.
Appreciating the persistence you put into your blog and the detailed information you provide. Keep up the good work.
Thanks for this post. I really enjoy your point of view on this topic. Hope you are doing well.
That’s interesting, you have done a great job. Thanks for sharing.
Good content, hope you well and keep it up.
Thanks for the feedback, I am glad you liked this post.
Hey, this is a great post, so clear and easy to understand. All your hard work is much appreciated.
Interesting article, thanks for the information.
Great post, I learn something totally new and informative on websites I stumble upon every day. Thanks for sharing.
Great article to read
Thanks Billy, I am glad that you found the guide useful.
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
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?
What can you do to improve your site speed?
Hope this helps!