In this article, we will show you three easy and effective methods on how to create a landing page in WordPress and discuss when to do it.<\/p>
Create a Landing Page in WordPress With a Plugin<\/h2>
A landing page refers to a web page designed for marketing purposes, such as introducing a new product. It can be a standalone page linked to a website or a part of it.<\/p>
Luckily, WordPress<\/a> offers a wide range of features to build a website<\/a> and a landing page for your business easily.<\/p> One of the best ways to create a landing page<\/a> involves using a plugin. With this method, even beginners can create a professional and compelling landing page as many WordPress plugins provide a drag-and-drop builder and pre-made templates. <\/p> As selected by our experts, here is a list of the best WordPress landing page plugins available:<\/p> For this tutorial, we will use the SeedProd plugin to create a high-converting landing page for your WordPress site.<\/p> First, you will need to log in to your WordPress dashboard, go to Plugins<\/strong> -> Add New<\/strong>, and use the search box to find the SeedProd plugin. Then, install and activate the plugin<\/a> on your WordPress site. <\/p> SeedProd is a freemium plugin – you can purchase its premium version starting from $39.50\/year<\/strong>. To set it up, you’ll need to input a license key from your SeedProd account. <\/p> Once you’ve activated the plugin, you’ll be redirected to the SeedProd landing page dashboard. At the top of the page, there will be four options for landing pages.<\/p> To add a new landing page, click on the Create New Landing Page <\/strong>button at the bottom.<\/p> After adding a new landing page, you’ll need to choose a design template for it. SeedProd offers many landing page templates suitable for different types of campaigns. <\/p> Alternatively, start creating a landing page from scratch by clicking on the Blank Template<\/strong>. <\/p> Once you have chosen a template, enter a page name and a URL title. <\/p> Use a focus keyword in the Page URL to improve your visibility on search engines and get more traffic to your WordPress website.<\/p>\n <\/div>\n\n\n<\/p> Once you’ve finished editing the details, select Save and Start Editing the Page<\/strong> to customize your first landing page.<\/p> With the Blocks<\/strong> menu on the left side, you can add or edit various elements like text, images, and videos. To do so, simply click on the element you want.<\/p> Change the background color, image, and alignment, so your landing page matches your branding. Alternatively, select the Global Setting<\/strong> at the bottom left corner.<\/p> Contact Form<\/strong> blocks can be integrated with the WPForms plugin, enabling you to change a newly created WordPress form into a custom form landing page using its add-on features.<\/p> If you want to duplicate a block, click on the files<\/strong> icon that appears on mouse hover. There are other icons for deleting, moving, and saving a block to streamline your design process.<\/p> As SeedProd is also integrated with WooCommerce<\/a>, you can create a landing page for an eCommerce store. Incorporating its blocks such as add-to-cart buttons, product grids, and sale products will help you make an engaging page. <\/p> For example, you can create an interactive product landing page by adding a Purchase Now<\/strong> button and on-sale products for your online store<\/a>.<\/p> Additionally, SeedProd’s Sections<\/strong> menu offers many category options for landing page design, including the Header, Hero, Call to Action, and FAQ. <\/p> After finishing your landing page design, click the Save<\/strong> button located at the top right corner.<\/p> Many businesses use various tools like to help them acquire more customers and increase their revenue. <\/p> Using SeedProd, your landing pages can be connected with popular marketing tools to improve your campaign performance. Here are our top recommendations for the third-party tools from SeedProd:<\/p> To connect your WordPress website’s landing page with third-party tools, click on the Connect<\/strong> tab and choose the services you want. <\/p> Connecting your landing page with an email marketing service, for example, will automatically add the site visitors’ contact details that they entered on your landing page to your email list.<\/p> After editing the page template and setting up the third-party tools, it’s time to publish your WordPress landing page. <\/p> To do so, go back to the Design<\/strong> tab, click the dropdown arrow next to the Save<\/strong> button, and press Publish<\/strong>.<\/p> Now, select the See Live Page<\/strong> button to view the results.<\/p> For further customization, you can configure your general page, SEO, and analytics settings via the Page Settings<\/strong> tab.<\/p> For example, you can link as many landing pages as you want to your custom domain name instead of using multiple WordPress sites. To do so, click on the Custom Domain<\/strong> menu, and enter your domain name. Note that this feature is only available on the SeedProd premium version.<\/p> Besides using a plugin, another way to create landing pages involves installing a WordPress Theme<\/a>. Doing so will let you customize the layout and the design of a WordPress landing page without changing its theme. <\/p> However, not all WordPress themes provide landing page templates. With this in mind, we recommend choosing from the following list of free WordPress themes<\/a>:<\/p> Now, let’s go over a step-by-step guide on how to create a landing page in WordPress with a theme. <\/p> Follow the steps below to add a new WordPress page:<\/p> After that, you’ll need to set your new page as a static homepage. Keep in mind that this is different from your regular homepage – the static page will ensure that visitors land on it as they click through your website.<\/p> Go to Settings<\/strong> -> Reading<\/strong> and select the page name you’ve created for the landing page from the Homepage <\/strong>drop-down menu. Then, click Save Changes<\/strong>.<\/p> Once you’ve saved it, start customizing the landing page theme by going to Appearance<\/strong> -> Customize. <\/strong>You will find options for editing your page’s elements, such as the layout, header, buttons, colors, and background.<\/p> Besides modifying the theme, you can customize the landing page using the WordPress Gutenberg editor<\/a>. <\/p> Note that this block editor comes with WordPress versions 5.0 and higher. If you use an older version of WordPress, you will have to install the Gutenberg plugin. <\/p> To customize your page, click on the + box<\/strong> to see all the available blocks. <\/p> Find the block you want to use with the search box and click on it to add it.<\/p> Once you’ve added the block, you can edit it through the Block <\/strong>tab of the sidebar or by clicking the three vertical dots<\/strong> above it.<\/p> For example, to add your products with their descriptions to your landing page, use the Media & Text <\/strong>block, which features a two-column layout.<\/p> To do so, simply click Add block<\/strong> -> Media & Text<\/strong> -> Upload. <\/strong>Choose an image from your computer or the WordPress media library. <\/p> Moreover, you can add links to social media pages with the Social Icons <\/strong>block. Doing this can help increase your brand recognition.<\/p> Once you’re satisfied with the results, review your landing page with the Preview<\/strong> button to make sure everything looks good. <\/p> Finally, click on the Publish<\/strong> button at the top right corner.<\/p> The final method of how to create a landing page in WordPress involves using a page template. Note that you’ll need some coding skills to build custom landing pages from scratch.<\/p> We recommend the manual method when you need more flexibility and customization options for the design. For example, it’s perfect to create a landing page for a dedicated domain. <\/p> In this step-by-step guide, we will show you how to build a custom landing page template using existing WordPress themes.<\/p> Creating a child theme is essential for creating a custom WordPress page template since it will allow you to customize it without breaking its core functionality. <\/p> For this method, we will use Hostinger’s File Manager to create a child theme<\/a>. Keep in mind that the process requires some HTML, CSS, and PHP knowledge.<\/p> First, go to hPanel<\/strong> -> File Manager.<\/strong><\/p> Then, navigate to public_html<\/strong> -> wp-content<\/strong> -> themes<\/strong>, click New Folder<\/strong> on the top right corner, and enter a name for your child theme.<\/p> Alternatively, connect to your site via an FTP<\/a> client like FileZilla<\/a> and create a new folder in your wp-content\/themes<\/strong> directory. <\/p> Next, you’ll need to create a new style.css<\/strong> file that will be the new stylesheet in the child theme folder. Add the following code to it:<\/p> *\/<\/p> Theme Name: Twenty Twenty-One Child<\/p> Theme URI: http:\/\/yourdomain.com<\/p> Description: Twenty Twenty-One Child<\/p> Theme Author: Your Name<\/p> Author URI: http:\/\/yourdomain.com<\/p> Template: twentytwentyone<\/p> Version: 1.0.0<\/p> Text Domain: twentytwentyone-child<\/p> License: GNU General Public License v2 or later<\/p> License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html<\/p> Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images<\/p> *\/<\/p> This code contains basic information about the child theme, including its name and parent theme. After modifying the style.css<\/strong> file based on the parent theme you’ve chosen, click Save<\/strong> and Close<\/strong>.<\/p> The next step is to enqueue the parent and child themes’ stylesheets. To do this, create a new file named functions.php<\/strong> in the child theme’s folder. <\/p> Start with an opening PHP tag, then add the functions to enqueue the parent theme’s stylesheet. For example, you can insert the following code:<\/p> <?php<\/p> add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );<\/p> function enqueue_parent_styles() {<\/p> wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’\/style.css’ );<\/p> }<\/p> ?><\/p> You now have a new functioning child theme that will load after your parent theme.<\/p> Your child theme is now ready to use, so go to your WordPress admin area and click Appearance<\/strong> -> Theme<\/strong> -> Activate<\/strong>.<\/p> After activating the new theme, you can build a custom WordPress page template<\/a> for your landing page with a unique layout. <\/p> Begin by creating a new file named landing-page.php<\/strong> in your child theme’s folder and add the following code to it: <\/p> <?php \/* Template Name: Landing Page *\/ ?><\/p> Change the template name as you see fit. Then, click Save and Close<\/strong>. <\/p> If you edit or add a page on your WordPress website, you’ll see your new custom template available for selection from a menu on the sidebar. However, it’ll still be blank since we haven’t added any content to it yet.<\/p> After creating the landing page template, it’s time to customize it. <\/p> First, copy the existing code starting with the get_header(); <\/strong>line from your parent theme’s page.php <\/strong>file – it will be located in public_html <\/strong>-> wp-content <\/strong>-> Themes <\/strong>-> yourtheme<\/strong>. Paste it to your landing-page.php <\/strong>file and save the changes. Here’s what your code should look like:<\/p> <?php \/* Template Name: Landing Page *\/ ?><\/p> <?php <\/p> get_header();<\/p> \/* Start the Loop *\/<\/p> while ( have_posts() ) :<\/p> the_post();<\/p> get_template_part( ‘template-parts\/content\/content-page’ );<\/p> \/\/ If comments are open or there is at least one comment, load up the comment template.<\/p> if ( comments_open() || get_comments_number() ) {<\/p> comments_template();<\/p> }<\/p> endwhile; \/\/ End of the loop.<\/p> get_footer(); <\/p> ?><\/p> You can edit your page template and add code to it by heading over to Appearance<\/strong> -> Theme File Editor<\/strong>. <\/p> Since most landing pages usually don’t have sidebars and footers to minimize distraction, remove them by deleting these two lines:<\/p> get_sidebar(); <\/p> get_footer();<\/p> To add more content to your landing page, use the WordPress editor. In addition, you can build a custom form landing page via the block editor with the Gutenberg Forms<\/a> plugin for free.<\/p> To help your landing page stand out from the competition, add more features via your style.css<\/strong> file or by navigating to Appearance <\/strong>-> Customize<\/strong>.<\/p> With additional CSS, you can modify your stylesheet. This includes changing its background and sidebar color and modifying its font type. <\/p> To change the background color, add the following code:<\/p> .site-content-contain {<\/p> background-color: #DEF0F5;<\/p> position: relative;<\/p> }<\/p> This will add a light green background color based on the hex code<\/a>, like in the image below: <\/p> Meanwhile, to change the font type, size, and color of your landing page, insert the following code:<\/p> p {<\/p> color: teal;<\/p> }<\/p> p {<\/p> font-family: Georgia;<\/p> font-size: 22px<\/p> }<\/p> Note that this code only changes your body text, like in the image below:<\/p>1. Install the Plugin<\/h3>
\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-plugins-menu-on-your-WordPress-dashboard-1024x418.png\")
<\/a><\/figure><\/div>2. Add a New Landing Page<\/h3>
![\"SeedProd](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/SeedProd-dashboard-in-WordPress-that-offers-various-types-of-landing-pages-including-the-coming-soon-page-1024x423.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-SeedProd-dashboard-with-the-Create-New-Landing-Page-button-highlighted-1024x422.png\")
<\/a><\/figure><\/div>3. Select and Customize the Landing Page Template<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-pre-made-template-options-in-SeedProd-1024x450.png\")
<\/a><\/figure><\/div>Pro Tip<\/h4>\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-page-details-information-where-you-need-to-enter-your-page-name-and-its-URL-1024x474.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-Design-tab-in-SeedProd-that-allows-you-to-customize-the-pre-made-template-using-blocks-1024x495.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-navigation-menu-to-duplicate-a-block-for-your-landing-page-in-SeedProd-1024x494.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-WooCommerce-blocks-in-SeedProd-that-enable-you-to-create-an-interactive-landing-page-for-your-eCommerce-store-1024x449.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-sections-menu-where-you-can-find-many-design-categories-such-as-the-header-hero-and-call-to-action-for-your-landing-page-1024x495.png\")
<\/a><\/figure><\/div>4. Integrate With Third-Party Tools<\/h3>
\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-Connect-tab-in-SeedProd-that-allows-you-to-integrate-your-landing-page-with-email-marketing-services-1024x483.png\")
<\/a><\/figure><\/div>5. Publish Your Landing Page in WordPress<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-publish-button-that-shows-up-when-youre-clicking-on-the-dropdown-arrow-next-to-the-save-button-1024x498.png\"){kind=icon}
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-page-settings-tab-where-you-can-modify-your-page-SEO-and-analytics-1024x496.png\")
<\/a><\/figure><\/div>Create a Landing Page With a WordPress Theme<\/h2>
\n
1. Add a New Page<\/h3>
\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-themes-menu-of-the-WordPress-dashboard-used-to-add-a-new-theme-to-your-site-1024x450.png\")
<\/a><\/figure><\/div>\n
\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-appearance-of-a-new-page-that-allows-you-to-select-your-template-page-on-the-sidebar-menu-1024x511.png\")
<\/a><\/figure><\/div>2. Set the Landing Page as a Static Homepage<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-Reading-Settings-menu-in-WordPress-that-can-be-used-to-change-your-page-into-a-static-page-1024x524.png\")
<\/a><\/figure><\/div>3. Customize the Landing Page With the WordPress Editor<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-location-of-the-Search-option-in-the-WordPress-Gutenberg-editor-1024x511.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-three-dots-above-the-block-that-access-the-editor-tools-in-the-Gutenberg-editor-1024x455.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-Media-Text-block-where-you-can-add-an-image-with-a-description-1024x485.png\")
<\/a><\/figure><\/div>4. Hit Publish<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-publish-button-that-can-be-found-at-the-top-right-corner-of-your-WordPress-page-1024x511.png\")
<\/a><\/figure><\/div>Create a Landing Page Manually<\/h2>
1. Create a Child Theme<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/the-location-of-hostingers-file-manager-in-hpanel-dashboard.png\")
<\/a><\/figure>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-themes-folder-in-the-file-manager-where-you-can-add-new-folder-to-create-a-child-theme-1024x641.png\")
<\/a><\/figure><\/div>2. Modify the style.css File<\/h3>
3. Create a functions.php File<\/h3>
4. Activate the Child Theme<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-WordPress-themes-menu-where-you-can-find-your-child-theme-and-activate-it-1024x457.png\")
<\/a><\/figure><\/div>5. Build a New Custom Page<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-template-option-in-WordPress-that-will-display-your-custom-page-1024x408.png\")
<\/a><\/figure><\/div>6. Customize the Landing Page With CSS<\/h3>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-theme-file-editor-that-allows-you-to-modify-your-child-theme-code-including-theme-functions-and-custom-page-1024x456.png\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-Customize-page-in-WordPress-that-has-the-Additional-CSS-option-to-edit-your-landing-pages-components-1024x492.png\")
<\/a><\/figure><\/div>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-landing-page-that-uses-additional-CSS-to-change-its-font-type-size-and-color-1024x488.png\")
<\/a><\/figure><\/div>