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

WordPress页面编辑器 :最佳可视化设计插件(2023)

这是一篇完整的「WordPress页面编辑器」推荐,协助你快速网页设计。

使用页面编辑器的好处是,你不需会任何的程序技术,用简单拖曳功能的方式,就能完成专业的定制化网站制作(可视化编辑的概念)。

文中我整理了几个主流的页面编辑器,并对此做分析和比较,应该能帮助你找到适合自己的。

好啰,我们来看一下文章大纲。

  • 页面编辑器是什么?
  • 1. Elementor
  • 2. Divi
  • 3. Beaver Builder
  • 4. WPBakery
  • 5. Thrive Architect
  • 6. Themify
  • 7. Visual composer
  • 综合比较整理
  • 常见问题
  • WordPress 学习资源

如果准备好了,我们就开始吧:)


页面编辑器是什么?

WordPress 页面编辑器 :为什么要使用页面编辑器?

WordPress 是知名的网页制作平台 / 网站管理系统,全球大约有 30% 以上是使用 WordPress 建置网站,这是个极大的数字,展现它的独特性。

在一切的开始,当你的网站制作 完成,通常会安装 优质主题主题、优质网站插件,让你的网站有基础的版型和功能。

对于某些类型的网站,像是官网设计、购物网站设计等 ..,页面编辑器通常是不可或缺的一款插件,因为它能帮你做出漂亮,且符合品牌调性的页面。

下面我列出几个 WordPress 页面编辑器的优点。

  • 客制化网页设计:能客制化字段布局,只要把想用的元素,拖曳至字段里面,就能呈现在网页上。
  • 不需有程序基础,简单上手:用拖曳的方式即可制作网页,不用懂程序码。
  • 提供现成的模板:大部分页面编辑器,都会提供多种模板 or 区块样式,可直接点击套用,就能马上完成页面设计,就不用从零制作,非常方便。
  • 支持不同装置浏览:元素基本上都有做响应式设计,就不用花太多时间调整手机版网站了(电脑 / 平板 / 手机,完美兼容)。
  • 额外功能:不同页面编辑器,都有属于自家开发的额外功能,能同时享用到。
  • 还有更多优点

知道页面编辑器的好处后,接着就是选择哪一款适合自己,因为不同家的软件还是有差别,文章我也会跟大家分享:)


1. Elementor

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

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

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

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

Elementor 形象教程示范

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

Elementor 多功能的区块元素
Elementor 多功能的区块元素

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

Elementor 具备丰富的模版库

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

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

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

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

方案评论

Elementor 有免费版方案可使用,如果感觉不错用且有更多设计上的需求,再升级为进阶版即可。 完整 Elementor Pro 进阶教程。

Elementor 高级版,有额外 50 多个专业元素功能、300 多种高级模板、主题编辑器、表单编辑器、弹出式广告编辑器、WooCommerce Builder(购物网站编辑器)等 ..,有更多功能可以使用。

Elementor 进阶版方案,分为个人用、公司用的两大类型,里面又有不同的方案,但能使用的功能几乎都一样,最大的差别是「使用的网站数量」。

如果你只有一个网站会使用,只需购买最低的方案即可,依此类推。


2. Divi

WordPress页面编辑器 :D ivi 主题主题和页面编辑器
Divi 主题主题和页面编辑器

Divi 是由知名 Elegant Themes 公司开发,是许多网页设计师喜爱的一款软件,除了功能强大且有很多高质感的元素(和现成模板)。 更多完整Divi中文教程。

不需要任何程序概念,用拖曳方式就能设计漂亮的网站,就像官网所描述的,可视化设计和布局排版都将变得更加容易。

使用 Divi 主题,完整架站教程(全攻略分享)

使用 Divi 主题,完整架站教程(影片全攻略分享)

Elegant Themes 旗下产品,有全功能 Divi Theme 主题主题、Divi Builder 页面编辑器、Extra 主题(可用在博客 / 新闻杂志 / 作品集 .. )、Bloom 电子报注册营销工具、Monarch 社群工具等 ..。

所以使用 Divi 软件,不会只有一种软件可用,而是能享受它们公司的所有服务,非常的划算。

加上多种区块模板和完整的网站样板,有商业风、线上开店平台、科技风、服务类型等 .. 多种主题风格。

