Creating a landing page in WordPress is an excellent way to capture leads, promote products, or encourage visitors to take specific actions. Unlike regular pages, a landing page focuses on a single goal, making it highly effective for marketing campaigns or special promotions.
It usually contains minimal distractions like navigation menus and is designed to get users to convert, whether signing up for a newsletter, downloading an e-book, or making a purchase.
Here, we show you the steps to create a WordPress landing page. Whether you’re a beginner or already familiar with WordPress, this tutorial will help you design a captivating and functional landing page without having coding skills (except for the last method).
With the right tools and techniques, you can create a page that grabs attention and drives action, all with a few simple steps.
Table of Contents
Landing Page & Components
What is a landing page in WordPress? As we already said at the beginning of this tutorial, a landing page is a single webpage designed with one purpose in mind: to encourage visitors to take a particular action, like signing up for a newsletter or purchasing a product.
It’s different from other pages because it focuses on one clear goal without distractions. A successful landing page usually has the following key components:
- Headline: The headline is the first thing visitors see. It should be clear, and eye-catching, and explain exactly what the page is about in just a few words. The headline sets the tone and tells your target audience why they are on the page.
- Call to Action (CTA): A Call to Action is a button or link that informs visitors what to do next. It could say something like “Sign Up Now” or “Download Free Guide”. The CTA should stand out and make it easy for visitors to complete the action.
- Supporting Text: This is where you explain the benefits of your offer. Keep the text short and simple, focusing on how your offer helps the visitor. Use bullet points or short paragraphs to make the content easy to read.
- Images or Videos: Visuals like images or videos can make the landing page more engaging and help explain the product or service better. A picture or video showing that what you offer can boost interest and trust.
- Form: If you wish to collect information, like email addresses, you’ll need a form. The form should ask for only the necessary information, like name and email address, to avoid overwhelming the visitor.
- Trust Signals: These can be customer reviews, testimonials, or logos of companies you’ve worked with. Adding trust signals builds credibility and helps visitors feel more confident about taking further action, like signing up or purchasing.
What you Need Before Creating a Landing Page
Before you dive into building your WordPress landing page, here is a list of what you’ll need. Whether you’re using a self-hosted WordPress site (WordPress.org) or a WordPress.com account, having a WordPress site set up is the first step.
Also, you must have a clear goal. Think about what you want your landing page to achieve. Are you trying to collect email addresses, promote a product, or drive traffic to a specific offer? Your goal will guide you regarding the page’s design and content.
Once you decide on the goal, you should pick up a design idea or template for the landing page. It’s easier to start with a plan. You can use pre-made templates in WordPress plugins or create a unique design.
Remember, you don’t need to get exactly what you want from the WordPress templates; they are for inspiration, give you a head start, and ensure the page looks professional. Each of these steps is essential for creating an effective landing page. When you have them ready, you’re all set to start building!
Now you know what the WordPress landing page is and what components are necessary to have while creating it. .
4 Methods to Create a WordPress Landing Page
There are several methods you can choose from to construct a landing page in WordPress. These depend on your needs, technical skills, and available tools. Let’s look at four easy ways to build a landing page for your website:
Use Block Editor
Before going further, we wish to emphasize that we won’t use the Gutenberg Block Editor for this section. Instead, we will use block themes like Twenty Twenty-two that allow Full Site Editing (FSE).
With Full Site Editing (FSE) in WordPress block themes, you can design a landing page directly within the block editor without the need for extra plugins or coding. The block editor gives you complete control over the layout, design, and content using simple drag-and-drop blocks.
Here’s a step-by-step guide on how to create a WordPress landing page using the block editor:
First, log in to your WordPress dashboard. Then, head to Appearance → Editor. This will open the Full Site Editor (FSE), where you can customize every part of your site.
In the FSE, look for the Templates section on the left-hand side. Templates control the layout and structure of different pages on your website.
Click on Add New Template to create a new page template.
A pop-up will appear, asking you to select what the new template should apply to. Click on Custom template.
Now, you need to name this landing page (we called our example “WordPress Landing Page”). Then, click Create.
You’ll be asked to choose a pattern. Here, you can skip it and use a blank or try an existing pattern as a base. For a landing page, it’s often best to start with a blank canvas so you have more control over the design. Therefore, we usually skip this step.
Now, build the layout using blocks. To do this, start by adding a Header Block at the top of the page. This could include your logo, a navigation menu (if necessary), or a simple heading. You can do this by clicking the + icon in the editor.
For a Header, add individual blocks like an image block for your logo and a text block for your heading.
Next, you may use a heading block to create a heading and a paragraph block to provide useful information about your product or service. You can add these two blocks using the + icon, as you added the header in the previous step. Additionally, you can add links in the paragraph block and change the text alignment and effects in the paragraph.
You can also quickly create a landing page in WordPress by using block patterns, pre-designed collections of blocks often used together. Block patterns offer a fast and efficient way to achieve an attractive layout without building everything from scratch.
To view the block patterns in your theme, click the blue + button in the editor and navigate to the Patterns tab. Here, you’ll find various patterns you can easily insert into your page to create a beautiful landing page.
For this tutorial, we’ll use the ‘Call to Action’ pattern. You can drag and drop or click on your desired pattern to add it to your WordPress landing page.
Once you add the pattern, you can customize it. For instance, you can customize the placeholder text or adjust the links so that the Call to Action directs visitors to various sections of your WordPress site.
Important: For this tutorial, we used the simplest design; however, you can add images, videos, multi-column layouts (e.g., for side-by-side images, and text), and change font and color. Remember, a good WordPress landing page needs a strong Call to Action to encourage users to take the next step (e.g., “Sign Up Now” or “Get Started”). You can customize the button’s style, color, and text to make it stand out.
Once you’re happy with the design, click Save at the top right of the editor to save your new landing page template.
Now, go to Pages → Add New Page in your WordPress dashboard to make a new page and assign the landing page template you just designed from the Page Attributes section. To do this, click on Pages and select Swap template.
You’ll be prompted with various templates, including the one you created for your WordPress Landing Page. Click on it (in our example, it was with the name “WordPress Landing Page”).
You will notice that your page template has been swapped, but it’s not visible yet. To make it visible, click on your Landing Page template and select Show template. Then, click Publish to make your Landing Page live.
Important: Before sharing your WordPress Landing Page, preview it by clicking the computer icon near the Publish button to see how it looks on various devices. Ensure your Landing Page elements (text, images, buttons) look good on mobile devices by testing the responsive layout in the Full Site Editor. To optimize for speed, avoid using too many large images or videos that could slow down your landing page and ultimately affect the user experience.
Use SeedProd Plugin
WordPress plugins help create and extend our site’s functionality, and there are several plugins available for different purposes. In this example, we use the SeedProd plugin to create a WordPress landing page because it’s easy to use and provides a straightforward process.
SeedProd allows you to design attractive landing pages without needing to know how to code. Here are the simple steps to create your landing page:
In your WordPress admin area, go to Plugins → Add New Plugin. Search for “SeedProd” in the search bar. Once “SeedProd” appears in the results, click Install Now.
When it’s installed, hit Activate to enable the plugin.
After activation, you’ll see a new option – SeedProd –in the left-hand menu. Click on it, then click on Landing Pages. Next, scroll down to the Landing Pages section and click on Create New Landing Page to start designing your page.
SeedProd comes with many pre-designed templates. Choose a WordPress landing page template that best suits your needs. You can also customize it later to fit your style.
When you click on your desired template, you’ll get a pop-up where you can name your page and modify the page URL. After that, click Save and Start Editing the Page.
The SeedProd editor is a drag-and-drop builder. Click on any block, such as text, images, or buttons, and edit the content. You can also replace the placeholder text with your own and add any pictures or videos you need.
You can even add new blocks like Call to Action, Contact Forms, or Countdown Timers by dragging them from the Block Menu on the left and dropping them into your page.
You can also change the font styles, colors, and backgrounds by selecting the Advanced tab in the editor. This will allow you to match the landing page to your brand.
Once you’re done, preview the page by clicking the Preview button. If everything looks good, click Save to save your changes. Then, click Publish at the top of the SeedProd editor to make this page live.
Important: SeedProd provides limited features and functionalities with a free version. However, the premium SeedProd plugin comes with lots of features and templates.
Alternatively, to make this landing page your website’s homepage, go to Settings → Reading in your WordPress dashboard. Under Your homepage displays, choose A static page, and then select the landing page you just created. Lastly, click Save Changes.
Important: If you have an online store and want to create a WordPress landing page to promote your products. You can use the SeedProd plugin because it’s fully compatible with WooCommerce.
Use WordPress Themes
If you’re not using a block theme and don’t wish to use any additional plugin, you may continue with this approach, to use your WordPress theme (like Astra) to create a landing page. However, if you want more flexibility, use the website page builder.
Here, we’ll create a landing page for WordPress using the theme’s built-in tools and the WordPress block editor. To do this, go to Appearance → Themes and click Add New Theme.
In the theme search bar, type “Astra” and click Install. However, if you’ve downloaded this theme on your computer, you may use the Upload Theme button to upload the WordPress theme.
After you have installed the theme, click Activate to activate it on your website.
Then, click on Pages in the left menu of your WordPress dashboard and select Add New Page. Enter a name for your landing page, like “Landing Page Using Astra Tool”.
Transform your ideas into a professional WordPress website tailored to your needs.
Start today with Hosted.com’s WordPress Hosting and easy to use Control Panel interface to bring your website to life.
On the right side of the page editor, look for Astra Settings to select the Container Layout (in this example we use the narrow container layout) and Container Style (here, we kept the default style).
Next, scroll down the page to decide whether you want a sidebar on your WordPress landing page. You may enable or disable elements, including header, footer, and banner area.
This helps keep the page distraction-free, which is great for landing pages. However, if you need a sidebar, pick a sidebar style from Default, Unboxed, Boxed.
Once you’ve done that, use the WordPress block editor to build your page. For that, click the + (plus) button to add blocks like headings, paragraphs, buttons, and images.
We added one heading and one paragraph as follows:
After that, click on the + icon again and search “Button”. Then, click Button to add a Call-to-Action button on your WordPress landing page. Customize the Button text and link it to the desired page.
As you can see, the blue Call to Action button isn’t prominent. You can change the color and font as follows to make it stand out more:
- Click on the button you want to modify.
- Access the WordPress block editor page settings.
- Go to the Styles tab (the circle icon).
- Change the background and text color.
- Choose the font and font size of your choice.
Once you are happy with the design and WordPress landing page layout, click Publish to make your landing page live.
Important: The WordPress requirements for a specific landing page may vary depending on the project and your potential audience. However, if you want to use different fonts on one landing page, you may refer to our detailed tutorial on how to change fonts in WordPress.
Use Custom Code
If you’re more concerned about the design and layout of your WordPress landing page, this method is for you. Creating a custom landing page in WordPress using a Child Theme allows you to fully customize the design and functionality of your page without losing any changes when your Parent Theme is updated.
A Child Theme is a theme that inherits the features and styling of another theme, called the Parent Theme, but allows you to make changes. This is helpful when you want to make specific adjustments to your landing page without affecting your main website.
To use a Child Theme, you need to set it up first. Let’s go through the step-by-step process to create a custom WordPress landing page.
Step 1: Create a Child Theme
The first step in building a custom landing page is creating a Child Theme so you don’t lose any customizations. To do this, log in to your web hosting account and access the File Manager feature. Hosted.com users can find it at cPanel → Files → File Manager.
Then, make a new folder under public_html/wp-content/themes and name it something like yourtheme-child. For example, we’re using the Astra theme for this section, so we call the child theme astra-child.
Step 2: Create style.css File
Inside this Child Theme folder, create a new file called style.css.
Step 3: Modify the style.css File
Now that you have your Child Theme set up, you can add custom CSS to style your WordPress landing page. Click Edit to add the necessary code to link the Child Theme to the Parent Theme.
Here’s the sample custom code template that you can use for your WordPress landing page:
/*
Theme Name: astra-child
Template: astra
Version: 1.0.0
*/
body {
font-family: 'Arial', sans-serif;
color: #333;
background-color: #f5f5f5;
}
h1, h2, h3 {
color: #000;
font-weight: 700;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
color: #555;
}
.landing-page-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.landing-page-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
display: inline-block;
text-decoration: none;
font-size: 18px;
}
.landing-page-button:hover {
background-color: #0056b3;
}
The above CSS code file sets basic styles for the landing page, like fonts, colors, and spacing. It defines specific classes such as .landing-page-container and .landing-page-button to style the container and button.
Important: Replace the Theme Name and Template with your chosen ones at the start of the above CSS code.
Step 4: Create a functions.php File
To provide your landing page with custom functionality, create a functions.php file in your Child Theme folder. This file allows you to add custom PHP code to enhance the performance and behavior of your landing page.
For example, you can enqueue custom styles or scripts that you want to use on your landing page. To do this, select the functions.php file and click Edit at the top.
Now, you may add the following code in the functions.php file:
<?php
// Enqueue parent and child theme styles
function mytheme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');
// Enqueue Google Fonts
function add_custom_google_fonts() {
wp_enqueue_style('custom-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'add_custom_google_fonts');
// Custom Landing Page Template
function my_custom_template() {
if (is_page_template('template-landingpage.php')) {
wp_enqueue_style('landing-page-style', get_stylesheet_directory_uri() . '/landing-page.css');
}
}
add_action('wp_enqueue_scripts', 'my_custom_template');
?>
This code enqueues the styles of both the Parent and Child Themes. It also adds Google Fonts (Roboto) and allows custom CSS for the landing page when the template-landingpage.php is used (we’ll show you how to create template-landingpage.php in the next steps).
Step 5: Activate the Child Theme
Once the Child Theme is ready, it’s time to activate it in WordPress. To do this, go to the WordPress dashboard → Appearance → Themes. Find your Child Theme in the list and click Activate. Your Child Theme is now active, and you can start building your custom landing page.
Step 6: Build a New Custom Page Template
Next, create a new page template for your WordPress landing page. To do this, create a new file named template-landingpage.php in the Child Theme folder.
At the top of the file, define it as a custom template with the following code:
<?php
/* Template Name: Custom Landing Page */
get_header();
?>
Then, add custom PHP and HTML code to design the layout of your landing page. For example, you can include text sections, images, or forms. After that, finish the template with the following code to include the footer:
<?php get_footer(); ?>
Here’s the complete sample template code that we used:
<?php
/*
Template Name: Custom Landing Page
*/
get_header(); // Include the header
?>
<div class="landing-page-container">
<section class="hero-section">
<h1>Welcome to Our Landing Page</h1>
<p>This is a custom landing page created with a child theme.</p>
<a href="/signup" class="landing-page-button">Sign Up Now</a>
</section>
<section class="features-section">
<h2>Why Choose Us?</h2>
<div class="feature">
<h3>Feature 1</h3>
<p>Explanation of your first feature or service.</p>
</div>
<div class="feature">
<h3>Feature 2</h3>
<p>Explanation of your second feature or service.</p>
</div>
<div class="feature">
<h3>Feature 3</h3>
<p>Explanation of your third feature or service.</p>
</div>
</section>
<section class="call-to-action">
<h2>Ready to Get Started?</h2>
<a href="/signup" class="landing-page-button">Get Started Now</a>
</section>
</div>
<?php get_footer(); // Include the footer ?>
In the above code, the Template Name: Custom Landing Page comment at the top of the file tells WordPress that this is a custom template you can select from the Page Attributes section when creating a new page (we’ll show you how to do this shortly).
The get_header() and get_footer() functions include the default WordPress header and footer, making the page look consistent with the rest of your site. Also, the page contains three sections:
- A hero section (with a welcome message and Call to Action button)
- A features section (highlighting three features)
- A final Call to Action section (encouraging users to get started).
Each section uses classes like hero-section, features-section, and call-to-action for easy styling through your style.css file.
Step 7: Create & Publish Your Custom Landing Page
Go to Pages → Add New Page in WordPress to create a new page. Enter a title for your landing page. Then, under Page Attributes, select your Custom Landing Page template from the Template dropdown menu.
You may add content using the WordPress block editor or directly through your template-landingpage.php file. Once your content is ready, click Publish to make the page live.
Here’s the custom WordPress landing page that we just created:
If you don’t find your Custom Landing Page template in Step 7, you may try the following troubleshooting steps to ensure the template is available in WordPress:
- Ensure your template-landingpage.php file is placed in the child theme directory, under wp-content/themes/yourthemechild/.
- Ensure the template file has the correct template declaration at the top of the file:
<?php
/*
Template Name: Custom Landing Page
*/
?>
- Recheck the file name and ensure it is correct (template-landingpage.php) and not something like template-landingpage.php.txt (if created in certain editors, they might add an extra extension).
- Verify that the Child Theme is activated.
- Sometimes, WordPress might cache certain parts of the theme. Try clearing the website cache and browser cache to ensure everything refreshes properly.
- Ensure that your Parent Theme supports custom templates. Some themes may restrict certain functionalities, so check your theme documentation.
If you’ve followed the steps and it’s still not showing up, you might want to recheck your Child Theme setup for issues.
KEY TAKEAWAYS
- A landing page focuses on one specific goal, such as collecting emails or promoting a product.
- You can create landing pages in WordPress using various methods including the block editor, plugins like SeedProd, or a manual approach.
- Templates and blocks make designing pages easy and fast, and no coding is required.
- Customization of content and layout is key to making your landing page effective.
- Landing pages should include key elements like a headline, call-to-action, visuals, and forms for lead generation.
- Always ensure your page is user-friendly, responsive, and optimized for SEO.
FAQs
How do I add a form to my landing page?
You can add forms using a block in the editor or through form plugins like WPForms.
Is SeedProd a good tool for building landing pages?
Yes, SeedProd is a beginner-friendly plugin that offers templates and drag-and-drop customization.
Do landing pages affect website speed?
If designed well with optimized images and efficient code, landing pages shouldn’t slow down your site.
Can I track the performance of my landing page?
Yes, you can use Google Analytics or other tools to monitor visits, clicks, and conversions.
How do I make my landing page mobile-friendly?
Use responsive templates and preview your landing page on mobile devices to ensure it looks good on all-size screens.
What do I use if I want to create a custom landing page?
Use a Child Theme to customize your page’s design and functionality without losing changes on your website when your Parent Theme is updated.
Other Related Tutorials & Blogs:
– How to Change Fonts in WordPress: 6 Easy Ways
– How to Export A WordPress Site: A Step-By-Step Guide
– WooCommerce Shortcodes: A Guide to Their Uses & Benefits
– How To Fix ERR_SSL_BAD_RECORD_MAC_ALERT Error
– How To Fix PR_END_OF_FILE_ERROR Connection Error
- About the Author
- Latest Posts
Rhett isn’t just a writer at Hosted.com – he’s our resident WordPress content guru. With over 6 years of experience as a content writer, with a background in copywriting, journalism, research, and SEO, and a passion for websites.
Rhett authors informative blogs, articles, and Knowledgebase guides that simplify the complexities of WordPress, website builders, domains, and cPanel hosting. Rhett’s clear explanations and practical tips provide valuable resources for anyone wanting to own and build a website. Just don’t ask him about coding before he’s had coffee.