概念登录页指南

我们Optemization对概念登录页略知一二。事实上，Tem早在2020年3月就发布了第一个Concept网站(哦，世界是如何改变的)。

多亏了“超级”和“水果”这类令人惊叹的项目，在概念上建立网站变得更容易、更快了。

考虑到人气的飙升，我决定撰写这份全面的指南，并创建一些可复制的区块，这样您就可以立即创建自己的概念网站-享受🙌。

用概念制作一个登录页面很容易，甚至可以说是愉快的--你根本不需要任何编码技巧。它还很灵活--您可以混合、搭配和设计各种模块，以获得所需的外观，从而以正确的方式展示您的想法(或产品)。

本指南将指导您完成使用Concept设置登录、将其发布到Web、添加分析和自定义样式的每一步。作为顶部的樱桃，我们还精心策划了10个现成的组件，您可以使用这些组件在任何时间内将您的想法登陆页面。

登录页面是推销某些东西的最佳方式，告诉人们有关特定产品、服务或资源的信息，并促使他们采取具体行动。

当用户执行操作时，这称为转换，通常会对登录页进行微调，以获得尽可能多的转换。转换可以是任何东西：从订阅时事通讯或加入社区，到购买产品或服务。登录页面也可以是纯粹的信息性页面。

想一想你的页面的目的是什么，用户需要做些什么才能做出贡献。

定义你的目标是困难的部分--在你知道你想让用户做什么动作之后，就很容易定义在你的着陆上要显示什么。

如果他们订阅了时事通讯，告诉他们是关于什么的。如果目标是发展一个社区，那就告诉他们已经在那里的人，并说明这个社区的目的是什么。如果你要销售一款产品，要把重点放在它提供的价值和核心功能上。不要忘记行动号召，当用户被说服时，让他们真正意识到自己的兴趣。

他们在为他们的创业计划做广告，重点放在该计划是什么，它是如何结构的，以及为什么人们在该计划中学到了有价值的东西。这就是全部内容--在第一个屏幕上，你可以看到描述该计划的要点(增长战略、广告等)。

Demand Curve的团队还特别强调社会证明--页面上有大量来自人们的不同证明和故事。

有时，跨越1-2个屏幕的短登录页面比跨越3个或更多屏幕的较长的登录页面具有更高的转换率。当你需要你的用户执行一个简单的操作，比如共享他们的电子邮件时，短页面效果更好。对于已经知道你提供什么的热情客户来说，短途落地也更有意义。

对于冷客户来说，拥有大量信息的落地时间越长越好，因为他们需要更多的背景信息。在您对适合您的情况的大小有了一个想法之后，您就可以开始尝试内容了。

在一个典型的登录页面上，信息被排列到标准的方块中，其中包含有价值的信息：有一个醒目的英雄图像，简单的文本块描述了你的价值主张，一个让你收集兴趣的行动号召，还有一个带有条款的页脚。

就像在Refactoring Growth的登录页面上一样，你有一个详细的介绍，有几个部分，有一个价值主张(简单的文本)块和一张图片或图形，一个定价块和一个行动号召。

或者，您可以添加更多有用的内容。这是一个好主意，包括社交证明(这对你的转变非常重要，并围绕你的价值支柱创造一种社区感)，多汁的产品照片或屏幕截图，以及一个链接到其他地方帖子的博客部分。

我们已经收集了一些常见的概念部分，这样你就可以为你的网站借用它们了。

只需打开下面您喜欢的组件，单击书签，然后单击复制，并将您的组件页面拖到任何您喜欢的页面。选择"；转到"；，然后选择"；文本"；。您已经得到了您的登录页！在块之间添加一些空间，更改内容并删除切换。然后根据您的喜好对其进行自定义。

混合搭配模块，添加您自己的部分，在10分钟内创建您自己的转换登录页面。

发布您的页面并使其可从自定义域访问很容易。我们喜欢两项服务：Fruition是免费的、开源的，而Super提供更多的功能和更好的性能。

水果在他们的主页上有一个非常详细的指南和一个视频教程，而Super在你注册时会给你一个很好的入职机会，引导你完成所有必要的步骤。下面是一步一步让你上超级：

