所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

Landing Page 销售页设计:制作一页式营销漏斗,增加电商转化率!

这是一篇完整「Landing Page 设计 」教程,带你打造一页式销售页,如果你销售的商品、服务并不多,或是只想单独强推某一项商品,并让此商品能卖得很好,那这篇文章会对你有帮助! 更多 Landing Page 是什么?

跟着文章步骤,即可从无到有,设计出完美的 Landing Page 商品销售页,让商品购买、结帐都在同一页面完成,并在购物结束后,跳转至感谢页面。

你能省掉多余的购买流程(能有效降低顾客跳出率),这也是在众多同性质商品中,可脱颖而出冲高营业额的好方法之一。

Hello Elementor 主题介绍+安装

WordPress主题主题 :Hello Elementor 推荐

Hello Elementor 是由知名页面编辑器 Elementor 所开发的轻量化主题。 更多 Elementor 基础教程。

若是使用 Elementor 的站长,可以考虑使用 Hello Elementor 主题主题,体验 Elementor 整套系列的完整服务。

Hello Elementor 主题主题相较其他主题,更强调其轻量化的特色,可达到:网站速度升级、非侵入性的代码,删除不必要的样版等 .. 成效。

而主题本身整体容量只有 6 KB ,其轻量化的特色在众多主题中确实表现的较为优质。

另一个优点是,Hello Elementor 为轻量化主题,优化页面速度和性能,可强化 SEO ,提升网站在搜索引擎中的排名,降低用户跳出率。

Hello Elementor 强调其提升网站 SEO 功能

设计页面方面,我们可以从完全空白的页面开始建构,也可以套用多样化模板。 更多 Elementor Pro 进阶教程。

Hello Elementor 有许多不同类型的网站模板,可供站长依据自身需求选择套用。

Hello Elementor 可套用多样化模板

同时 Hello Elementor 具备多种基本主题设计功能:页首及页尾编辑器、响应式网页、串接多款第三方插件、保持开源等 .. 。


Hello Elementor 安装+启用

前往 WordPress > 外观 > 主题 > 安装主题。

前往安装 WordPress 主题主题
前往安装 WordPress 主题主题

搜索 Hello Elementor,选择安装+启用。

安装+启用 Hello Elementor 主题主题

这样就完成 Hello Elementor 主题安装。


Elementor 是什么?

Elementor 页面编辑器
Elementor 页面编辑器

Elementor 是全球知名的 WordPress 页面编辑器,全球已经有 500w+ 次插件下载量,基本上与所有主题兼容。 可参考 Elementor 插件教程。

你不需会任何程序基础,只要用区块拖曳方式,就能定制形象网站设计。

有关任何的页面布局、新增区块功能、编辑区块内容等 ..,都将变得更加简单。

Elementor 形象教程示范

Elementor 有多种功能区块,是建置网站的好帮手,当你心中简单构图完成,接下来只要拖放区块,并放置在网页上即可完成设计。

Elementor 有多种区块模板和网站样板,点击按钮就可套用,再从中进行修改自己喜欢的设计,可节省大量的建置网站时间。

Elementor 具备丰富的模版库

购物网站盛行的时期,或许你想搭建购物网站,Elementor 对于 WooCommerce 电商插件,有良好的支持。

并为此开发了 WooCommerce Builder(购物网站编辑器),除了一般的页面设计,你也能设计定制化的购物网站页面。

像是添加购物车按钮、产品价格、产品图片和说明、相关产品列表、产品库存提醒等 .. ,如下图。

WordPress页面编辑器 :Elementor 的 WooCommerce Builder 购物网站区块功能(部分功能)
WooCommerce Builder 购物网站功能区块(部分功能)

登录并前往 Elementor 会员后台,在右上角会有下载 Icon,点击下载 Elementor Pro 插件。

Elementor Pro 教程 :Elementor 会员后台
Elementor 会员后台

前往 WordPress 后台,找到插件 > 安装插件 > 上传插件,把刚下载的 Elementor Pro 插件上传安装+启用。

Elementor Pro 教程 :安装 Elementor Pro 插件
安装 Elementor Pro 插件

前往 Elementor > License,点击 Connect & Activate,与 Elementor 系统进行串接。

Elementor Pro 教程 :Elementor Pro 系统连接
Elementor Pro 系统连接

输入帐密登入 Elementor 后台,就会看到你的域和帐号用户,进行串接的图标,点击 Activate 连线。

Elementor Pro 教程 :进行网站串连

如果有看到状态显示 Active,就代表网站的 Elementor Pro 功能,已经被顺利激活了。

接下来,我们就能享用 Elementor Pro 强大的能力了。