你只需几点击按钮,即可引用区块样板,或套用整个网站设计。

WordPress页面编辑器 :D ivi 多种主题主题样板
Divi 多种主题主题样板

Divi 对 Woocommerce 开店平台插件有完美的支持,并提供多种线上开店的区块功能,一样用拖放方式即可放入页面。

WordPress页面编辑器 :WooBuilder 购物网站编辑器
WooBuilder 购物网站编辑器

使用 Divi 会是个很棒的选择,因为它能帮你做到很多事。

方案评论

Divi 的使用方案很简单,它提供「年租用方案 」和「终身方案(一次性)」,这两种价格方案

两种方案都能应用在无限数量的网站,费用也维持在合理范围。

有个好处是,Divi 整体系列包含自开发的多功能 WordPress 主题主题,且和旗下产品有完美兼容,这代表你可能不需再额外购买 WordPress 主题。

特别一提,终身使用方案在 WordPress 页面编辑器市场中,是比较棒的收费方式

这代表你只需负担一次性的小额费用(和外包网页设计相比),就能终身享用所有 Divi 功能。


3. Beaver Builder

wordpress插件推荐 :Beaver Builder 页面编辑器

Beaver Builder 是知名的 WordPress页面编辑器 ,可爱海貍图标是它的经典图标,有很棒的客服支持和讨论社群。

你同样不需会写任何程序代码,只用拖放方式选取区块功能,然后放置在指定位置,即可完成网页设计。

Beaver Builder 有丰富的区块模板和页面样式,只需选择喜爱的模板,然后点击套用就可以。

你甚至可以将自己的设计,另存为全站共享模板,方便你多次使用。

WordPress页面编辑器 :Beaver Builder 的多种网站样板
Beaver Builder 的多种网站样板

Beaver Builder 的页面编辑器,可用在任何的主题主题上,且和多数的 WordPress 知名主题主题 有完美兼容。

它将内容编辑区分成一般编辑器(WordPress 默认值)和 Beaver Builder 编辑器,这代表哪天你想停止使用,也不会丢失网站内容。

WordPress页面编辑器 :Beaver Builder 编辑器

方案评论

Beaver Builder 提供 3 种方案,分别是 Standard 标准版、Pro 专业版、Agency 机构版,每种方案都可应用无限制数量的网站

Standard 标准版 和 Pro 专业版,基本上两者功能差不多,如果是新手入门页面编辑器,可先从标准版开始

Agency 机构版适合个人 Soho 族或是网页设计公司,如果你的预算足够,此方案提供全局管理不同网站上的页面编辑器,可自由调整功能,方便大量管理网站。


4. WPBakery

WordPress 页面编辑器 :WPBakery

WPBakery 是热门的 WordPress页面编辑器 插件,全球有超过 430w+ 下载量,这是个庞大的数字。

它可应用在任何的主题主题,帮助你可视化网页设计,你无需任何的程序能力,就能设计专业的网站。

WPBakery 页面编辑器示例

WPBakery 的所见即所得页面编辑器,让你可以把脑海中想法,转化成现实并转化成网页设计。

它的操作很简单,你一样只需用拖放方式,就可设计网站区块布局。

进行 WordPress 网页制作,需要有多个区块功能丰富网站页面,WPBakery 内建有不同的功能元素,可满足你大部分的需求。

wpbakery 页面编辑器 :多种功能区块列表(仅撷取部分功能)
多种功能区块列表(仅提取部分功能)

WPBakery 的多种专业网站样板,同样是它的特色之一,可快速导入引用网站模板,帮助你丰富整个网站设计。

wpbakery 页面编辑器 :多种网页设计布局,可一键套用
多种网页设计布局,可一键套用

方案评价

WPBakery 没有多余的方案选择,但这也来的更简单容易。

WPBakery 有在 ThemeForest 插件森林 销售自家的页面编辑器,至始至终一直在 WordPress 插件销售排行前几名。

因为许多知名主题主题,都是采用 WPBakery 作为默认编辑器,所以让它的购买量一直高居不下。


5. Thrive Architect

WordPress 页面编辑器 :Thrive Architect

Thrive Themes 是知名的 WordPress 主题主题和网站插件开发商,Thrive Architect 是它旗下的知名页面编辑器。

