Header Text - Step-by-Step Guide to Create a WordPress Landing Page

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.

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

How to Create a WordPress Landing Page - WordPress Templates

Click on Add New Template to create a new page template.

How to Create a WordPress Landing Page - Add New Template

A pop-up will appear, asking you to select what the new template should apply to. Click on Custom template.

How to Create a WordPress Landing Page - Select Custom Template

Now, you need to name this landing page (we called our example “WordPress Landing Page”). Then, click Create.

How to Create a WordPress Landing Page - Name Your Landing Page

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.

How to Create a WordPress Landing Page - Skip Pre-built Patterns

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.

How to Create a WordPress Landing Page - Add Blocks

For a Header, add individual blocks like an image block for your logo and a text block for your heading.

How to Create a WordPress Landing Page - Add a Header Block

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.

How to Create a WordPress Landing Page - Add Heading and Paragraph Blocks

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.

How to Create a WordPress Landing Page - Add Call to Action Pattern

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.

How to Create a WordPress Landing Page - Save 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.

How to Create a WordPress Landing Page - Swap Page 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”).

How to Create a WordPress Landing Page - Swap Landing Page Template

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.

How to Create a WordPress Landing Page - Show Landing Page Template to Your WordPress Page

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.

How to Create a WordPress Landing Page - Install SeedProd Plugin

When it’s installed, hit Activate to enable the plugin.

How to Create a WordPress Landing Page - Activate SeedProd 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.

How to Create a WordPress Landing Page - Create New Landing 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.

How to Create a WordPress Landing Page - Select Landing Page Template

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.

How to Create a WordPress Landing Page - Name Your Landing 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.

How to Create a WordPress Landing Page - Customize Content

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.

How to Create a WordPress Landing Page - Use Block Menu to Add Blocks and Sections

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.

How to Create a WordPress Landing Page - Customize Landing Page Style

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.

How to Create a WordPress Landing Page - Publish Landing Page

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.

How to Create a WordPress Landing Page - Set Your Landing Page as Home Page

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.

How to Create a WordPress Landing Page - 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.

How to Create a WordPress Landing Page - Install Astra Theme

After you have installed the theme, click Activate to activate it on your website.

How to Create a WordPress Landing Page - Activate Astra Theme

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).

How to Create a WordPress Landing Page - Choose Container Layout and 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.

How to Create a WordPress Landing Page - Customize Sidebar and Additional Elements

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.

How to Create a WordPress Landing Page - Plus Button

We added one heading and one paragraph as follows:

How to Create a WordPress Landing Page - Customize Landing Page

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.

How to Create a WordPress Landing Page - Add Call to Action

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:

  1. Click on the button you want to modify.
  2. Access the WordPress block editor page settings.
  3. Go to the Styles tab (the circle icon).
  4. Change the background and text color.
  5. Choose the font and font size of your choice.
How to Create a WordPress Landing Page - Customize Call to Action Button

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.

How to Create a WordPress Landing Page - Create Child Theme Folder
Step 2: Create style.css File

Inside this Child Theme folder, create a new file called style.css.

How to Create a WordPress Landing Page - Create style.css File
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.

How to Create a WordPress Landing Page - Edit style.css File in Child 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.

How to Create a WordPress Landing Page - Create functions.php File in Child Theme

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.

How to Create a WordPress Landing Page - Edit functions.php File

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 dashboardAppearance 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.

How to Create a WordPress Landing Page - Activate Child Theme
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.

How to Create a WordPress Landing Page - Create template-landing.php File in Child Theme

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.

How to Create a WordPress Landing Page - Create & Publish Your Custom Landing Page

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:

How to Create a WordPress Landing Page - WordPress Landing Page Using Custom Code

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.

Strip Banner Text - Empower your business with a custom WordPress website hosted by Hosted.com. [Get started]

KEY TAKEAWAYS

  1. A landing page focuses on one specific goal, such as collecting emails or promoting a product.
  2. You can create landing pages in WordPress using various methods including the block editor, plugins like SeedProd, or a manual approach.
  3. Templates and blocks make designing pages easy and fast, and no coding is required.
  4. Customization of content and layout is key to making your landing page effective.
  5. Landing pages should include key elements like a headline, call-to-action, visuals, and forms for lead generation.
  6. 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.

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