Elementor Pro 主题编辑器

Theme Builder 主题编辑器是 Elementor Pro 很酷的功能之一,我们可以使用它,打造精致的 Landing Page 销售页设计。

Elementor Pro 教程 :P ro 进阶区块样板
Elementor Pro :多样化的 Pro 进阶模板

一页式销售页需拥有多样化的模板设计,才能吸引顾客的目光。

而 Elementor Pro 的主题编辑器功能,能定制不同的 WordPress 页面,像是文章列表、单一文章、商品页面等 ..,并且自定义显示条件,就能达到 100% 定制设计。

另外,Elementor Pro 拥有更多专业版工具,站长能自由发挥创意使用。

Elementor Pro 教程 :WooCommerce 相关功能
Elementor Pro :WooCommerce 相关进阶区块

不过 CartFlows 结账表单,使用 Elementor 免费版本即可建置,这点不用担心。 所以,你也可以看完整篇文章,再决定是否购买 Elementoe Pro :)

这对于日后想扩展一页式网页的站长来说,是一个十分有力的模版设计工具。

Elementor Pro :主题编辑器功能可自由呈现不同页首/ 页尾

下面章节,将使用 Elementor Pro 的主题编辑器功能,来完成页首及页尾,当作范例参考。


页首/页尾设计

使用 Elementor Pro 后,我们便可使用主题编辑器功能,自由设计页首/页尾。 这一章节,我以新增页首作为示范。

前往 主题建构器,我们可以看到一列功能列表( Theme Builder、顶部、底部等 .. ),方便站长管理不同功能版型。

在这里可以点击新增创建新版型,也可以点 Try it now 就能前往 Theme Builder 。

Elementor教程 :前往 Theme Builder 编辑器
Elementor:前往 Theme Builder 编辑器

进入后,左手边可选取想新增的类型,这边我示范新增顶部Header。

左边选择顶部类型,之后点右上角的 Add New。

Elementor :进入顶部类型,选择新增版型

然后 Elementor 会自动带入该类型的模板库,现在在 Header 页首类型,就会出现很多相关的版型。

可选择自己喜爱的使用,点击插入即可(如果打算自己设计,可直接关闭)。

这边我选择其中一个来进行设计。

Elementor :选择套用Header页首模板

选择插入,跳转至设计页面,页首设计完毕,选择发布即可套用至所有页面。

Elementor :编辑 Header 页首区块,完成发布

发布后会出现弹跳窗口。

这边可以设定刚设计完成的页首,想要在哪个页面显示,也就是设定显示条件,完成后储存。

Elementor教程 :设定块显示条件
Elementor :设定版型显示条件

接着我们前往随机页面,观看页首设计:)

成功显示精美页首模版~

页尾我们也可以使用同样方式新增,以上就是使用 Elementor Pro 主题编辑器功能,来新增 / 设计页首教程!


 WooCommerce 介绍+安装

WooCommerce 是使用 WordPress 软件,设计购物网站 不可或缺的电商插件。

这个章节,我们会介绍 WooCommerce 是什么,然后安装+启用 WooCommerce。 更多 WooCommerce 是什么。

WooCommerce 是什么?

woocommerce 网络开店插件
woocommerce 网络开店插件

WooCommerce 是 WordPress 旗下最知名的网络商店搭建插件,全球下载量已超过 4500 万,而且它是免费的。 可参考 WooCommerce 完整教程,学习更多。

可用它来完成购物网站搭建,开始你的网络开店平台,像是商品管理、订单管理、会员管理、优惠管理、页面管理、金物流串接 .. 都具备。

WooCommerce 的生态圈很丰富,有多种周边扩充功能,这也是让它更完整强大的原因。

如果想节省网络开店平台的预算,使用 WooCommerce 开店平台插件,绝对会是你的好选择:)

接着我们进行 WooCommerce 插件安装,有了它才能运作一页式购物网页。

前往 插件 > 安装插件,搜寻 WooCommerce 插件,然后点击安装+启用插件。

搭建购物网站 :woocommerce插件安装
销售页设计 :WooCommerce插件安装+启用

 

WooCommerce 安装+启用完成,会进入初始页面设定。

我们需在 WooCommerce 设定商店地址、销售地区、是否使用税金、货币选项、商品库存设定、金流物流等 .. ,才能让 Landing Page 销售页正常营运。

先前往 WooCommerce > 设定,分别操作前述设定项目

Woocommerce 购物相关设定
Woocommerce 购物相关设定

还有一个重点,就是 Landing Page 设计销售页的物流串接,由于 WooCommerce 默认的金物流功能不够多,建议可以安装插件扩充。


新增 WooCommerce 商品

