How to Add Reviews to Front Page Wordpress

With more 4.66 billion Internet users worldwide equally of January 2021 and over 600,000 new users online each day in the past 12 months, there'south a massive potential audience for your WordPress website.

But making the most of this Cyberspace traffic trend demands more than than just a great-looking WordPress site — you demand a way to capture user attention, convince them to share their contact information, then create and evangelize content they want to meet..

The shortest path to success is a slap-up WordPress landing page.

Here's a expect at why landing pages affair, what they offer, how to create a landing page in WordPress, and what tools are available to help streamline the landing page process.

Let's get started.

What is a Landing Page in WordPress?

A WordPress landing page is a purpose-congenital page that captures visitor contact details in commutation for special offers, regular newsletters, or resources such every bit eBooks and whitepapers.

Landing Page Basics

Many people confuse a website'southward homepage with a landing page.

The homepage is the showtime page users see when they visit your WordPress site. This page typically contains information nigh your visitor or business, including your company name (if any), relevant images, and links to other product pages or content on your site.

While your homepage may attract visitor attending and encourage them to spend more time on your WordPress site, landing pages are designed to generate business leads by capturing visitors' information.

Hither'southward what a standard homepage might look like:

Image Source

Compared to what a landing page looks like:

Image Source

The format, layout, and design of landing pages differ depending on your business concern type and offered resources. Even so, they share a common characteristic set: form fields to capture company information.

The information requested is up to y'all — some sites only enquire for electronic mail addresses to ship newsletters or eBook links. In contrast, others want more detailed information such as name and phone number in commutation for special promotions or sales.

How to Create a Landing Page in WordPress

1. Select a theme.
2. Remove unneeded content.
3. Set your homepage.
4. Customize your page.
5. Get alive.

You lot know why landing pages matter — and what landing pages need to effectively accomplish customers. But how practice y'all build one in WordPress?

You've got a few options here: Modify an existing theme to act as your landing folio by changing and replacing cardinal elements, or use a plugin to streamline the page-building process.

If yous've got the time and technical know-how, here'southward a quick rundown of how to create a landing folio in WordPress.

one. Select a theme.

Pick a theme from My Site > Design > Themes in your WordPress dashboard, or download and install a new theme. And then, click on the 3 dots next to the theme's proper noun and click Actuate.

2. Remove unneeded content

Elementary is the goal for your landing page, so the next footstep is removing extra posts and pages. Become to My Site > Site > Pages , so click on the three dots next to whatever folio y'all don't need and click Trash. Information technology doesn't matter which page you proceed.

Source

3. Set a static homepage.

Using the 3 dots adjacent to the page y'all choose to go on, set information technology as your static homepage. This isn't the aforementioned as your regular homepage — instead, it ensures that your customized landing page is where visitors land when they click through from your main WordPress site.

Image Source

4. Customize your page.

Click on the three dots and so click Edit. In the editor, you lot'll be able to add text, images, contact forms, and phone call-to-activity content.

Image Source

5. Go live.

Click update to publish your folio, and and then link to it from your main WordPress site.

How to Build a Custom Landing Page in WordPress

1. Create a child theme.
2. Create a style.css file.
3. Build a functions.php file.
4. Install and activate your child theme.
5. Create a custom page.
6. Add images.
7. Create a custom header.
8. Show off your content.
9. Add together extra style with CSS.

If yous adopt a more customized look for your landing page, it's possible to dig deeper into code and do it yourself. Fair warning? You'll need some HTML and CSS skill to make this work. Here'due south a step-by-step guide:

1. Create a kid theme.

The electric current theme of your WordPress site is often called the "parent theme." To ensure any landing pages you create don't adversely impact this theme, outset by creating a child theme.

2. Create a style.css file.

Once you've got your kid theme up and running, yous demand to change your mode.css file with the following code:

                                          
/*
                      
Theme Name: Landing Page Theme
                      
Description: Twenty 16 Child Theme With custom landing page
                      
Writer: Tahir Taous
                      
Author URI: https://pagely.com
                                            
/blog
                      
Template: twentysixteen
                      
Version: 1.0
                      
Text Domain: twentysixteen-child
                      
*/
                                      

3. Build a functions.php file.

Adjacent, you need to build out your PHP functions. Add together the following code into your child theme folder:

                                          
<?php
                      
// Parent Theme Styles //
                      
// https://codex.wordpress.org/Child_Themes //
                                            
