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
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.
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:
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
– Video embeds
– and many more
For a full list of blocks and how you can use them, visit the WordPress Blocks Support page.
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.
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.
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).
- 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 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.
- 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 post – 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.
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.
- 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.
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 .
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
- Beaver Builder