我们经常在WordStream上讨论如何优化登陆页，但是你如何在第一个地方着手构建登陆页呢?在开始优化之前，您需要优化一些东西!构建登陆页面有很多种方法，从卷起袖子，用HTML、CSS和JavaScript编写一个登陆页面，到使用允许自定义登陆页面模板的web服务。
在今天的文章中，您将学习如何从头开始构建登录页面，并看看哪个选项适合您。在这篇文章的结尾，你将准备好开始建立一个登陆页面，将推动转换。除非它看起来像上图，在这种情况下，你可能需要重新考虑你的生活选择。为什么你需要建立一个登陆页面
快速-我想解决一些我们经常在WordStream这里看到的事情。因为他们没有意识到一个特定的、相关的登陆页面的重要性，许多营销人员和企业主只是简单地将客户从他们的谷歌和Facebook广告直接指向他们的网站主页。
这是一个可以理解的错误，而且代价高昂。我们得到它。当你看你自己的网站主页时，它似乎是互联网上最直观、最容易导航的页面。它是您每天都要与之交互的东西，如果没有意识到这一点，您可能会误以为自己对页面的熟悉程度是惊人的易用性。虽然你的主页实际上可能设计得非常好，但它仍然不是你登陆页面的好选择。例如，如果你在Facebook上向冷漠的受众做广告，你引导到你的网站的人以前从未接触过你的业务。他们很可能不知道如何从你的主页导航到你在Facebook广告中提供给他们的任何东西。这就是为什么用你的主页作为登陆页面是一个代价高昂的错误。它会混淆潜在客户，而混淆的潜在客户不太可能转变。事实上，困惑的客户甚至可能不知道如何转换。总之，这是一场灾难。好消息是，这是一个完全可以避免的问题。通过使用下面我将列出的方法创建一个登陆页面，你可以为你的业务带来更多的转换。因为你可以在不接触广告的情况下推动更多的转换，你的广告支出回报率(ROAS)将会创造奇迹。
好了。让我们开始吧。在我们深入研究从头开始构建登陆页面的细节之前，让我们先了解一件事——是的，HTML、CSS和其他web技术都有一个学习曲线。然而，学习如何编写网页代码与编写应用程序、构建超级计算机或为意图统治世界的凶残机器人注入(人工)生命是不同的。学习HTML、CSS和JavaScript需要时间和精力，但并不像你想象的那么困难。首先，让我们看看这些web技术及其功能。超文本标记语言，简称HTML，是网络的“语言”。注意，HTML不是一种编程语言，而是一种标记语言(顾名思义)，用来定义网页的内容和结构。让我们来看看。图片来源:Mozilla Developer Network
看到代码是如何定义页面的内容和结构的了吗?HTML的基础知识超出了本文的范围，但是在web上有一些很好的资源可以帮助您学习。其中最好的有:
Codecademy(关于HTML、CSS、JavaScript等的免费交互式编码练习)Treehouse(广泛的视频库，免费试用，每月订阅)Mozilla Developer Network(关于各种web技术的免费文本教程，包括HTML) HTMLCSS
HTML定义了网页的内容和结构，而级联样式表(CSS)定义了网页的外观。样式表被称为级联，因为对顶级样式表所做的更改可以在整个站点中“级联”，允许您通过调整单个样式表的代码对站点的外观进行大范围的更改。在过去，CSS代码被直接插入到HTML文档中，但这不是最佳实践——当然，它可以工作，但不要养成坏习惯。将CSS和HTML代码分开。这里有一个CSS代码的示例:再次强调，我们不打算在这里讨论属性、值、选择器和声明，但是有很多资源可以帮助你加快速度，包括上面HTML部分列出的站点。想要了解CSS有多强大，请查看Dave Shea的CSS Zen Garden。尽管这可能难以置信，但您将看到的每个示例样式都应用于完全相同的HTML代码。很酷,对吧?通过更改登录页面的CSS，您可以尝试完全不同的设计，而不必返回并手动调整每个页面的HTML。那么，您已经创建了一个功能性的(并且非常漂亮的)登录页面——现在您需要添加一些交互性。这对于登录页面至关重要，因为您希望您的潜在客户实际做一些事情，无论是下载白皮书还是请求一个销售电话。这是通过JavaScript支持的动作调用来实现的。
JavaScript是一种“真正的”编程语言，但它最常作为客户端脚本语言使用。简单地说，这意味着JavaScript让浏览器完成大部分工作。JavaScript可以用来为网页添加功能，例如:通过网页表单向服务器提交信息创建弹出窗口验证用户输入，如登录凭证动画导航元素如果你真的想从头开始手工制作自己的登陆页面，你需要一些技术技能，但回报会很丰厚。首先，您可以完全控制页面的结构、显示方式以及与服务器的交互方式。你还可以因为自己独立设计和编写页面而大吹特吹。模板吗?我们不需要什么该死的模板!尽管如此，这种方法对编码新手来说仍然是时间密集型的—更不用说有点吓人了。肯定有更简单的方法，对吧?所以你需要一个快速的登录页面。你会做什么?使用一个模板!尽管如此，不要感到难过——在很多情况下，这是制作登陆页面的最好方法。(如果使用模板仍然让你一片空白，那么看看登陆页面的灵感，让你的创意源源不断。)有很多网站，建立一个登陆页面是一件轻而易举的事。我们来看看其中的两个——Unbounce和Wix。这篇文章顶部的登陆页是使用Unbounce从一个现有的模板构建的，它标榜自己是“营销人员的登陆页构建器”。使用Unbounce的一个主要好处是，它包含了一系列专门针对那些主要关注转换的人的功能。使用Unbounce的另一个好处是，你可以A/B测试两个版本的登陆页面，以确定哪个更有效地提高转化率-奖励!
Unbounce提供超过80个模板，几乎每一种类型的登陆页面，你可能需要，包括产品发布，电子邮件通讯订阅页面，电子书下载，在线学习页面和更多。我选择了“通过极简桌面灯点击”模板作为本文顶部的示例。你也可以选择从一张白纸开始，然后从头再来如果你有野心的话。让我们假设你想要为你正在运行的领先一代PPC活动创建一个登陆页面。“York”模板是开始这类页面的好地方。
Unbounce允许你调整模板的每一个元素来满足你的需要。你可以更改副本，使用不同的字体，切换图像，甚至移动整个元素到任何你喜欢的地方。只花了几分钟，我就想出了这个变体:
。它设计得不是很好，但这不是重点——这个快速而肮脏的重新设计只花了不到10分钟的时间，而且不需要编写任何代码。想象一下你在几个小时内能做什么!总的来说，Unbounce是一个构建登陆页面的优秀平台。它不是免费的(创业者和新企业的起价为每月49美元)，但你可以注册免费试用，开始动手实践。Unbounce是专门针对那些希望提高转化率的营销人员的，而Wix则是更通用的。
Wix提供了一系列模板，可以根据业务和行业类型进行分类。对于本例，假设您运行一个专门从事手工工艺品的电子商务网站。
一旦选择了您的业务类型，您将看到一系列根据您的业务类型设计的模板。这些是一些在线工艺品和爱好商店的模板。
现在是时候开始定制页面了。我选择了“Lil Pillow Shop”模板，因为我偷偷喜欢一个枕头上有一个视频游戏控制器。可惜我的猫可能会毁了它——这就是为什么我不能拥有美好的东西。
Wix提供了一些定制选项，但远没有Unbounce多。当然，如果您不需要修补每一个页面元素，这可能满足您的需要。Wix最大的缺点之一是，许多模板不能真正被视为登录页面，因为其中许多模板缺乏行动呼吁、表单和登录页面真正需要的其他元素。Wix缺乏的另一个让许多营销人员和企业主感到沮丧的地方是无法在页面中添加自定义表单和其他元素——如果一开始就没有，那你就不走运了。如果您找到了一个非常喜欢的模板，但缺少所需的功能，这可能会特别令人恼火。总的来说，Wix对于需要快速建立网页的小型企业来说是一个很好的服务，但是对于建立登陆页面来说，它还有很多需要改进的地方。当然，Unbounce和Wix并不是能够帮助你构建登陆页面的唯一工具。其他值得注意的还包括:
SquareSpace(强大的分析支持，域注册，托管服务)Moonfruit(基于HTML5的响应式设计，电子商务友好)Weebly(拖放UI，分析支持，低月定价)但是，请记住，虽然这些服务都使构建登录页面变得容易，但它们可能不能提供您需要的功能，特别是如果您计划创建具有高度具体的行动呼吁的登录页面，这将与您的PPC努力相匹配。
编写登陆页副本
—现在您已经有了几种构建登陆页的不同方法。但是，正如我之前在这篇文章中所讨论的，一个登陆页面的好坏取决于它所带动的转化率。如果你不优化你的登陆页面副本，你就不能指望看到太多回报。这里有一些你在写登陆页拷贝时应该考虑的技巧。没有什么比冷漠、遥远、无聊的CTA更能扼杀潜在客户的兴致了。你的登陆页面CTA应该是激励他们转换的一块拼图。因此，你的CTA必须具有吸引力。
“Submit”“Sign Up”和“Enter”是与鼓舞人心相反的。这些都保证会输掉潜在的骗局版本，让你的注册会计师兴奋不已。不要使用它们。另一方面，
“获取我的免费报告”“发给我指南”和“让我们开始工作”是充满活力和吸引人的——这类cta让人们对转换感到兴奋。在你的CTA中注入个性元素是一种无需额外成本便能推动更多转化率的简单方法。让你的登陆页面听起来和之前的广告完全不一样，这肯定会让你失去一个转化率。如果你的Facebook广告文案强调用户通过使用你的产品可以节省的所有钱，但登陆页面却进入了产品功能的细节，你就不能指望人们会转换。如果你使用你的主页作为你的登陆页面，你会遇到同样的问题:你会混淆潜在客户的转换。所以，当你在写登陆页的文案时，要把能引导人们进入登陆页的广告调出来，并确保保持一致性。语气、价值、道具——所有这些。转化率优化是一件变化无常的事。尽管可能性不大，但最小的调整(例如，将“获取指南”改为“获取我的指南”)有时会产生巨大的差异。无论你对当前的转化率或CPA有多满意，你都不应该停止A/B测试你的登陆页面副本。当然，一些测试将以失败告终。但每隔一段时间，你就会发现信息传递的变化会大幅提升你的转化率。另外，登陆页面的趋势也在变化。也不要害怕大胆。改变CTA按钮的颜色很有吸引力，因为它基本上是无风险的。但它也可能是免费的。只要你密切关注你的转换数据，你就可以进行有风险的、开箱即用的测试。谁知道呢。你最疯狂的想法可能是你最赚钱的。丹·舍万(Dan Shewan)来自英国，是一名记者和网络内容专家，现在生活和写作在新英格兰。丹的作品出现在许多出版物的印刷版和网络版上，包括《卫报》、《每日野兽》、《太平洋标准》杂志、《独立报》、《麦克斯威尼的互联网趋势》和许多其他媒体。
参见Dan Shewan的其他帖子
更多像这样的文章登陆页面完整指南-有例子!
这是一个集撰写登陆页面为一体的指南，可以帮助你赢得客户和客户。
11个最好的登陆页面例子，激发你的创造力(和转换)
警告:易燃的内容!这些例子中的设计、布局和文案是fire
11登陆页趋势和2022年的想法(你可以实际实现的)从可定制的体验到珊瑚色，今年有很多创造性的方式来提高转化率。
评论
评论前请阅读我们的评论政策。
