17713433920 info@mac163.com
wordpress动态

登陆页面是一个网页，主要用于通过潜在客户表单来吸引访问者的注意力及其详细信息（例如电子邮件地址）。它们旨在根据您所营销的产品针对特定的受众。

登陆页面也可以是挤压页面，用于将流量重定向到主网站。您可以在站点上拥有任意数量的登录页面。实际上，您拥有的登陆页面越多，获得的潜在客户就越多。

例如，如果您要通过电子邮件营销活动营销新产品，则可以将流量从目标电子邮件营销活动重定向到专门设计的产品目标网页。同样适用于您通过电子邮件或其他方式进行的任何促销。关键是要为您启动的每个广告系列创建唯一的着陆页。

如何从头开始使用wordpress构建登陆页面
如何从头开始使用wordpress构建登陆页面

登陆页面基础

没有有关登录页面必须具有或外观的书面规则。但是，经过多年尝试各种着陆页样式的尝试，我得出的结论是，在设计着陆页时应考虑某些关键方面。以下是前四名：

  1. 特殊性：在设计目标网页时，请具体说明您所提供的内容。您还应该了解其中的内容。例如，如果您在用户登录目标网页时提供免费信息。您将如何受益？
  2. 好处：最好的营销术语可以吸引访问者的注意。但是，如果您没有清楚地说明它们将如何受益，那么您的转换可能会很困难。良好的目标网页必须清楚说明用户将如何从优惠中受益。
  3. 紧迫性：目标网页上的措辞应具有紧迫感。说明为什么页面访问者现在就应立即接受您的报价。
  4. 转换：现在，您已经吸引了访客的注意力，并设法说服了他们您的优惠。那么他们如何得到它呢？您的目标网页必须尽可能简化潜在客户转换。

用WordPress创建登陆页面

WordPress提供了许多构建令人惊叹的登录页面的方法。我将讨论可用于创建目标网页的两个选项，以及仅向具有编码知识的开发人员或高级WordPress用户推荐的第三个选项。

1.如何用WordPress主题创建登录页面

有大量的WordPress主题专门用于创建目标网页。这些单页主题通常包含出色的功能，例如本地滚动，引人注目的滑块，功能框等，这些功能使构建自己的目标网页变得容易。这是我们的一些最爱。

Zerif Pro WordPress主题

信息与下载查看演示

Zerif Pro是超级流行的Zerif lite单页商务WordPress主题的高级版本。通过简单易用的选项来创建专业网站（例如拖放页面部分），“网站来源”页面构建器，可自定义的颜色，滑块等，它是您着陆页的绝佳选择。

WordPress总主题

信息与下载查看演示

当然，Total WordPress Theme（包括40多个快速入门演示）是一个很好的选择，尤其是对于登录页面。该主题具有500多个实时主题定制程序设计选项（颜色，字体，页面宽度等），前端拖放页面构建器，100个页面构建器元素，自定义帖子类型（用于员工，投资组合和推荐），可自定义的标题和页脚加吨。道达尔（Total）助您一臂之力。

Freelancer WordPress主题

信息与下载查看演示

Freelancer是一种灵活的单页面WordPress主题，专为自由设计师，开发人员，摄影师和其他创意而设计。该主题包括一个简单的模块化布局，用于添加部分并显示重要信息，例如服务，以前的工作，联系信息等。

SImpleShift WordPress主题

信息与下载查看演示

该SimpleShift一个页面WordPress主题是一个干净和简单的商务风格的主题，你可以用它来建立一个页面的网站。该主题具有许多功能，可使用图标框，标注，推荐词等来为您的着陆页展示关键点。

WP Singular WordPress主题

信息与下载查看演示

WP Singular是一个直观的WordPress主题，具有一个简单的页面生成器，自定义小部件，无限的颜色，ajaxed文件夹，Google字体等。这是着陆页宣传您的商品或服务的良好起点。

确定最喜欢的主题后，请安装并激活它！要添加新主题，请访问外观>主题>添加新内容，然后从WordPress.org存储库中浏览一个很棒的免费主题，或单击“上载”链接从其他位置安装高级或免费主题。

用主题创建主页

在此示例中，我们将使用ThemeIsle的Zerif Lite，您可以从其网站或WordPress仪表板获取。简单安装并激活主题即可上手。

大多数单页WordPress主题使用“主页”模板来简化入门。要使用模板，请进入“ 页面”>“添加新内容”，为页面命名，然后从侧栏中的“ 页面属性”部分中选择页面模板。在Zerif中，这是Frontpage  模板。然后发布您的页面。

发布首页后，您需要将其设置为首页，以便访问者访问您的URL时显示该首页。只需进入“设置”>“阅读”，然后在“ 首页显示”>“静态页面”下选择刚创建的页面。然后保存您的更改。

现在，您可以开始自定义目标网页内容了。Zerif Lite使用定制器中“首页部分”选项下的主题选项（可以在“ 外观”>“定制”下访问）。您也可以单击蓝色铅笔图标以快速编辑部分页面内容。完成后，只需保存即可，您的着陆页将准备就绪！