Thrive Architect 主打用最快、最真实的可视化设计方式,可将你的想法转化成网站设计,参考下面视频会理解更多。

Thrive Architect 简易示范影片

Thrive Architect 有设计上百种高转化率页面,可快速导入引用网站模板,帮助你达成想要的目的。

WordPress页面编辑器 :Thrivethemes Architect 多种高转化率页面模板
Thrivethemes Architect 多种高转化率页面模板

多种 WordPress 区块功能元素,是少不了的网页设计编辑基础,可用拖放式放置在你的网页上,丰富你的网页制作。

WordPress页面编辑器 :Thrivethemes Architect 多种区块功能元素(仅撷取部分功能)
ThriveThemes Architect 多种区块功能元素(仅撷取部分功能)

Thrive Architect 支持响应式设计功能,能实时预览不同尺寸屏幕的页面,加速网页设计流程。

或是针对不同屏幕尺寸,显示或是隐藏功能区块,帮助你不同装置的网页设计。

WordPress页面编辑器 :支持手机响应式设计
支持手机响应式设计

方案评论

Thrive Themes 是知名的 WordPress 主题主题和网站插件开发商,它旗下有多种产品,像是 Theme Builder 主题编辑器、Architect 页面编辑器、Quiz 测验编辑器、Comments 评论功能 .. 。

好处是,它们家采用一条龙功能整合,把常会使用到的 WordPress 插件,都已经事先开发好并整合在服务里面。

如果你不喜欢花时间搭配主题&插件,那直接使用 Thrive Themes 的服务,也是很好的选择,因为它把全部都整合在一起了。

方案费用

Thrive Suite 是多合一的服务方案,约 $19 美金 / 月(一年约 $228 美金),就能享用全部的功能。

立即取得 Thrive Architect 页面编辑器

6. Themify

WordPress 页面编辑器 :Themify Builder
Themify’s Builder Pro 页面编辑器

Themify 是知名的 WordPress 主题主题和网站插件开发商,Themify Builder 是它旗下的知名页面编辑器。

使用 Themify Builder 可以自由设计页面布局,和拖曳内建的丰富元素,完成定制网页设计,可参考演示视频会了解更多。

Themify’s Builder 页面编辑器

Themify Builder 有多种现成专业的网页设计布局,可让你在短短几分钟套用整个样板,并完成网站。

WordPress页面编辑器 :Themify Builder多种网站样板
Themify Builder多种网站样板

这是 Themify Builder 页面编辑器的部分截图,它没有额外的复杂画面,只有易上手的功能区块和版面配置,帮助你网站建置。

Themify Builder 页面编辑器画面
Themify Builder 页面编辑器画面

方案评论

Themify 有两种使用方法,第一种是购买 Themify 自家开发的主题主题(像是 Ultra),因为主题预设有内建 Themify Builder 页面编辑器,还有多种自家插件。

另一种是单独购买 Themify Builder 页面编辑器插件,再配合任何的 WordPress 主题主题,皆可顺利运作。


7. Visual Composer

WordPress 页面编辑器 :Visual Composer

Visual Composer 是知名老字号的「 WordPress页面编辑器 」插件,它优质的可视化页面编辑功能,让它在全球有许多拥护者。

撇开 Visual Composer 免费版不谈(因为功能不多),进阶版除了页面编辑器功能,还有像是主题编辑器、弹出式窗口编辑器、WooCommerce 电商支持等 .. 功能可用。

Visual composer 页面编辑器范例影片

Visual Composer 有多种专业的功能区块,可自由组装属于你的网站设计,不论是社群链接、网站图标、WooCommerce 电子商务功能支持 .. ,都任你套用。

Visual Composer 页面编辑器,多种网站区块功能(仅列举部分功能)
Visual Composer 页面编辑器,多种网站区块功能(仅列举部分功能)

Visual Composer 有提供多种免费版 or 进阶版的网站样板,只需找到你喜爱的,然后按下按钮即可套用。

Visual Composer 多种网站样板套用
Visual Composer 多种网站样板套用

Visual Composer 同样支持手机版响应式设计,你可以在不同画面装置,进行不同的页面设计,或是调整指定区块在不同画面的显示或隐藏。

Visual Composer 支持手机画面预览,方便响应式设计
Visual Composer 支持手机画面预览,方便响应式设计