完成 WooCommerce 安装+设定后,我们可以前往 WooCommerce 新增贩售商品。

前往商品>所有商品,找到新增按钮。

新增WooCommerce商品

点击后便会进入商品页面。

第一步,可以先编辑商品网址,填写商品描述。

新增商品内容+编辑永久链接

往下编辑商品类型、商品金额、库存、运送方式 ..,这部分可搭配WooCommerce电商教程,如果需新增不同类型商品,可参考常见商品建立。

购物网站建置 :WooCommerce 购物网站,编辑商品内容
购物网站建置 :WooCommerce 购物网站,编辑商品内容

然后可编辑商品分类、标签、商品图片 .. ,让商品内容更加丰富,完成后点发布或更新即可。

Woocommerce 编辑商品分类、标签、图片等 ..

以上是 WooCommerce 设定,接着,我们往下开始进行 CartFlows 营销漏斗插件教程,离完成 Landing Page 设计又更近一步啰!


CartFlows 插件介绍+安装

启用 WooCommerce 电商插件后,接着需安装 CartFlows ,协助我们完成 Landing Page 销售页设计。

CartFlows 是什么?

CartFlows :最佳 WooCommerce 销售漏斗插件

CartFlows 是一款优质的 WooCommerce 营销漏斗插件,用优化的结账方式,取代 WooCommerce 以往较复杂的结账流程,增加商品转换率。

CartFlows 可做出一个独立的 Landing page 商品销售页,让营销活动、广告导流的转换率达到最好的成效。

CartFlows 可结合多款流行的页面编辑器进行设计,如:Elementor、Gutenberg、Beaver Builder 等 .. 。

同时,CartFlows也与多款主题/插件串接,例如:WooCommerce、LearnDash、Divi、Alidropship,能够完成多类型网站搭建。 更多 WooCommerce 教程、LearnDash 在线课程搭建、Divi 主题教程。

CartFlows 可串接多款页面编辑器 / 插件

此外,营销漏斗的最后一步,也是不可少的感谢购买(确认订单)页面,使用CartFlows也可轻松建置。

设计方面,CartFlows 具备多款网页模板,可一键套用,快速建立美观的商品销售页面。

CartFlows 可一键套用多款销售页模版进行设计

以上是 CartFlows 免费版的功能。

高级版本的功能更加突出,可完成: A / B 测试、一键加购 / 下单按钮、更改结账表单字段、订单数据分析等 .. 功能,是十分优良的营销插件。

若是想先试用功能,可点击下方按钮,即可取得 CartFlows 免费版。

CartFlows 安装+启用

这篇文章,我们只需使用 CartFlows 免费版,即可开始 Landing page 设计。

那么,开始安装 CartFlows ,前往 WordPress 后台 > 安装插件,输入 CartFlows > 选择安装+启用即可。

安装+启用 CartFlows

添加一页式销售页(套用模板)

安装+启用完成,接着我们便可套用 CartFlows 模版,着手进行 Landing Page 设计。

小提醒: Hello Elementor 主题的一大特色就是可以自行进行多样化设计,所以如果你想跳过套用模板,自己新增页面设计也是可以的:)

创建 Flows(套用模版)

前往 CartFlows > Flows > Add New ,新增第一个营销漏斗(Flows)。

一页式销售页设计:前往 CartFlows 新增 Flows

接着我们会跳转到Templates页面,选择你喜爱的销售页模板,进行导入。

我以 Music Album 模版,作为 Landing page 销售页范例,选择 Import Flow 导入。

一键导入CartFlows一页式购物网站模板

输入易识别的名字,即可创建 Flows 。

输入名称,创建 Flows

创建好一个新的营销漏斗(Flows)后,会自动跳转至该 Flows 页面。

Steps 分步页面

这里我们可以看见一个完整的营销漏斗,需要的分步页面。

目前分别有:Landing 商品着陆页、Checkout 结账页面、Thank You 感谢页面。

升级至进阶版本后,即可选择「Add New Step 」新增分步页面(因本文教程只需制作一页式商品着陆页,我们先保持原本的步骤页面即可)。

选择「 Add New Step 」新增分步页面

若是之后有增加分步页面的需求,站长可自行选择是否购买进阶版本:)

Settings 设定

接着我们来查看该 Flows 的设定。

切换到Settings区块,可以看到左手边有四个区块,而目前停在General设定,如下图。

销售页制作:CartFlows 单一销售漏斗(Flows)设定

我们可以在一般设定变更:营销漏斗标题、连结代称、是否开启漏斗索引,若无特别需求,维持预设即可。 更多永久链接设定。

其他功能为进阶版启用,因此这边就不多做说明,我们继续往下教程吧:)


