如何构建可出售的Pagewiz登陆页面模板

Pagewiz旨在使专业营销人员，企业主和关联企业在几分钟之内从头开始启动目标网页广告系列，并轻松地对其进行优化以实现高转化率。 本教程将指导您使用Pagewiz设计登录页面，最终帮助您在Envato Market上打包和销售Pagewiz模板。

面向转换设计师的提示

在创建着陆页模板时，您需要确保它们符合在线营销经验知识，这些知识是通过数千个成功和/或失败的着陆页活动收集的。

如果您真的想跳上这个炙手可热的在线营销行列，并且希望能够设计面向转化的着陆页模板-您应该阅读以下内容：

每个着陆页都必须具备的基本元素

每个着陆页上必须列出五个基本元素：

1. 标题+子标题
2. 号召性用语（CTA）按钮/表格
3. 功能/优点小节
4. 信誉建设者
5. 底线摘要

（1-2）页面上最突出的两个元素应该是标题+子标题和您的CTA。 第一个让您的访客进入大门，第二个让他们（以及广告系列）获得回报。

“首屈一指” -在线页面上的所有内容都可以向下滚动而无需查看。 在此区域，访问者应该看到您的标题+子标题； 这是一份使他们充满希望并提供您要约的关键利益的副本。

如果您的报价不复杂，并且/或者普通读者已经非常熟悉您的报价，那么将第一个CTA按钮/表格放在折页上方的标题和副标题行附近可能会有所帮助。 换句话说，有动机的访问者首先要验证其进入您的着陆页的决定所需要的一切都是头等大事。 他们不需要四处寻找采取进一步的行动。 他们来了。 他们看到。 他们点击了。

减少摩擦–使他们容易。

到达目标网页的访问者如何轻松找到号召性用语（CTA）按钮如果您的答案不是“他们怎么会错过呢” –那么您可能需要做一些工作。

CTA按钮的颜色需要与页面的其余配色方案脱颖而出。 因此，橙色的CTA按钮在由蓝色阴影组成的页面上可能效果很好，但在以红色为主的页面上效果较差。 查看放置CTA按钮的屏幕。 吸引您眼球的第一件事是什么如果不是您的CTA按钮，则更改颜色可能是对模板包提供的变体的一个很好的调整。

（3-5）选择布局目标网页的功能列表和优势，其信誉构建器和底线摘要的方式完全由您决定。 您将必须找到一种方法将它们融合到您的设计中，同时要格外小心，以免淡化您两个最突出的元素。 还记得几句话之后的那两个吗

自然，购买模板的人将需要有复制空间，以详细说明其优惠功能。 他们还需要能够放置一些社交证明，例如：

• 来自真实人物的推荐或推文。
• 影响者验证，其中可能包括影响者的公司徽标或徽章。
• 附上安全印章，例如经过贝宝（PayPal）验证的印章，以及其他印章，以确保在您的页面上可以安全购买。
• 提供完整的联系信息，包括电话号码，电子邮件地址和社交媒体徽章。 他们可以根据需要与您联系。

如果您的模板突然变得过于拥挤，请记住：着陆页设计混乱会给您带来混乱，并使您的访问者无处关注。 空格是您的朋友，它将帮助您使模板更加清晰和面向转换。

没有导航！

创建登录页面的目的与导航栏的使用背道而驰。

切记：您不是在设计网站。

您的目标网页应着重的唯一目的是转换其访问者。

如果您为他们提供了闲逛的选择，那么您的主要目标就会受到阻碍。 当转化渠道有多种选择时，潜在客户就不太可能按照广告系列总监的指示行事。 这就是为什么您不应该在目标网页设计上放置导航菜单的简单逻辑。

您的第一个Pagewiz登陆页面

创建Pagewiz帐户后，要开始将模板设计导出到Pagewiz，请登录到您的帐户，然后单击右上角的大红色+创建新的着陆页按钮：