方案评论

Visual Composer 有提供免费版方案,如果想先试用看看,也可先下载玩玩看。

高级版方案,除了页面编辑器的功能,还有像是主题编辑器、弹出窗口编辑器、多种文章布局功能等 .. 多种插件,都能一次拥有。

至于进阶版不同的方案,所拥有的功能都大致相同,最大差别是在使用的网站数量 。


综合比较整理

WordPress 页面编辑器 :综合比较整理

WordPress 页面编辑器插件,可让你自由的设计网站页面,是经营个人或公司品牌网站,不可或缺的好东西。

看完以上的推荐,可能你正在想到底哪个适合自己? 在实际用过多种 WordPress 页面编辑器后,我发现。

最推荐的是哪种页面编辑器呢?

第一推荐是使用 Elementor,因为整题功能齐全完整,且接口流程设计的非常容易上手,加上有提供免费版方案,可让网站主可做基本的页面设计。 参考 Elementor 免费版教程。

如果有进一步的网站设计需求,进阶版 Elementor 功能更加强大,几乎能完成你想要的需求。 参考 Elementor 进阶教程。

Elementor 和热门主题像是 Astra、OceanWP、Soledad 等 .. ,有着完美的项目整合,这让它的声势更上一层楼。

小犬网站就是使用 Astra 主题 + Elementor 页面编辑器组合,进行网站建置。

除了 Elementor 还有其他推荐项目吗?

除了 Elementor 页面编辑器以外,Divi 是我接下来的选择标的。 更多完整Divi中文教程。

原因 Divi 本身的生态系丰富,虽然他们没有提供免费版试用,但是购买服务后,等于是享用 Elegant Themes 旗下的所有软件服务(有多功能主题、电子报营销软件、社群工具等 .. ),是非常值得的投资。

再来,Divi 有提供终生方案,这在 WordPress 页面编辑器领域中,是比较少看到的现象。

简单来说,只需购买一次,终身就享有免费升级&优先客服支持(而且可用在无限个网站)。

以上只是个人的使用经验,依照每个人体验会有所不同,在这里仅此分享而已。

我喜爱的页面编辑器,前三名选择:

  1. Elementor
  2. Divi
  3. Beaver Builder

常见问题

这里统整了一些 WordPress 页面编辑器的常见问题,希望能同时帮助到大家,如下。

文章提到的页面编辑器,我的主题主题可以用吗?

文中提到的页面编辑器,都能应用在不同主题上,因为它只是个 WordPress 插件,就跟其他插件类型一样。

但这边有些额外的小建议,如果你用的主题有特别提到,和哪个页面编辑器支持度比较,会建议就用那款插件(像是 Astra 主题,就有提供多个 Elementor 或是 Beaver Builder 相关模板)。

还有一种情况是,如果主题有内建自家的页面编辑器,像是 Newspaper 的 TagDiv
Composer、Avada 的 Avada Builder、Flatsome 的 UX Builder 等 ..。

完整主题教程,可参考 Newspaper 教程、Avada 教程、Flatsome 教程。

如果是这样,会建议直接使用内建的,就不需再额外安装其他的页面编辑器,因为自家旗下的产品,彼此整合度一定是最高。

使用 WordPress 页面编辑器,可以做什么事呢?

大部分页面编辑器,都会提供多种模板 or 区块样式,可直接点击套用,就能马上完成页面设计,就不用从零制作,非常方便。

而且有提供多种元素功能,可简单拖曳元素&可视化排版,能完成绝大部分的网页制作。

Elementor 和 Divi 哪个比较好?

不得不说,这两个页面编辑器都真的很棒(其实我都有买),但主要依照用户的习惯挑选。

以我自己来说,我比较喜欢自由搭配网站上的所有配置,所以选择了 Astra 主题+Elementor 页面编辑器的搭配。

但有些 WordPress 玩家,比较喜欢都用同一家的工具,觉得这样比较省力省时,而且不太用考虑一些其他的配置,或是单纯就是喜欢 Divi 的风格,就会优先选择它。

原文链接:https://www.itaoda.cn/blog/11196.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

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

评论0

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

社交账号快速登录

× 发送
微信扫一扫

温性提示

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

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

23+
行业模板