注册，选择计划(本质上归结为您需要多少个站点，请记住，一个站点可以有许多子页面，就像Web上的任何网站一样)。

选择是要根据页面创建静态网站，还是使用默认的基于概念的方法。第一个选项提供出色的性能，但不允许在页面上显示过滤视图和日历。默认的概念页面在性能和SEO方面相对较差，但所有的概念功能都会起作用，对于简单的个人网站或页面来说，它仍然足够了，在那里你不需要快速加载。

选择您在超级中使用的站点名称、来自域提供商的自定义域名，以及通过顶部的"；Share"；菜单("；Share"；→"；Share"；Share to the Web"；)将页面设置为公共的原始概念页面的URL。

如果需要，可以添加一个或多个漂亮的URL。默认情况下，您在主页中添加的所有子页面都会有难看的概念URL。您可以通过提供指向要向其添加插件的子页的链接并指定插件(例如optemization.com/preensired)来更改这一点。

添加A和CNAME记录以将Super指向您的域名(Super提供这些记录，您需要在域名提供商的控制面板中输入它们)。如果API密钥是GoPardy，您也可以提供它。

输入您网站的描述，附加图片和图标以进行社交共享。此时，您还可以为页面内容选择自定义字体。

有了超级和水果，你就可以把你自己的Javascript注入到你的页面中。这意味着您可以使用大多数可用的分析解决方案。

例如，您可以通过转到设置→站点→站点ID来获取要注入的Fathom Analytics脚本。这里是他们自己的Fathom说明。Google Analytics还有一个可以注入的全球站点标签。

在您将脚本复制并粘贴到“超级”或“成功”中的正确字段后，它应该会自动魔术般地开始收集您的统计数据，您将能够在您的分析仪表板中看到它们。以下是我们为optemization.com测量的统计数据：

从理论上讲，使用Super或Fucture，您几乎可以设置页面任何部分的样式。要做的一件简单的事情就是更改默认的概念颜色。要更改页面上的任何颜色，只需添加一个脚本(与添加分析脚本的方式相同)来替换概念的CSS值。

Super有一个很棒的迷你指南，下面是带有每种默认颜色概念的脚本。只需将您想要更改的颜色替换为十六进制值(#000表示黑色，#FFF表示白色)，然后删除其余的值即可更改使用Super托管的站点的颜色(水果的工作方式相同)。

<；style>；：root{--COLOR-TEXT-DEFAULT：#37352 f；--COLOR-TEXT-DEFAULT-LIGHT：rgba(55，53，47，0)；--COLOR-TEXT-GREAD：#9 b9a97；--COLOR-TEXT-BROW：#64473 a；--COLOR-TEXT-橙色：#d9730d；--COLOR-TEXT-黄色：#dFab01；--COLOR-TEXT-GREEN：#0 f7b6c；--COLOR-TEXT-BLUE：#0 b6e99；--COLOR-TEXT-紫色：#6940 a5；--COLOR-TEXT-PINK：#ad1a72；--COLOR-TEXT-RED：#e03e3e；--COLOR-BG-DEFAULT：#FFF；--COLOR-BG-GREAD：#ebeed；--COLOR-BG-Brown：#e9e5e3；--COLOR-BG-橙色：#faebdd；-COLOR-BG-黄色：#fbf3db；--color-bg-green：#ddea；--color-bg-Blue：#ddebf1；--color-bg-purple：#eae4f2；--color-bg-PINK：#f4dfeb；--color-bg-red：#fbe4e4；--color-bg-Grey-light：RGBA(235,236,237，0.3)；--color-bg-Brown-light：RGBA(233,229,227，0.3)；--COLOR-BG-橙光：RGBA(250,235,221，0.3)；--COLOR-BG-黄灯：RGBA(251,243,219，0.3)；--COLOR-BG-绿灯：RGBA(221,237,234，0.3)；--COLOR-BG-蓝光：RGBA(221,235,241，0.3)；--COLOR-BG-紫光：RGBA(234,228,242，0.3)；--COLOR-BG-PINK-LIGHT：RGBA(244,223,235，0.3)；--COLOR-BG-RED-LIGHT：RGBA(251,228,228，0.3)；--COLOR-PILL-DEFAULT：RGBA(206,205,202，0.5)；--COLOR-PILL-DEFAULT：RGBA(206,205,202，0.5)；--颜色药丸灰色：HSLA(45，2%，60%，0.4)；--颜色药丸棕色：RGBA(140，46，0，0.2)；--颜色药丸橙色：RGBA(245，93，0，0.2)；--颜色药丸黄色：RGBA(233,168，0，0.2)；--颜色药丸绿色：RGBA(0,135,107，0.2)；--color-pill-Blue：RGBA(0,120,223，0.2)；--color-pill-purple：RGBA(103，36,222，0.2)；--color-pill-Pink：RGBA(221，0,129，0.2)；--color-pill-red：RGBA(255，0，26，0.2)；--color-UI-hover-bg：RGBA(55，53，47，0.08)；--color-ui-hover-bg：RGBA(55，53，47，0.08)；}<；/style>；

我们已经制作了一个固执己见的CTA模块，您可以用它在用户参与页面时要求他们在某个时候注册。该页面在打开3秒后显示(更改window.onload内的"；3000"；值可调整持续时间)。

只需将以下脚本包含在您的超级或成果注入脚本部分中，与您包含分析的方式类似：

<；script src="；https://unpkg.com/sweetalert/dist/sweetalert.min.js"；>；<；/script>；//感谢Sweetalert的提醒！<；脚本>；窗口。OnLoad=()=>；{setTimeout(()=>；swal({Title："；Subscribe to Get Spam in Your Inbox"；，Button：False，Content：{element："；iframe"；，Attributes：{id："；PromptForm"；，Title："；辣椒Form"；，frame edge：0，Height：200，滚动："；no"；，src："；在此处插入您的表单'；URL"；，}，})，3000)；}<；/script>；<；style>；@font-face{font-family："；San Francisco&34；；Src：url("；https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff"；)；}<；/Style>；<；style>；。Swal-title{COLOR：#37352 f；font-family："；San Francisco"；；font-weight：600；padding：25 px 25 px；}<；/style>；

不要忘了在此处将您的表单URL替换为您的辣椒表单URL(或任何其他可嵌入表单)。尝试设置样式：您可以更改"；framework&34；，"；，"；滚动"；和"；color"；，"；font-family"；，"；font-weight"；，"；填充"；属性来更改表单的外观。

有像Google LighTower这样的工具可以用来生成关于页面加载速度和可能的可访问性问题的报告。只需打开Chrome(如果您还没有，也可以下载它)，进入您的网站，按Command+Option+C(在Mac上)或Control+Shift+C(在Windows上)打开开发人员工具，然后选择“审核”选项卡。检出您要测量的指标，然后单击“生成报告”("；Generate Report"；)。

灯塔将为您的网站测量几个指标，并显示分数。一般来说，如果所有的指标都是绿色的，那么你就是好的。如果他们是你们

当使用Super的默认选项或结果创建登录页面时，预计性能会相对较低。这些选项更适合个人网站或不需要快速页面速度的网站。

如果您使用Super Static或其他将概念内容转换为静态页面的解决方案，您将获得巨大的性能提升。这改变了登录页面的游戏规则，因为它们依靠快速的页面加载进行转换。

网络是移动的--首先这些天，很多人会通过移动设备访问你的页面。所以你应该检查一下你的登录页面在手机上的样子。您只需从智能手机打开发布到网络上的版本即可。

或者，在Chrome或Firefox等浏览器中使用开发人员工具(参见下面的说明)，从您的桌面设备查看移动版本。

确保所有内容都是可读的，你可以接触到页面上的所有交互元素，总体体验是流畅的，在浏览页面时不会遇到任何障碍。注意多栏布局和日历视图--这些都是最有可能在移动设备上看起来很糟糕的东西。

灯塔也有一些专门针对移动设备的统计数据，您可以通过生成移动报告来检查。

与其他用于登陆页面的工具不同，Concept不会让你的页面变成一个独立的存在，这就是它的主要优势。概念登录页面可以通过链接的数据库视图和反向链接显示或指向工作区中的任何数据。

这意味着您可以处理数据并将其存储在概念工作区中，然后快速制作登录页面向公众演示该数据。

您甚至可以将平台设置为当您在概念空间的其他部分进行更改(例如，添加更多细节或引入新功能)时自动更新。