然后，系统会提示您选择目标网页广告系列类型：台式机或移动设备。

您选择的广告系列类型将影响模板的页面宽度：桌面着陆页模板在Pagewiz上通常为960px宽，而移动模板的建议宽度为320px（即使您以后可以随时更改）。

重要的是，通过选择空白模板来启动自定义模板设计，以使其最容易开始，而不必在开始之前删除任何内容：

使用节来构造页面

现在是时候使用部分来明智地划分目标页面模板了，因此更易于控制和自定义：

一旦有了新的部分，就可以设置纹理，背景颜色或图像作为背景。 我将使用Pagewiz中可用的许多纹理之一：

然后，我单击“ 扩展”按钮以使其伸展到屏幕的整个宽度（超出我页面的宽度，即960px）：

如果需要，我还可以将图像设置为该部分的背景，方法是选择要应用背景图像的部分，然后单击“ 纹理”>“将图像用作纹理” 。

定位和对齐元素

当您将元素添加到页面时，无论您选择将元素放置在何处，它的位置都是绝对的。 Pagewiz不会提示您将一个元素放置在另一个元素之上或以非对齐方式放置它。 它将简单地放置它。

话虽如此，Pagewiz拥有一些高级的定位辅助工具，可以确保按照您喜欢的方式准确定位所有内容：

X，Y定位

定位坐标可用于自定义许多内容。 您放置在页面上的每个元素都有Top（y）和Left（x）值，您可以根据Photoshop / Illustrator文件上的尺寸从顶部菜单中对其进行自定义。

这样，您的设计就可以精确到像素。

元素对齐

确保您在页面上放置的元素彼此准确对齐的另一种好方法是使用Pagewiz内置对齐工具。 通过按住Ctrl键并单击它们来选择元素时，将显示这些工具。 一旦选择了多个元素，就可以使用对齐工具对齐所选元素的边缘或中心。

观看视频：

添加和自定义表格

您可以通过从左侧工具栏中拖动一个Form元素，将一个form元素添加到您的着陆页模板中，以使其成为Lead Leading Landing Page 。

根据需要自定义表单字段和设置：

点击目标网页=无表格

您在设计点击目标网页模板吗那么它应该没有表格，只有一个CTA按钮可以单击。 为此，将一个按钮元素拖到您的着陆页设计上，然后根据自己的喜好对其进行自定义。

文字元素

对于标题，请使用Headline元素，对于段落的文本，请使用富文本元素–两者都在左侧工具栏上，可供您将其拖到设计中。

字型

当您选择要在模板上使用的字体类型时，可以使用整个Google字体库：

预览创作

Pagewiz登陆页面构建器具有一个很大的“ 预览”按钮，可让您不断检查模板设计的外观。 在实际发布模板之前，请先查看预览，这一点很重要，因为您可能会发现不同的浏览器以不同的方式呈现页面，并且您可能希望照顾可能发生的不精确性。

调动您的模板！

重要提示 ：不要让模板缺少移动着陆页版本。 着陆页模板的购物者都期待着它，并且很可能避免购买您的设计（尽管可能很吸引人），只是因为您忽略了为其提供移动版本。

一次又一次地证明，如果登陆页面无法正常显示在移动设备上，则许多潜在的潜在登陆者要么跳动要么根本不转换。

如果那不能使您相信在设计适合移动设备的目标网页方面的重要性-您仍然没有像在线营销人员那样思考。

如何使您的模板适合移动设备：

有两种方法可以做到这一点：

＃1创建另一个空白着陆页，然后为针对所有类型的移动设备浏览器优化的模板选择“ 移动着陆页模板库 ”。

这将允许您从头开始设计移动版本。 然后，您可以将该移动设备优化的目标网页与您创建的常规（960px宽）目标网页捆绑在一起。

＃2另一种（快速）方法是复制为桌面浏览器创建的页面。

