截至2020年1月，全球有超过45.4亿互联网用户，并且在过去五年中每天（每天）有64万新用户，您的WordPress网站拥有巨大的潜在受众。
但是，要充分利用这种互联网流量趋势，不仅需要美观的WordPress网站，还需要一种方法来吸引用户的注意力，说服他们共享他们的联系信息，然后创建并提供他们想要看到的内容。
使用WordPress网站上的HubSpot工具，无需处理代码即可连接两个平台。点击这里了解更多。
成功的最短途径是出色的WordPress登陆页面。这里介绍了它们为什么重要，它们提供了什么，如何在WordPress中创建登录页面以及可用的工具来简化登录页面过程。
让我们开始吧。
登陆页面基础
用户首次访问您的WordPress网站时看到的页面就是您的主页。它通常包含有关您的站点的信息，包括公司名称（如果有），相关图像以及指向站点上其他产品页面或内容的链接。
同时，登录页面是专门构建的页面，用于捕获访问者的联系详细信息，以换取特殊优惠，常规新闻通讯或电子书和白皮书等资源。虽然您的首页可能会吸引访问者的注意力并鼓励他们在WordPress网站上花费更多的时间，但登录页面旨在通过捕获访问者的信息来产生业务线索。
这些页面的格式，布局和设计因您的业务类型和所提供的资源而异，但是它们共享一个共同的功能集：表单字段以捕获访问者数据。所要求的信息由您决定-一些站点只要求提供电子邮件地址以发送新闻稿副本或电子书链接，而其他站点则需要更详细的信息，例如姓名和电话号码，以换取特殊的促销或销售。
充分利用登陆页面
登陆页面提供了一种在WordPress网站上生成可衡量的潜在客户的方法。通过跟踪有多少访客填写着陆页字段，您可以评估当前营销策略和号召性用语（CTA）的影响。例如，如果用户单击进入您的登录页面但不提供联系详细信息而离开，则您可能没有提供正确的资源或明确表达了企业的价值主张。
要充分利用目标网页，请从以下最佳做法开始：
- 调整您的目标–使营销广告系列与目标网页CTA保持一致至关重要。如果您的网站广告和网页讨论了如何实现特定目标或以某些产品获得高价，请确保您的目标网页与该结果直接相关。
- 保持简单–目标网页的目标是促使用户采取行动-这意味着保持简单。使用尽可能少的表单字段，并使访问者清楚流程的每个步骤，以最大程度地提高转化率
- 测试，测试，测试–在测试之前，您不会知道什么有效。并再次测试。测试您的CTA，并通过激活它并查看会发生什么来测试您的着陆页副本。记录产生的潜在顾客数量，然后调整页面，然后重试以找到确切的方法。
- 冲击设计—图像胜于雄辩。使用弹出的背景和相关图像可以使您的观点清晰明了，而不会使页面混乱。
- 获得社交–登陆页面上的用户评论是鼓励自然兴趣的好方法-只需确保定期进行更新即可。
如何在WordPress中创建登录页面
- 选择一个主题。
- 删除不需要的内容。
- 设置您的主页。
- 自定义您的页面。
- 上线
您知道着陆页为何重要-以及要有效地吸引客户需要哪些着陆页。但是如何在WordPress中构建一个呢？
您在此处有一些选择：通过更改和替换关键元素来修改现有主题以用作您的登录页面，或者使用插件来简化页面构建过程。
如果您有足够的时间和技术知识，这里是如何在WordPress中创建登录页面的快速概览。
1.选择一个主题。
从WordPress仪表板的“ 我的网站”>“设计”>“主题”中选择一个主题，或下载并安装新主题。然后，单击主题名称旁边的三个点，然后单击“ 激活”。
2.删除不需要的内容
登陆页面的目标很简单，因此下一步就是删除多余的帖子和页面。转到“ 我的网站”>“网站”>“页面”，然后单击不需要的任何页面旁边的三个点，然后单击“ 废纸。”。保留哪个页面都没有关系。
3.设置静态主页。
使用您选择保留的页面旁边的三个点，将其设置为静态主页。这不同于您的常规主页，而是确保您的自定义登录页面是访问者从主WordPress网站点击进入时登陆的位置。
资源
4.自定义您的页面。
单击三个点，然后单击编辑。在编辑器中，您可以添加文本，图像，联系表格和号召性用语。
资源
5.上线。
单击更新以发布您的页面，然后从您的主要WordPress网站链接到该页面。
如何在WordPress中建立自定义登录页面
- 创建一个子主题。
- 创建一个style.css文件。
- 建立一个functions.php文件。
- 安装并激活您的子主题。
- 创建一个自定义页面。
- 添加图像。
- 创建一个自定义标题。
- 炫耀您的内容。
- 使用CSS添加额外的样式。
如果您希望登录页面的外观更具定制性，则可以更深入地研究代码并自己完成。合理的警告？您将需要一些HTML和CSS技能才能完成这项工作。以下是分步指南：
1.创建一个子主题。
WordPress网站的当前主题通常称为“父主题”。为确保您创建的所有目标网页均不会对该主题产生不利影响，请先创建一个子主题。
2.创建一个style.css文件。
一旦启动并运行了子主题，就需要使用以下代码修改style.css文件：
/*
Theme Name: Landing Page Theme
Description: Twenty Sixteen Child Theme With custom landing page
Author: Tahir Taous
Author URI: https://pagely.com
/blog
Template: twentysixteen
Version: 1.0
Text Domain: twentysixteen-child
*/
3.构建一个functions.php文件。
接下来，您需要构建您的php函数。将以下代码添加到您的子主题文件夹中：
<?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-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts‘, ‘theme_enqueue_styles‘ );
4.安装并激活您的子主题。
现在是时候在WordPress页面上安装子主题并激活它了。通过测试一些CSS样式，确保其正常工作。将此代码放入您的style.css文件中：
body, #page {
background: #ECE8C1;
}
5.创建一个自定义页面。
现在您的子主题已启动并开始运行，现在该构建自定义页面了。首先在您的子主题中创建一个新文件，然后将其另存为page-landing.php。然后，添加以下代码：
<?php/**
Template Name: Landing Page
**/
?>
在WordPress 的“ 添加新页面”标签上，选择下拉模板菜单，然后选择登陆页面。然后，点击发布。
资源
如果您预览页面，该页面将为空白-您仍然需要添加一些php标记。
6.添加图像。
要开始添加图像，请在page-landing.php文件中使用以下代码：
<?php
/**
* Template Name: Landing Page
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class=”no-js“>
<head>
<meta charset=”<?php bloginfo( ‘charset‘ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”profile” 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( ” ); ?> ) repeat 50% 0 fixed !important;”>
使用此代码应显示较大的背景图片-重新加载您的网站以确保其正常工作。
7.创建一个自定义标题。
现在，您需要一个用于登录页面的自定义标题。将此代码放在<body>标记之后的page-landing.php文件中。
<div id=”landing-page” class=”hfeed site“>
<div class=”site-branding“>
<p class=”site-title aligncenter“><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home“><?php bloginfo( ‘name‘ ); ?></a></p>
</div><!— .site-branding —>
预览着陆页时，您应该会看到标题，白色背景和背景图片。使用此代码删除所有背景色：
.site {
background-color: transparent;
}
8.添加更多内容。
在<！-.site-branding->行的正下方，在page-landing.php文件中添加带有此标记的其余着陆页内容。
<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>
如果您重新加载着陆页，您应该会看到特色背景图片，网站标题和号召性用语。
9.使用CSS添加其他样式。
最后，为您的目标网页添加CSS风格。将此代码放在您的style.css文件中：
.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-title{
padding-bottom: 0;
line-height: normal;
}
h1.landing-title small {
color: #650801;
font-size: 75%;
display: block;
}
#landing-page button, input[type=“submit”]
{
background: #E91E63;
display: block;
width: 100%;
}
@media screen and (min-width: 56.875em){
#landing-page .sidebar {
float: left;
margin-left: 50%;
padding: 0;
width: 50%;
}
}
尽管这里的学习曲线相当陡峭，但是一旦您在WordPress中从头开始创建了第一个登录页面，您便可以更好地自定义新页面并随时添加新样式。
在WordPress中构建登陆页面的插件
如果您需要帮助来设置登录页面，请考虑使用WordPress插件。一些选项包括：
WordPress登陆页面
这是一个免费的登陆页面插件，提供了构建工具，基本指标和第三方附加组件支持。评论好坏参半，但是这个开源软件是帮助构建目标网页的经济实惠的选择。WordPress登陆页面还包括一个可视化的编辑器，用于查看更改的发生情况，以及轻松克隆其他站点当前登陆页面的工具。
元素
Elementor是下载次数最多的着陆页插件之一，下载量超过4,000,000，既为刚起步的公司提供了易于使用的功能，又为已建立的组织提供了更高级的工具。Elementor是一种多合一的解决方案，可让您控制网站工作流程的各个方面，并轻松地从支持单个博客和页面扩展到多个品牌站点。
海狸生成器
该插件提供从登陆页面创建到全站点设计的所有内容。Beaver Builder包含多个预构建模板，并且还使您能够通过简单的拖放格式将图像和文本精确定位在所需的位置。
蓬勃发展的建筑师
Thrive提供了325种登陆页面模板的可视化WordPress构建体验.Thrive包括即时拖放编辑和预构建的转换元素，以帮助吸引访问者的兴趣并简化登陆页面的创建。价格从每月25美元起。
正确的目标网页可以帮助吸引访问者的兴趣并促进客户转化。通过干净，上下文相关且内容丰富的登录页面，充分利用您的WordPress网站。
--- END ---