function theme_enqueue_styles() {
                                            
$parent_style = 'parent-style';
                                             
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
                      
wp_enqueue_style( 'child-mode',
                      
get_stylesheet_directory_uri() . '/way.css',
                      
array( $parent_style )
                      
);
                                            
}
                      
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
                                      

4. Install and actuate your child theme.

Now information technology's time to install your child theme on your WordPress page and activate it. Make certain information technology's working by testing some CSS styles. Driblet this code into your style.css file:

                                          
body, #page {
                      
groundwork: #ECE8C1;
                      
}
                                      

So, reload your font page. If there's a new background color, everything is working as intended.

5. Create a custom page.

Now that your kid theme is up and running, it'southward fourth dimension to build a custom page. Starting time by creating a new file in your child theme and save it as page-landing.php. Then, add this code:

                                          
<?php
                      
/**
                      
Template Proper name: Landing Page
                      
**/
                      
?>
                                      

On the Add New Page tab in WordPress, select the dropdown Template menu and select Landing Page. So, click Publish.

Image Source

If y'all preview the page, it volition be blank — you'll yet need to add some PHP markup.

half dozen. Add images.

To start adding images, use this code in your page-landing.php file:

                                          
<?php
                      
/**
                      
* Template Name: Landing Page
                      
*/
                      
?>
                                            
<!DOCTYPE html>
                      
<html <?php language_attributes(); ?> class="no-js">
                      
<head>
                      
<meta charset="<?php bloginfo( 'charset' ); ?>">
                      
<meta proper noun="viewport" content="width=device-width, initial-scale=1">
                      
<link rel="profile" rel="noopener" target="_blank" href="http://gmpg.org/xfn/11">
                      
<?php wp_head(); ?>
                      
</head>
                                            
<body <?php body_class(); ?> style="background: #6FBB72 url(<?php echo $src = the_post_thumbnail_url( '' ); ?> ) echo l% 0 stock-still !of import;">
                                      

Using this lawmaking should brandish a big background image — reload your site to make sure information technology's working.

7. Create a custom header.

Now you lot demand a custom header for your landing folio. Put this code in your page-landing.php file afterwards the <torso> tag.

                                          
<div id="landing-folio" grade="hfeed site">
                                            
<div grade="site-branding">
                      
<p grade="site-title aligncenter"><a rel="noopener" target="_blank" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                      
</div><!-- .site-branding -->
                                      

When yous preview your landing page, you should see a title, white background, and background prototype. Remove any background color with this lawmaking:

                                          
.site {
                      
background-colour: transparent;
                      
}
                                      

8. Add more content.

Add together the rest of your landing page content with this markup in your folio-landing.php file, but below the <!-- .site-branding --> line:

                                          
<div class="sidebar sidebar-bribe">
                                            
<?php if (have_posts()) : ?>
                                            
<?php while (have_posts()) : the_post(); ?>
                                            
<h1 class="landing-title"><?php the_title(''); ?></h1>
                                            
<?php the_content(); ?>
                                            
<!-- https://codex.wordpress.org/Function_Reference/wp_link_pages -->
                      
<?php endwhile; ?>
                                            
<?php endif; ?> <!-- mdl-cell-8 //#primary -->
                      
</div>
                                      

If you reload your landing page, you should see your featured background image, site title, and your call-to-action.

nine. Add extra style with CSS.

Finally, requite your landing page some flair with CSS. Put this code in your style.css file:

                                          
.site {
                      
background-color: transparent;
                      
}
                                            
div#landing-page {
                      
max-width: 900px;
                      
margin: 0 auto;
                      
}
                      
div#landing-page .site-branding .site-title a {
                      
color: #4CAF50;
                      
background-color: #FFFFFF;
                      
background-color: rgba(255, 255, 255, 0.79);
                      
padding: 5px;
                      
border-radius: 5px;
                      
}
                                            
label, input {
                      
margin-bottom: 14px;
                      
}
                                            
#landing-page .sidebar, #landing-page .sidebar-bribe {
                      
background: #67CA6B;
                      
background: rgba(103, 202, 107, 0.87);
                      
border-radius: 10px;
                      
box-shadow: 5px 3px 9px #5B6766;
                      
padding: 0;
                                            
}
                                            
h1.landing-title, .landing-content {
                      
padding: 1em;
                      
color: #fff;
                      
}
                                            
h1.landing-championship{
                      
padding-bottom: 0;
                      
line-elevation: normal;
                      
}
                                            