并非所有的登陆页面主题都将WordPress Customizer用于您的首页选项。有些主题使用自定义帖子类型，这些主题类型会显示在您的WordPress仪表板中（通常在您的帖子，媒体，页面等选项附近），有些包含仅用于主模板的内置拖放元素，而其他主题则包括页面构建器（我们将我在说下一个）。如果您对如何使用主题有任何疑问，请查阅文档，或者它是高级主题联系支持。

2.如何使用WordPress插件创建登录页面

主题很棒，但是使用WordPress构建登陆页面的最简单方法之一就是使用插件。有许多免费和高级版本的着陆页插件。它们或多或少都以相同的方式工作：通常，它们提供了用于不同目的的着陆页模板集合。

安装和激活后，您可以使用插件的设置页面来管理页面自定义。某些插件允许使用第三方扩展，您可以在其中使用挂钩，过滤器和操作为登录页面添加更多自定义和功能。有几个值得注意的WordPress登陆页面插件需要考虑：

但我们也建议您考虑使用一般的页面构建插件，例如：

我们个人最喜欢的是WP Bakery Page Builder  ，它恰好随我们最畅销的Total WordPress主题免费提供  。

如何使用插件构建登录页面

要使用页面构建器插件，您首先需要安装并激活兼容的主题。大多数主题都不会给您带来任何麻烦，但是如果可以找到专门创建或经过测试可与您的首选插件配合使用的主题，那总会更好。在我们的示例中，我们将使用具有  Total主题的WP Bakery Page Builder，它将提示您安装并激活推荐的插件。

如果您的主题不包含提示，请查看文档以了解如何安装所有包含的插件。或者，如果您自己购买了页面构建器，请转至插件>添加新>上传插件来安装和激活。

页面构建器插件激活后，转到页面>添加新内容开始构建。

道达尔碰巧为“着陆页”页面模板包含一个特殊选项。构建页面时，此模板将为您删除页眉和页脚部分（这很有意义，因为这些区域更适合需要在页面之间导航的多页网站）。如果要选择模板，只需确保保存您的页面即可。

准备好页面后，就可以开始构建了。如果使用Visual Composer，您现在可以选择使用后端编辑器或实时前端编辑器。Total完全支持前端编辑器，我们强烈建议您使用它，因为您可以在构建时看到每个元素。完成编辑后，只需确保更新或发布页面即可。如果您想了解有关使用此特定页面构建器的更多信息，请查看我们的Visual Composer指南。

接下来，您需要将首页设置为刚创建的页面（此步骤听起来有点熟悉，因为大多数主题都需要您编辑此设置）。因此，请转到“设置”>“阅读”>“首页显示”>“静态页面”，然后选择新的主页。

奖励：导入现成的模板

哦，如果您使用的是Total WordPress主题，则还可以选择导入预制的着陆页（或多页网站设计）以开始使用。在主题面板>演示进口商中，Total包括大量进口。

单击开始导入。道达尔甚至会提示您安装并激活您要导入的特定演示所需的插件。

从那里，您可以选择导入XML内容，图像，主题定制器设置，小部件甚至滑块（如果适用）。导入完成后，您可以根据自己的喜好编辑和自定义页面。

要进行更改，只需转到页面，找到要编辑的页面，将鼠标悬停并单击“使用页面构建器编辑”选项。这将打开前端编辑器。只需指向并单击以进行编辑，然后单击屏幕顶部的“更新”按钮以保存您的更改。确实没有那么容易！

其他在线工具

像插件一样，有许多在线工具可用于创建登录页面（只需进行快速Google搜索，您就可以自己看到）。这些基本上就像所见即所得（WYSIWYG）网站构建器一样工作，使您可以选择和使用用户界面组件来快速启动登录页面。尽管它们有其局限性，但有些并不灵活。正确设计和手工编码的页面通常会更胜一筹，并且具有无限的灵活性。

3.如何使用WordPress页面模板构建登录页面（高级）

如果您是开发人员或知识丰富/高级的WordPress用户，则可以编辑当前的WordPress主题以为目标网页添加自定义页面模板。许多商业WordPress主题都带有大量的页面模板，每个页面模板都有特定的用途。一个主题可以具有一个或多个模板。尽管高质量的主题提供了多种用于各种目的的预先构建的着陆页模板。

也就是说，您可以从空白页面模板创建自己的登录页面。您只需要一些CSS技能和设计眼即可。出于说明目的，我将使用TwentyThirteen主题中的空白页面模板构建一个简单的登录页面。我将在空白页模板上放置一个醒目的标题以及一个大按钮。

请注意，如果您要构建一个具有专用域的登录页面，即该方法不会成为您的主要网站的一部分，则此方法非常理想。多站点在设计上没有给您太大的灵活性，但是专用的域使您可以自由地随意拆卸主题，而不必担心其他页面。

注意：我们仅向经验丰富且经验丰富的编码人员的开发人员或高级WordPress用户推荐此选项。如果您不熟悉WordPress，我们强烈建议您在构建目标网页时坚持使用主题和插件。

