Creating a landing page with a block theme

In this tutorial, we will define what a landing page is, create a custom template and build two landing pages using different methods.

Learning outcomes

1. Identify the elements of a landing page.
2. Create a custom template.
3. Build a landing page using a variety of blocks.
4. Choose and insert a call-to-action pattern.

Comprehension questions

1. What is the purpose of a landing page?
2. Why do you need to create a custom template for your landing page?
3. List the advantages of using patterns.

Transcript

Good day and welcome to Learn WordPress. In this session, we will create a landing page with a block theme. We will define what a landing page is. Secondly, create a custom template and then lastly, build two landing pages using different methods.

A landing page is a marketing page. It is a dedicated page on a website that you land on from an external source such as an advertisement or email. The main purpose of a landing page is to encourage visitors to take action, which can be to sign up for a service, buy a product, join a mailing list, etc.

The four elements of a landing page is to have a proposal, a call-to-action, to show the advantages or benefits and to include testimonials. So let’s start at the top. The proposal tells users why they should take action. The call-to-action button is the most important part of the page, and you must make it obvious and make it stand out. Thirdly, sell the benefits of the product and lastly, what do your clients say? Testimonials or social approval offer trust to those people coming to visit your website or prospective clients.

Let’s look at the landing page I’ve created. You will notice there’s no header or footer, as landing pages often hide distracting elements found throughout the site. We are therefore going to create a custom template. Remember, templates are designs for pages and can usually include template parts such as headers and footers, and for a landing page, we are going to remove the template parts or the header and footer to avoid any distractions.

To create a custom template make your way to Pages, open the page that you’ve created for your landing page. In the sidebar settings, you will notice this page has been assigned to the default template, which is the page template and all pages with this template will share the same header and footer. But we want a unique template for our landing page. To do that, click on New and then name it appropriately. This will take you into Template Editing Mode. Now I will go ahead and remove the post title, the header as well as the separator. We will leave the Post Content block in place because all content we add to our page will be displayed through the Post Content block. Then we can go ahead and click Save.

Now we will make our way back to the page and start creating. At the top I will add a Cover block as our featured image and insert an image from our Media Library. Then I will select the block and change the alignment to full width and enlarge the block. Next, I will add the logo of the company as an image. I will make it smaller and then use a Spacer block to push it to the top. And the last step is to change the opacity to zero.

Next, I’m going to add a Columns block and choose two equal columns. Then I’ll go to the List View, select the Columns block and change the alignment to full width. In the left column, I’m going to add a Paragraph block and then add a heading with my proposal, and in this case, I’m going to say Bookkeeping Made Easy. Thereafter, I will change the size of the heading to 66 pixels and then add more information. I also want to change the size of this text to large, and once I’ve done that, I will hit Enter and insert some social icons. And now you can click on the Inserter and add your social icons one by one. And don’t forget to add the URL link to your social platform. And lastly, I’ll change the size to large and the justification in the sidebar settings to centre.

For my call-to-action I want people to submit their email addresses so I will need a plugin. So once you’ve updated your page, you can make your way back to the dashboard, click on Plugins, Add new and on the right-hand side search for a forms plugin. As you will notice there are many options to choose from. I’m going to go ahead and install the contact form by WP forms and once installed, click on Activate. Now I will create my first form and choose the Opt-in form template. I want people to share their first name, last name and email. So once you’re ready, click on Save. Then we will go back to the dashboard and open our landing page.

Now it is time for our call-to-action. The first thing I will add is a heading that says Get a free consultation, and I will make that bold. Then I will add the Forms block that we’ve just created. Click on WP forms and select the Opt-in form. In the right column, I will add an image that will cover the entire space. Once I’ve made it slightly smaller, I will also use the block toolbar to change the alignment to the centre and then click on the List View, select the Columns block and change the background colour.

To highlight the benefits I’m going to add a heading and call it Why choose us, and then I’ll change the alignment to centre. Once I’ve done that, I will insert a Columns block and choose three equal columns. Then I’ll click on the List View, select the block and change the alignment to full width. I’ll start with the left column and firstly insert an Image block and once I’ve selected the image, I will change the image dimensions to 25% and the alignment to the centre. Once I’ve inserted a Paragraph block below the image, I will add some text or one of the benefits. I’ll make it bold and align it to centre and now do exactly the same in the other two columns. And there you have all the benefits of choosing us as an accounting firm.

Lastly, we will share our testimonials. Firstly I’ll add a heading Our clients know best, change the alignment to centre and hit Enter, and then add a Columns Block with two equal columns. And once again, I will make sure I select the block and change the alignment to full width. I will start on the left and insert an Image block and select an image from our Media Library. Then I will select the image and change the image dimensions to 25% and the styles to rounded, and the alignment to centre. Thereafter I will add the person’s name, hit Shift-Enter and add the name of the company they work for, and then make the name bold. Below that I will insert a Quote block and add their testimonial, and then follow the same process on the right. Lastly, I will make sure I select the Columns block, change the padding to 125 pixels to add a bit more space around the text and images. To end off, I’m going to select both the Heading and Columns blocks and turn them into a group. And now we’ll go ahead and change the background colour of both of these blocks. And now we can click on Preview to see what our landing page will look like.

Before we end off let’s look at a different way that we can structure our testimonials. Let’s add our heading, change the alignment to centre and then add a Columns block with two equal columns. Select the Columns block in your List View and change it to full width, and now we will add a Row block. And on the left, we will add our Quote block. Make sure you select the Row block again and then add the Image block on the right and choose the rounded style. And once you’ve done the same on the right, you can group the Heading block and the Columns block together and change the background.

Lastly, I want to show you how you can create a landing page with the help of patterns. Patterns are beautifully designed ready-to-go layouts you can add to your site and change as you please. To add any pattern to your site, navigate to the Patterns Directory. We are after a call-to-action, so I’m going to search for action buttons, and when you find one you like, you can merely copy and paste it into your page. And now you can modify it to meet your requirements, and that’s it. I hope your landing page will make visitors to your site take action.