CartFlows 指派商品

在前面的章节中,我们已经导入 CartFlows 的初始模版,也成功新增一个营销漏斗。

现在我们需要指派商品,至单一 Landing Page 销售页。

选择 Checkout 结账标签页面。

一页式 Landing page 设计:找到 Checkout 页面选择变更

找到 Products 页签 > Add New product 指派产品。

前往 Products 页面指派贩售商品

跳出弹跳窗口,找到刚刚新增的 WooCommerce 产品,选择「 Add Product 」完成指派。

键入指定商品,完成指派

指派成功,可以更改强制购买数量、折扣。 设定完成,选择储存设定。

更改商品设定,完成后储存设定

这样我们就完成商品指派,下一章节,我们就来学习如何进行一页式 Landing page 设计吧:)


新增+设计商品描述版型

因为是一页式销售页,我们继续在结账表单页,新增商品描述即可。

使用 Elementor 设计销售页面

前往 Design 区块,选择「 Edit with Elementor 」按钮,进入设计页面。

选择 Edit with Elementor 进入一页式销售页模版进行设计

我们会看见页面中有结账表单,接着就可以开始使用 Elementor 来新增+设计商品描述区块啰:)

使用 Elementor 进行一页式 Landing page 设计

这边我新增一个倒数计时区块当作示范,大家可以依照自己需求,新增区块进行销售页设计。

在左手边区块小工具中,找到「专业版」选项,找到「 倒数 」区块,拖曳到页面任意位置。

找到倒数区块,拖曳至页面

接着点击倒数区块,选择内容或样式,可以修改外观设计。

修改倒數區塊設計樣式

其他商品描述设计,例如:商品介绍、特色、各项促销 Banner 等 .. 可依照站长需求,拉入相对应区块进行设计。 更多 WooCommerce 营销设定教程。

套用 Elementor Pro 版型

对于设计较没有概念的站长,也可开启版型库寻找灵感。

有许多 Pro 版本专属的精美版型可供站长选择唷:)

Elementor教程 :切换区块类型,可善用分类
Elementor :善用分类,寻找一页式网页版型

设计结账表单区块

设计好所有商品描述后,我们也可以针对结账表单进行样式修改 / 设计。

点击结账区块,左手边的面板切换至“ 样式 ”,即可针对不同地方设计,详细如下图。

Landing page 销售页设计:结账表单细节调整

完成设计之后,记得要选择“ 更新 ”存储唷!


19. 设计感谢页面

完成商品描述+结帐的一页式 Landing Page 后,接着是营销漏斗的最后一站,也就是「 感谢页面 」。

套用模版即有默认感谢页模板,但我们也可在 Elementor 新增设计区块。

回到 Flows 页面,找到 Thank You 分步页面,选择 Edit 进行修改设计。

Landing page 销售页设计:选择 Thank You 分步页面进行设计

选择 Edit with Elementor 按钮,进入设计页面。

进入「Thank You」分步设计页面

进入后,会看见预设的感谢页模板,这里在前台会显示顾客的订单信息,但现在看不见订帐信息,不过不用担心,前台显示的会是正常样式。

我们可以选择该区块,进行背景、标题文字等 .. 细节调整。

Landing page 销售页设计:设计显示订单信息区块

接着,我们还可以对感谢页面新增区块设计,来丰富感谢页面。

要是没有想法,我们可以借助 Elementor 版型库,找到精美的模板范例,帮助我们设计 Landing page。

点击下图的引用模板 Icon ,叫出 Elementor 版型库。

Elementor教程 :引入模板
使用 Elementor 引入模板

选择区块,依据分类,找到想新增的区块版型。

这边我新增「Team」版型,来介绍乐队成员。 选择第一个区块,插入至页面。

Landing page 銷售頁設計:新增版型

插入後,我們就可以設計該區塊,將內容進行修改。

Landing page 銷售頁設計:針對新增版型區塊進行修改

修改完成后,我们进行存储即可:)

实际前往前台结账,查看设计效果,发现设计成功,也有显示订单信息~

感谢页面设计成果

会员账户管理

Landing Page 销售页设计完成,还需在主菜单新增「我的帐号 」页面,以便顾客能够确认订单信息。

小备注:关于新增主菜单详细新增+设定,可前往 WordPress 基础后台教程 进行学习~

前往主菜单,找到“ 我的帐号 ”页面选项,选择「添加至菜单」,完成后储存。

将我的帐号新增至主菜单

新增后,我们借由菜单前往「我的帐号」页面查看,发现成功新增,并且能够查看订单信息啰。

Landing Page 销售页制作:成功新增我的帐号页面

以上就是 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
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板