步骤1：创建一个子主题文件夹

由于我将更改另一个主题，因此从创建子主题开始很重要。这样，在更新核心主题时，对主题的任何更改都不会丢失。

首先，您首先需要通过FTP连接到您的网站，并在wp-content / themes目录中为您的子主题创建一个新文件夹。我们建议您在正在编辑的主题的末尾添加“子级”（例如，二十三个子级或类似的东西）。您将在此处添加新文件来更改核心主题。

步骤2：为您的子主题创建一个新的style.css文件

打开刚刚创建的子主题文件夹，并添加一个名为style.css的新文件（这将是您的新样式表）。接下来，在WordPress仪表板中，转到外观>编辑器。在编辑器窗口中，您将看到主题的默认样式表已 打开。

使用原始主题文件作为指南，为您刚刚创建的子主题的style.css文件创建标题部分，如下所示：

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen WordPress theme
Version: 1.0.0
*/

准备好新样式表后，下一步就是通过将其排入队列来加载父样式表。

步骤3：为您的子主题创建一个functions.php文件

激活子主题时，您的网站将不会加载任何样式，因此您需要加载父主题的样式表。为此， 在您的子主题文件夹中创建一个新的空白文件，命名为  functions.php。然后添加以下代码：

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentythirteen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentythirteenchild-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

这将在父主题样式表之后加载您编辑的子主题样式。现在，您将拥有一个适用于TwentyThirteen主题的儿童主题–是时候进行更改了！

步骤4：自定义样式

准备好您的子主题之后，您就可以开始自定义目标网页了。首先，您可能要删除主导航，因为您正在创建登录页面。为此，将以下代码添加到您的子主题style.css文件中（注意：导航元素名称可能与我们的导航元素名称不同。要找到元素名称，可以使用浏览器检查器工具或检查header.php文件）：

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

如果您现在查看站点，导航将消失。 相反，我们将插入一个大的CTA按钮，该按钮将重定向到注册页面，然后再重定向到主网站。

接下来，我们将通过更改字体大小简单地自定义样式表中的网站标题（h1）。网站标题由类.site-title标识 。再次，仔细检查您自己的主题，以查看标题使用的元素名称，因为它可能与示例中的元素名称不同。要扩大字体大小，请将此代码的最后一行添加到子主题的样式表中：

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

保存并刷新页面。您应该看到一个更大的标题：

步骤5：创建一个空白页面模板并将其命名为front-page.php

在WordPress编辑器中，单击Page Template（page.php）以查看其代码。将第一行复制到get_header（），该代码应与此类似：

<?php
/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

打开代码编辑器，然后创建一个名为front-page.php 的新文件。 粘贴上一步中复制的行。将此新文件保存在您的子主题文件夹中。

为什么选择front-page.php？由于这将是一个静态首页，因此您要确保始终选择并显示该首页，并且front-page.php在WordPress模板层次结构中具有最高优先级。另外，您可以（也可以不）在模板文件中插入页脚（使用get_footer（）函数）。我已经省略了。

删除注释部分的第一行，然后将其替换为模板名称-我们称为“ 我的着陆页”。

保存更改。如果您现在尝试查看您的网站，则会看到空白页，其中仅包含已修改的标题。那就是front-page.php模板。由于我们尚未放置任何内容，因此为空白。

步骤6：为目标网页插入自定义内容标记

现在我们已经编辑了标题并创建了一个空白页面模板，是时候将实际内容添加到登录页面了。剩下的就是将我们的大按钮放入新的首页模板中。只需将此代码粘贴到文件中并保存。这只是包装在div中的链接，仅此而已。

/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

    <div class="landing-page">
        <a href="#" class="button"> Big button here</a>
    </div>

当您查看站点时，您将看到我们刚刚插入页面内容部分的标题以及该按钮的链接文本：

现在该用CSS样式使页面栩栩如生了。转到外观>编辑器。单击样式表 以打开style.css文件进行编辑。粘贴此代码并保存：

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

.landing-page {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.button {
    display: block;
    width: 50%;
    background: #FF6600;
    border: 2px solid #FF8533;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font: bold 3.2em/100px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 100px auto auto auto;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 3px 3px rgba(255, 255, 255, 0.2);
}

a.button { text-decoration: none }

a.button:hover {
    color: #fff;
    background: #FF8533;
    background: -webkit-linear-gradient(top, #FF8533, #FF8533);
    background: -moz-linear-gradient(top, #FF8533, #FF8533);
    background: -o-linear-gradient(top, #FF8533, #FF8533);
    background: -ms-linear-gradient(top, #FF8533, #FF8533);
    background: linear-gradient(top, #FF8533, #FF8533);
}

您的页面现在应如下所示：

恭喜你！您刚刚使用WordPress构建了一个自定义登录页面。虽然您可能不会在现实生活中使用它，因为它是非常基本的，但其想法是向您展示如何使用页面模板来进行操作。您可以编辑任何主题的任何页面，并以这种方式创建自定义登录页面。

微信二维码

微信扫描二维码联系我们！
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答：WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等！

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部