h1.landing-championship small-scale {
                      
colour: #650801;
                      
font-size: 75%;
                      
brandish: block;
                      
}
                                            
#landing-page button, input[blazon="submit"]
                      
{
                      
background: #E91E63;
                      
display: block;
                      
width: 100%;
                      
}
                                            
@media screen and (min-width: 56.875em){
                                            
#landing-page .sidebar {
                      
float: left;
                      
margin-left: l%;
                      
padding: 0;
                      
width: l%;
                      
}
                      
}
                                      

While there's a reasonably steep learning curve here, one time yous've created your first landing page from scratch in WordPress, you're amend equipped to customize new pages and add new styles someday you want.

Making the About of Landing Pages

Landing pages provide a way to generate measurable leads on your WordPress site. By tracking how many visitors fill out landing folio fields, you tin evaluate the impact of your current marketing strategy and call-to-action (CTA).

Suppose users consistently leave your landing page without providing their contact details. In that instance, it might exist that you lot're not offering the right resource or clearly articulating the value suggestion of your business.

Implement these all-time practices to make the most of your landing page:

• Align your aims — It's critical to marshal marketing advert campaigns with landing page CTAs. If your site ads and pages discuss achieving a specific goal or getting a neat price on sure products, make sure your landing folio directly relates to this outcome.
• Proceed it simple — The goal of your landing page is to drive user action — and that means keeping things simple. Use the fewest number of form fields possible and brand every step of the process clear to visitors to maximize conversions.
• Test, examination, test — Yous won't know what works until y'all test it. And test it once more. Examination your CTAs, and test your landing page copy by making information technology live and seeing what happens. Record the number of leads generated, then tweak your page and try again to notice exactly what works.
• Design for bear on — Images speak louder than words. Use backgrounds that pop and related imagery to get your point across without cluttering the page.
• Get social — User reviews on your landing page are a cracking way to encourage organic involvement — just make sure they're regularly updated.

To encounter these best practices in action, check out nineteen of the All-time Landing Page Design Examples You Demand to Run into in 2020.

Plugins to Build a Landing Page in WordPress

If you'd like aid setting upwardly your landing page, consider a WordPress plugin. Some options include:

1. Elementor

Price: $49/year

With more than than 5,000,000 agile installations, Elementor is one of the about popular landing page plugins bachelor, offering both easy-to-utilize functions for companies merely getting started and more advanced tools for established organizations.

Elementor is an all-in-one solution that lets you control every aspect of your website workflow and hands scales from supporting individual blogs and pages to multiple branded sites.

Since it'southward a drag-and-driblet architect, you don't necessarily need to have technical skills before you can utilise Elementor to build your WordPress landing folio.

2. Beaver Builder

Price: $99/year

This plugin offers everything from landing folio creation to total-site designs. Beaver Builder includes multiple pre-build templates and gives you the ability to position images and text exactly where you want with a uncomplicated drag-and-driblet format.

Beaver Architect is as well great for edifice landing pages because information technology's compatible with other WordPress themes and plugins. And you tin employ it to build whatever kind of landing page you want.

3. Thrive Architect

Price: $xxx/month

Thrive offers a visually-driven WordPress building feel with 325 landing folio templates. In addition, thrive includes instant drag-and-drop editing and pre-built conversion elements to assistance capture company involvement and streamline landing page creation.

Thrive Architect is unlike from the other landing page plugins on this listing because it was created specifically for building business organisation websites.

4. Divi

Cost: $89/month

Divi is an advanced visual builder for WordPress websites. The plugin comes with many elements you tin use to optimize your landing page for conversions.

This plugin offers a complete "what yous see is what y'all get" (WYSIWYG) feel that lets you see what you're building in real-time. Divi as well allows you to go through your entire design history to undo mistakes or recover previous design templates.

Additional features that make Divi nifty for building landing pages include 800+ premade designs, 100+ full website packs, and 40+ website elements.

Start Creating Your WordPress Landing Page Today

The right landing page tin can assist capture visitor interest and drive client conversion. Brand the near of your WordPress site with make clean, contextual, and content-rich landing pages.

Editor's note: This post was originally published in Feb 2020 and has been updated for comprehensiveness.

Originally published Nov 26, 2021 7:00:00 AM, updated Nov 26 2021

felizhildause.blogspot.com

Source: https://blog.hubspot.com/website/create-wordpress-landing-page

Share this post