跟着文章步骤，即可从无到有，设计出完美的 Landing Page 商品销售页，让商品购买、结帐都在同一页面完成，并在购物结束后，跳转至感谢页面。
你能省掉多余的购买流程（能有效降低顾客跳出率），这也是在众多同性质商品中，可脱颖而出冲高营业额的好方法之一。
Hello Elementor 主题介绍+安装
Hello Elementor 是由知名页面编辑器 Elementor 所开发的轻量化主题。 更多 Elementor 基础教程。
若是使用 Elementor 的站长，可以考虑使用 Hello Elementor 主题主题，体验 Elementor 整套系列的完整服务。
Hello Elementor 主题主题相较其他主题，更强调其轻量化的特色，可达到：网站速度升级、非侵入性的代码，删除不必要的样版等 .. 成效。
而主题本身整体容量只有 6 KB ，其轻量化的特色在众多主题中确实表现的较为优质。
另一个优点是，Hello Elementor 为轻量化主题，优化页面速度和性能，可强化 SEO ，提升网站在搜索引擎中的排名，降低用户跳出率。
设计页面方面，我们可以从完全空白的页面开始建构，也可以套用多样化模板。 更多 Elementor Pro 进阶教程。
Hello Elementor 有许多不同类型的网站模板，可供站长依据自身需求选择套用。
同时 Hello Elementor 具备多种基本主题设计功能：页首及页尾编辑器、响应式网页、串接多款第三方插件、保持开源等 .. 。
Hello Elementor 安装+启用
前往 WordPress > 外观 > 主题 > 安装主题。
搜索 Hello Elementor，选择安装+启用。
这样就完成 Hello Elementor 主题安装。
Elementor 是什么？
Elementor 是全球知名的 WordPress 页面编辑器，全球已经有 500w+ 次插件下载量，基本上与所有主题兼容。 可参考 Elementor 插件教程。
你不需会任何程序基础，只要用区块拖曳方式，就能定制形象网站设计。
有关任何的页面布局、新增区块功能、编辑区块内容等 ..，都将变得更加简单。
Elementor 有多种功能区块，是建置网站的好帮手，当你心中简单构图完成，接下来只要拖放区块，并放置在网页上即可完成设计。
Elementor 有多种区块模板和网站样板，点击按钮就可套用，再从中进行修改自己喜欢的设计，可节省大量的建置网站时间。
购物网站盛行的时期，或许你想搭建购物网站，Elementor 对于 WooCommerce 电商插件，有良好的支持。
并为此开发了 WooCommerce Builder（购物网站编辑器），除了一般的页面设计，你也能设计定制化的购物网站页面。
像是添加购物车按钮、产品价格、产品图片和说明、相关产品列表、产品库存提醒等 .. ，如下图。
登录并前往 Elementor 会员后台，在右上角会有下载 Icon，点击下载 Elementor Pro 插件。
前往 WordPress 后台，找到插件 > 安装插件 > 上传插件，把刚下载的 Elementor Pro 插件上传安装+启用。
前往 Elementor > License，点击 Connect & Activate，与 Elementor 系统进行串接。
输入帐密登入 Elementor 后台，就会看到你的域和帐号用户，进行串接的图标，点击 Activate 连线。
如果有看到状态显示 Active，就代表网站的 Elementor Pro 功能，已经被顺利激活了。
接下来，我们就能享用 Elementor Pro 强大的能力了。
Elementor Pro 主题编辑器
Theme Builder 主题编辑器是 Elementor Pro 很酷的功能之一，我们可以使用它，打造精致的 Landing Page 销售页设计。
一页式销售页需拥有多样化的模板设计，才能吸引顾客的目光。
而 Elementor Pro 的主题编辑器功能，能定制不同的 WordPress 页面，像是文章列表、单一文章、商品页面等 ..，并且自定义显示条件，就能达到 100% 定制设计。
另外，Elementor Pro 拥有更多专业版工具，站长能自由发挥创意使用。
不过 CartFlows 结账表单，使用 Elementor 免费版本即可建置，这点不用担心。 所以，你也可以看完整篇文章，再决定是否购买 Elementoe Pro :)
这对于日后想扩展一页式网页的站长来说，是一个十分有力的模版设计工具。
下面章节，将使用 Elementor Pro 的主题编辑器功能，来完成页首及页尾，当作范例参考。
页首/页尾设计
使用 Elementor Pro 后，我们便可使用主题编辑器功能，自由设计页首/页尾。 这一章节，我以新增页首作为示范。
前往 主题建构器，我们可以看到一列功能列表（ Theme Builder、顶部、底部等 .. ），方便站长管理不同功能版型。
在这里可以点击新增创建新版型，也可以点 Try it now 就能前往 Theme Builder 。
进入后，左手边可选取想新增的类型，这边我示范新增顶部Header。
左边选择顶部类型，之后点右上角的 Add New。
然后 Elementor 会自动带入该类型的模板库，现在在 Header 页首类型，就会出现很多相关的版型。
可选择自己喜爱的使用，点击插入即可（如果打算自己设计，可直接关闭）。
这边我选择其中一个来进行设计。
选择插入，跳转至设计页面，页首设计完毕，选择发布即可套用至所有页面。
发布后会出现弹跳窗口。
这边可以设定刚设计完成的页首，想要在哪个页面显示，也就是设定显示条件，完成后储存。
接着我们前往随机页面，观看页首设计：）
页尾我们也可以使用同样方式新增，以上就是使用 Elementor Pro 主题编辑器功能，来新增 / 设计页首教程！
WooCommerce 介绍+安装
WooCommerce 是使用 WordPress 软件，设计购物网站 不可或缺的电商插件。
这个章节，我们会介绍 WooCommerce 是什么，然后安装+启用 WooCommerce。 更多 WooCommerce 是什么。
WooCommerce 是什么？
WooCommerce 是 WordPress 旗下最知名的网络商店搭建插件，全球下载量已超过 4500 万，而且它是免费的。 可参考 WooCommerce 完整教程，学习更多。
可用它来完成购物网站搭建，开始你的网络开店平台，像是商品管理、订单管理、会员管理、优惠管理、页面管理、金物流串接 .. 都具备。
WooCommerce 的生态圈很丰富，有多种周边扩充功能，这也是让它更完整强大的原因。
如果想节省网络开店平台的预算，使用 WooCommerce 开店平台插件，绝对会是你的好选择：）
接着我们进行 WooCommerce 插件安装，有了它才能运作一页式购物网页。
前往 插件 > 安装插件，搜寻 WooCommerce 插件，然后点击安装+启用插件。
WooCommerce 安装+启用完成，会进入初始页面设定。
我们需在 WooCommerce 设定商店地址、销售地区、是否使用税金、货币选项、商品库存设定、金流物流等 .. ，才能让 Landing Page 销售页正常营运。
先前往 WooCommerce > 设定，分别操作前述设定项目
还有一个重点，就是 Landing Page 设计销售页的物流串接，由于 WooCommerce 默认的金物流功能不够多，建议可以安装插件扩充。
新增 WooCommerce 商品
完成 WooCommerce 安装+设定后，我们可以前往 WooCommerce 新增贩售商品。
前往商品>所有商品，找到新增按钮。
点击后便会进入商品页面。
第一步，可以先编辑商品网址，填写商品描述。
往下编辑商品类型、商品金额、库存、运送方式 ..，这部分可搭配WooCommerce电商教程，如果需新增不同类型商品，可参考常见商品建立。
然后可编辑商品分类、标签、商品图片 .. ，让商品内容更加丰富，完成后点发布或更新即可。
以上是 WooCommerce 设定，接着，我们往下开始进行 CartFlows 营销漏斗插件教程，离完成 Landing Page 设计又更近一步啰！
CartFlows 插件介绍+安装
启用 WooCommerce 电商插件后，接着需安装 CartFlows ，协助我们完成 Landing Page 销售页设计。
CartFlows 是什么？
CartFlows 是一款优质的 WooCommerce 营销漏斗插件，用优化的结账方式，取代 WooCommerce 以往较复杂的结账流程，增加商品转换率。
CartFlows 可做出一个独立的 Landing page 商品销售页，让营销活动、广告导流的转换率达到最好的成效。
CartFlows 可结合多款流行的页面编辑器进行设计，如：Elementor、Gutenberg、Beaver Builder 等 .. 。
同时，CartFlows也与多款主题/插件串接，例如：WooCommerce、LearnDash、Divi、Alidropship，能够完成多类型网站搭建。 更多 WooCommerce 教程、LearnDash 在线课程搭建、Divi 主题教程。
此外，营销漏斗的最后一步，也是不可少的感谢购买（确认订单）页面，使用CartFlows也可轻松建置。
设计方面，CartFlows 具备多款网页模板，可一键套用，快速建立美观的商品销售页面。
以上是 CartFlows 免费版的功能。
高级版本的功能更加突出，可完成： A / B 测试、一键加购 / 下单按钮、更改结账表单字段、订单数据分析等 .. 功能，是十分优良的营销插件。
若是想先试用功能，可点击下方按钮，即可取得 CartFlows 免费版。
CartFlows 安装+启用
这篇文章，我们只需使用 CartFlows 免费版，即可开始 Landing page 设计。
那么，开始安装 CartFlows ，前往 WordPress 后台 > 安装插件，输入 CartFlows > 选择安装+启用即可。
添加一页式销售页（套用模板）
安装+启用完成，接着我们便可套用 CartFlows 模版，着手进行 Landing Page 设计。
小提醒： Hello Elementor 主题的一大特色就是可以自行进行多样化设计，所以如果你想跳过套用模板，自己新增页面设计也是可以的：）
创建 Flows（套用模版）
前往 CartFlows > Flows > Add New ，新增第一个营销漏斗（Flows）。
接着我们会跳转到Templates页面，选择你喜爱的销售页模板，进行导入。
我以 Music Album 模版，作为 Landing page 销售页范例，选择 Import Flow 导入。
输入易识别的名字，即可创建 Flows 。
创建好一个新的营销漏斗（Flows）后，会自动跳转至该 Flows 页面。
Steps 分步页面
这里我们可以看见一个完整的营销漏斗，需要的分步页面。
目前分别有：Landing 商品着陆页、Checkout 结账页面、Thank You 感谢页面。
升级至进阶版本后，即可选择「Add New Step 」新增分步页面（因本文教程只需制作一页式商品着陆页，我们先保持原本的步骤页面即可）。
若是之后有增加分步页面的需求，站长可自行选择是否购买进阶版本：）
Settings 设定
接着我们来查看该 Flows 的设定。
切换到Settings区块，可以看到左手边有四个区块，而目前停在General设定，如下图。
我们可以在一般设定变更：营销漏斗标题、连结代称、是否开启漏斗索引，若无特别需求，维持预设即可。 更多永久链接设定。
其他功能为进阶版启用，因此这边就不多做说明，我们继续往下教程吧：）
CartFlows 指派商品
在前面的章节中，我们已经导入 CartFlows 的初始模版，也成功新增一个营销漏斗。
现在我们需要指派商品，至单一 Landing Page 销售页。
选择 Checkout 结账标签页面。
找到 Products 页签 > Add New product 指派产品。
跳出弹跳窗口，找到刚刚新增的 WooCommerce 产品，选择「 Add Product 」完成指派。
指派成功，可以更改强制购买数量、折扣。 设定完成，选择储存设定。
这样我们就完成商品指派，下一章节，我们就来学习如何进行一页式 Landing page 设计吧：）
新增+设计商品描述版型
因为是一页式销售页，我们继续在结账表单页，新增商品描述即可。
使用 Elementor 设计销售页面
前往 Design 区块，选择「 Edit with Elementor 」按钮，进入设计页面。
我们会看见页面中有结账表单，接着就可以开始使用 Elementor 来新增+设计商品描述区块啰：）
这边我新增一个倒数计时区块当作示范，大家可以依照自己需求，新增区块进行销售页设计。
在左手边区块小工具中，找到「专业版」选项，找到「 倒数 」区块，拖曳到页面任意位置。
接着点击倒数区块，选择内容或样式，可以修改外观设计。
其他商品描述设计，例如：商品介绍、特色、各项促销 Banner 等 .. 可依照站长需求，拉入相对应区块进行设计。 更多 WooCommerce 营销设定教程。
套用 Elementor Pro 版型
对于设计较没有概念的站长，也可开启版型库寻找灵感。
有许多 Pro 版本专属的精美版型可供站长选择唷：）
设计结账表单区块
设计好所有商品描述后，我们也可以针对结账表单进行样式修改 / 设计。
点击结账区块，左手边的面板切换至“ 样式 ”，即可针对不同地方设计，详细如下图。
完成设计之后，记得要选择“ 更新 ”存储唷！
19. 设计感谢页面
完成商品描述+结帐的一页式 Landing Page 后，接着是营销漏斗的最后一站，也就是「 感谢页面 」。
套用模版即有默认感谢页模板，但我们也可在 Elementor 新增设计区块。
回到 Flows 页面，找到 Thank You 分步页面，选择 Edit 进行修改设计。
选择 Edit with Elementor 按钮，进入设计页面。
进入后，会看见预设的感谢页模板，这里在前台会显示顾客的订单信息，但现在看不见订帐信息，不过不用担心，前台显示的会是正常样式。
我们可以选择该区块，进行背景、标题文字等 .. 细节调整。
接着，我们还可以对感谢页面新增区块设计，来丰富感谢页面。
要是没有想法，我们可以借助 Elementor 版型库，找到精美的模板范例，帮助我们设计 Landing page。
点击下图的引用模板 Icon ，叫出 Elementor 版型库。
选择区块，依据分类，找到想新增的区块版型。
这边我新增「Team」版型，来介绍乐队成员。 选择第一个区块，插入至页面。
插入後，我們就可以設計該區塊，將內容進行修改。
修改完成后，我们进行存储即可：）
实际前往前台结账，查看设计效果，发现设计成功，也有显示订单信息~
会员账户管理
Landing Page 销售页设计完成，还需在主菜单新增「我的帐号 」页面，以便顾客能够确认订单信息。
小备注：关于新增主菜单详细新增+设定，可前往 WordPress 基础后台教程 进行学习~
前往主菜单，找到“ 我的帐号 ”页面选项，选择「添加至菜单」，完成后储存。
新增后，我们借由菜单前往「我的帐号」页面查看，发现成功新增，并且能够查看订单信息啰。
以上就是 Landing Page 销售页制作教程，大家都学会了吗？
常见问题
CartFlows 是什么？
CartFlows 是一款优质的 WooCommerce 营销漏斗插件，用优化的结账方式，取代 WooCommerce 以往较复杂的结账流程，增加商品转换率。 更多 WooCommerce 中文基础教程。
CartFlows 可做出一个独立的 Landing Page 商品销售页，让营销活动、广告导流的转换率达到最好的成效。
分为免费版本和高级版本，免费版即可完成简单的三步骤营销漏斗 Landing Page 。
进阶版本功能丰富，可完成： A / B 测试、一键加购 / 下单按钮、更改结账表单字段、订单数据分析等 .. 功能。
如何使用 CartFlows 完成单一产品 Landing Page 设计？
在安装 CartFlows 后，我们新增一个营销漏斗（Flows），便可在该 Flows 之下，进行新增&设定分步页面的操作。
我们为该营销漏斗指派 WooCommerce 商品，便可以开始着手进行页面设计。
设计方面，CartFlows 可套用多种模板，定制设计 Landing Page，还可依照站长习惯，将两步骤结帐变更为一页式销售页，简化结帐步骤，优化用户体验。
原文链接：https://www.itaoda.cn/blog/11984.html，转载请注明出处。
评论0