Transcript
Introduction
This lesson is all about landing pages and we will create our own landing page using a block theme. A landing page is a marketing page. It is a dedicated page you land on from an external source, such as a social media post, an advertisement, or an email. The goal of a landing page is to encourage visitors to take action. You will notice there is no header navigation on a landing page as you want to hide any distractions and focus on the call to action. The main purpose can be to encourage visitors to sign up for a service, buy a product, join a mailing list or convert visitors to take any other specific action.
Key elements
There are usually four elements that form part of a successful landing page. The first one is a hero section with a title, a subtitle, and a visual, as well as a call to action. The proposal or title and subtitle usually highlight what makes your offer so appealing and enticing and why the user should take action. The call to action is probably the most important part of the page, so make sure it is clear and it stands out, and by adding the word “my” or “me,” you make it more personal. The next important part of the page is to emphasise the benefits on offer. Explain how your product or service fulfills the promise you made in the previous section. Next, providing testimonials and social proof is also extremely important. Build credibility with testimonials, stats and examples of other success stories. Finally, depending on the context, a FAQ section can also be very helpful. Answering frequently asked questions can help overcome hesitation or help answer common questions that pop up.
Example
Next, I will show you how I created the following landing page for an interior design company using a block theme. So, first things first, I used the Twenty Twenty-Five default theme to create this site. Then we can make our way to the Site Editor, open Styles, and change the site’s background color to Accent 5, one of the colors that form part of the theme’s color palette. Next, I am going to make my way to templates to create a custom template for my landing page and then name it appropriately. When we click Create, we can open the template and make changes. I will remove the header as I don’t want a header for my landing page. I will also remove the Featured Image block and some horizontal padding from my Group block to get rid of some unwanted space. Now that the custom template is ready, we can hit Save and make our way to pages. And then, I will add a new page and name it “Book a consultation.” Once the page is created, we can assign our custom template. So when we click on Pages, next to template in our sidebar settings, we can select swap template and then select the landing page custom template we created, which only includes a footer. Then I am going to build the entire page using patterns that come with the theme. So let’s go ahead and add multiple patterns to flesh out our page. I will start with the hero section, then a testimonial pattern, and so forth. The cool thing you will notice is that when you add a pattern, you are in a zoomed-out view. And you can actually see how the page is taking shape as we continue adding these patterns from different categories. Then I will end off by adding a frequently asked questions pattern as well as a call to action.
Now we can start modifying each pattern one by one. The first step I am going to take, though, is to change the style of each pattern to style one, which is also the same color as the background color of my site. For this testimonial pattern, I am going to delete the second column, as I only want to display three testimonials. Then, I will add style one to the next pattern. When I move on to the three-column pattern, I will remove the Image block from each column as I want to use this pattern to display some stats. Then, we can end off by selecting style one for the final patterns. Next I will start customizing the hero section. So, let’s go ahead and remove the content on the left and replace it with a new heading and text. Followed by updating the image on the right with an image that I have already added to my Media Library.
Next, we are going to add a contact form. To do this, I will hit publish and make my way to plugins. We can search for forms and then select a suitable plugin. In this case I am going to install and activate the WP Forms plugin. Once installed, I will create my first form, a blank one, and only add the name and email fields. For the name field, I am going to select “simple” as I want to allow someone to add their surname. When I go to settings, I will change the name of the form to “Quote” and the text for the submit button to “Get my quote” to make it more personal. To add the form I will type in forward slash WP and select the form named Quote. Then, I will open up the sidebar settings and scroll down to button styles. And change the button’s background color to black and the text color to Accent 5. Then, our hero section with the call to action is complete.
When we scroll down to the next pattern I am happy with the testimonial section and only have to update the content. So let’s move on to the next section that highlights one of the benefits of using our company. So the first thing I will replace the image and then the content on the left with a new heading and text. I also want to make sure that I change the size of my heading to XXL in the same way as the other sections on my landing page. Lastly, I want to shift the image and column from the right to the left. And then, this section is also done. Now we move on to the three-column pattern to display some numbers. So first, I will update the heading and change the size to XXL. Then I will go ahead and add the relevant numbers to each heading in each column, change the heading to bold, and change the size to XXL. And then apply that to each column. Now that our numbers are in place, we can update the text below. So for column 1, “10 years in business”, column 2, “+500 homes transformed,” and the third column, “+12 design awards.”
The final step is to select the heading and content in each column and then group them in a Stack block. Then, change the justification of the Stack block to the center in each column. And then our social proof section is finished and we can move on to the next pattern. Once again we can replace the image on the right and the content on the left with a new heading and text. Followed by changing the size of the heading to XXL. When I move down to the FAQ section, I am happy with the design, but I will also increase the size of the heading. And one will, of course, need to update the questions and the answers as well. Lastly we can update the call to action at the bottom of the page. I will go ahead and change the heading to “Transform your spaces” and the content below. Then, I will modify the Buttons block by changing the radius to 0, changing the text of the Buttons block to “Book a consultation,” and making the text bold.
Conclusion
And then our landing page is done. With our landing page ready, we can start driving targeted traffic through ads, emails, or social media to achieve our goals.