复制设计后，可以为其设置新的（移动）宽度。 移动页面的建议宽度为320像素。

将页面的新宽度设置为320px后-您必须通过根据设计要求将它们拖动到内部并修改其大小来确保没有任何元素留在320像素宽度边界之外：

准备捆绑软件进行A / B测试

开展出色运动的努力并没有在发布当天就结束。 广告系列开始运行后，可以在Pagewiz上进行无限制的A / B测试 ，以最大程度地提高转化率，并且可以通过向模板买方提供不同版本的着陆页模板（换句话说： 用于测试的变体）来提高模板买方的满意度。

您可以将几个不同的页面捆绑在一起，从而为您的买家提供不同的颜色或模板上转换的不同类型的方式，即点击目标页面和潜在客户生成页面（包括表格）。 也许捆绑另一个将注意力集中在视频上的版本

当您将目标网页模板与一些经过深思熟虑的变体捆绑在一起，以供营销商购物者在广告系列中使用时-您作为转换型模板设计者的声誉应会得到传播，营销商可能希望与您做更多的业务！

Pagewiz设计技巧和窍门

全角英雄图像已变得非常普遍，并经常在目标网页上使用。 他们可以帮助设计在访问页面时传达某种感觉。

为了创建全角英雄背景图像，您需要具有一个宽而高质量的图像，我们建议您在将其上载到Pagewiz服务器之前针对网络进行优化 。

要在设计上实际使用它，请首先从左侧元素菜单中拖动section元素来创建一个新部分：

设置区域的背景图像：

1. 通过单击一次选择该部分
2. 单击顶部功能区上的“ 纹理”按钮。
3. 选择使用图像作为纹理以打开媒体库
4. 上载您的高质量图片，并将其选择为部分背景图片。

接下来，您可以控制背景图像的位置，可以从“ 纹理”菜单的底部进行操作：

1. 再次单击顶部功能区上的“ 纹理”按钮。
2. 其底部是“ 纹理属性”控件。 单击“ 背景位置”以定义要如何定位图像。 我们主要以中心中心物业为中心。
3. 如果不需要 ，请确保将Background Repeat属性设置为No Repeat 。
4. 为了调整部分的大小，您可以将小部分的箭头拖到其边界处：

您需要做的最后一件事是通过单击“ 扩展”按钮将部分扩展为全宽：

您的部分现在具有全角背景图像。

自定义设计网格

在元素的X和Y定位坐标上，Pagewiz着陆页构建器还为您提供了标尺和参考线 ，以便您可以在其中创建网格（就像在Photoshop或任何其他面向设计的软件中一样）可以浇灌您的设计。

单击着陆页构建器内的标尺图标以激活标尺：

拖动所需数量的标尺参考线（从右侧/左侧）以创建网格：

包装主题森林的设计

为了增加您在Envato Market上的销量，我们强烈建议您创建一个模板，其中包含一个以上版本：

• 手机版
• 潜在客户生成版本（带有表格）
• 点击型

每个版本应分别导出，并存档为.zip文件。 Pagewiz使您可以将登录页面导出到ThemeForest市场。 为了使用导出功能，您需要在Pagewiz上拥有一个Envato Author帐户。 您可以通过在此注册页面上注册来申请一个。

为了导出登录页面，首先导航到登录页面 ，然后单击要导出的页面名称下方的设置链接：

单击导出按钮。

Pagewiz文件将下载到您的计算机。

结论

希望本教程将为您提供有关着陆页广告系列主要目标的必要信息，以及有关创建它们的Pagewiz方法的介绍。 现在，您还知道如何打包在ThemeForest上出售的Pagewiz模板包。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-pagewiz-landing-page-template-ready-for-sale–cms-22705

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91318 人正在系统学习中 相关资源：TranslationLoaderBundle:具有数据库翻译加载器的Symfony2捆绑软件

来源：daique1908