在 WordPress 中,编辑器是创建和管理网站内容的核心工具。随着时间的推移,WordPress 编辑器经历了多次变革和升级,目前主要有经典编辑器(Classic Editor)和古腾堡编辑器(Gutenberg Editor)。此外,还有一些流行的第三方页面构建器,如 Elementor、Beaver Builder、Divi Builder 和 WPBakery Page Builder。本文将详细介绍这些编辑器及其主要功能和使用方法。
Table of Contents
趋势简述
近年来,WordPress 编辑器的发展趋势主要体现在以下几个方面:
- 区块编辑模式:古腾堡编辑器引入的区块编辑模式受到了广泛欢迎,使内容创建更加模块化和灵活。用户可以通过添加、移动和自定义各类区块,轻松实现复杂的页面布局。
- 拖放式页面构建器:像 Elementor 和 Beaver Builder 这样的第三方页面构建器提供了直观的拖放式编辑体验,进一步简化了页面设计和内容创建过程。这类构建器功能强大,适合需要高度自定义和专业设计的用户。
- 响应式设计和实时预览:现代编辑器越来越注重响应式设计和实时预览功能,用户可以在编辑过程中实时查看不同设备上的显示效果,确保网站在各种设备上的用户体验一致。
- 增强的可扩展性:新的编辑器和页面构建器通常支持多种扩展插件和主题,提供丰富的自定义选项和功能扩展,满足不同类型网站的需求。
- 集成和兼容性:随着 WordPress 生态系统的不断壮大,编辑器和页面构建器越来越注重与其他插件和服务的集成和兼容性,提升整体网站的功能和性能。
接下来,本文将详细介绍经典编辑器、古腾堡编辑器、Elementor、Beaver Builder、Divi Builder 和 WPBakery Page Builder 的主要功能和使用方法。
经典编辑器(Classic Editor)
简介: 经典编辑器是 WordPress 的原始编辑器,类似于传统的文本处理器界面。尽管古腾堡编辑器已成为默认编辑器,但经典编辑器仍然受到许多用户的青睐,特别是那些习惯于传统编辑模式的人。 主要功能:
- 文本编辑:支持丰富的文本格式,如加粗、斜体、下划线、项目符号等。
- 媒体插入:可以轻松插入图片、视频、音频等媒体文件。
- 短代码:支持短代码功能,可以通过短代码添加复杂功能。
- HTML 编辑:切换到文本模式,可以直接编辑 HTML 代码。
使用方法:
- 创建新文章或页面:在 WordPress 仪表盘中,导航到“文章”或“页面”菜单,点击“写文章”或“写页面”。
- 编辑内容:使用经典编辑器的工具栏进行文本格式化、插入媒体、添加短代码等操作。
- 发布或保存草稿:编辑完成后,点击“发布”按钮发布内容,或点击“保存草稿”按钮稍后再继续编辑。
适用场景:
- 博客文章
- 简单的页面内容
- 需要频繁使用短代码的内容
古腾堡编辑器(Gutenberg Editor)
简介: 古腾堡编辑器是 WordPress 5.0 版本引入的新编辑器,采用区块(Block)编辑模式,使内容创建更加灵活和直观。古腾堡编辑器彻底改变了内容创建和布局方式,提供了丰富的区块类型和自定义选项。 主要功能:
- 区块编辑:每个内容元素(如段落、图片、视频等)都是一个区块,可以自由添加、删除和移动。
- 多样化的区块:内置多种区块类型,如文本、标题、图像、画廊、按钮、表格等,支持扩展第三方区块。
- 实时预览:实时预览内容布局,所见即所得。
- 样式和设置:每个区块都有独立的样式和设置选项,可以自定义外观。
使用方法:
- 创建新文章或页面:在 WordPress 仪表盘中,导航到“文章”或“页面”菜单,点击“写文章”或“写页面”。
- 添加区块:点击“+”按钮,从区块库中选择需要的区块类型,添加到内容区域。
- 编辑区块:使用区块工具栏和侧边栏设置选项,自定义区块内容和样式。
- 发布或保存草稿:编辑完成后,点击“发布”按钮发布内容,或点击“保存草稿”按钮稍后再继续编辑。
适用场景:
- 复杂的页面布局
- 视觉效果丰富的内容
- 需要灵活定制的内容
Elementor 页面构建器
简介: Elementor 是一款功能强大的第三方页面构建器插件,提供直观的拖放式编辑功能,适合创建高度自定义和专业的页面设计。Elementor 深受设计师和开发者的喜爱,因其丰富的功能和灵活的布局选项。 主要功能:
- 拖放编辑:通过拖放元素创建页面布局,无需编写代码。
- 丰富的元素:内置多种元素,如标题、文本框、图像、视频、按钮、表单等,支持第三方扩展。
- 模板库:提供丰富的预制模板和区块,快速创建专业页面。
- 实时预览:所见即所得的编辑体验,实时预览修改效果。
- 高级功能:包括动画效果、响应式设计、WooCommerce 集成等。
使用方法:
- 安装和激活:在 WordPress 插件库中搜索 Elementor,点击“安装”并激活。
- 创建新页面:在 WordPress 仪表盘中,导航到“页面”菜单,点击“添加新页面”。
- 启用 Elementor:点击“使用 Elementor 编辑”按钮,进入 Elementor 编辑界面。
- 添加和编辑元素:从左侧面板中拖放元素到页面,进行自定义编辑和样式设置。
- 保存和发布:编辑完成后,点击“发布”按钮保存和发布页面。
适用场景:
- 企业网站
- 电商网站
- 着陆页
Beaver Builder 页面构建器
简介: Beaver Builder 是另一款流行的第三方页面构建器插件,提供直观的拖放式编辑功能,适合各种类型的网站。Beaver Builder 强调简洁和高效,用户可以快速创建专业的页面布局。 主要功能:
- 拖放编辑:通过拖放元素创建页面布局,无需编写代码。
- 模块和模板:内置多种模块,如文本、图像、视频、按钮等,提供预制模板。
- 实时预览:所见即所得的编辑体验,实时预览修改效果。
- 兼容性:与大多数 WordPress 主题兼容,无缝集成。
使用方法:
- 安装和激活:在 WordPress 插件库中搜索 Beaver Builder,点击“安装”并激活。
- 创建新页面:在 WordPress 仪表盘中,导航到“页面”菜单,点击“添加新页面”。
- 启用 Beaver Builder:点击“使用 Beaver Builder 编辑”按钮,进入 Beaver Builder 编辑界面。
- 添加和编辑模块:从顶部面板中拖放模块到页面,进行自定义编辑和样式设置。
- 保存和发布:编辑完成后,点击“发布”按钮保存和发布页面。
适用场景:
- 个人博客
- 企业网站
- 作品集展示
Divi Builder
简介: Divi Builder 是由 Elegant Themes 开发的一款强大的页面构建器插件,提供丰富的设计元素和灵活的布局选项。Divi Builder 以其独特的可视化编辑界面和多样化的设计工具深受用户喜爱。 主要功能:
- 拖放编辑:通过拖放元素创建页面布局,无需编写代码。
- 丰富的设计元素:内置多种设计元素,如文本、图像、视频、按钮、表单等。
- 预制布局:提供大量预制布局和模板,快速创建专业页面。
- 全局元素:可以创建全局元素,一次编辑,多处应用。
- 高级设计选项:包括自定义 CSS、响应式设计、动画效果等。
使用方法:
- 安装和激活:在 Elegant Themes 网站购买并下载 Divi Builder 插件,上传到 WordPress 并激活。
- 创建新页面:在 WordPress 仪表盘中,导航到“页面”菜单,点击“添加新页面”。
- 启用 Divi Builder:点击“使用 Divi Builder 编辑”按钮,进入 Divi Builder 编辑界面。
- 添加和编辑设计元素:从左侧面板中拖放设计元素到页面,进行自定义编辑和样式设置。
- 保存和发布:编辑完成后,点击“发布”按钮保存和发布页面。
适用场景:
- 企业网站
- 电商网站
- 作品集展示
WPBakery Page Builder
简介: WPBakery Page Builder(原名 Visual Composer)是一款广泛使用的页面构建器插件,提供丰富的拖放式编辑功能。WPBakery 以其强大的功能和灵活性受到用户青睐,适合各种类型的网站。 主要功能:
- 拖放编辑:通过拖放元素创建页面布局,无需编写代码。
- 前端和后端编辑:支持前端实时编辑和后端编辑。
- 丰富的内容元素:内置多种内容元素,如文本、图像、视频、按钮、表单等。
- 模板库:提供大量预制模板,快速创建页面。
- 扩展支持:支持多种第三方扩展,增强功能。
使用方法:
- 安装和激活:在 WordPress 插件库中搜索 WPBakery Page Builder,点击“安装”并激活。
- 创建新页面:在 WordPress 仪表盘中,导航到“页面”菜单,点击“添加新页面”。
- 启用 WPBakery Page Builder:点击“使用 WPBakery Page Builder 编辑”按钮,进入 WPBakery 编辑界面。
- 添加和编辑内容元素:从左侧面板中拖放内容元素到页面,进行自定义编辑和样式设置。
- 保存和发布:编辑完成后,点击“发布”按钮保存和发布页面。
适用场景:
- 企业网站
- 博客网站
- 电商网站
优缺点对比
编辑器 | 优点 | 缺点 |
---|---|---|
Elementor | – 强大的拖放编辑功能 – 丰富的设计元素和模板库 – 实时预览和高级设计选项 |
– 高级功能需要购买专业版 – 对初学者可能有一定学习曲线 |
Beaver Builder | – 简洁直观的拖放编辑界面 – 与大多数 WordPress 主题兼容 – 提供预制模板和模块 |
– 高级功能需要购买专业版 – 自定义选项相对有限 |
Divi Builder | – 强大的可视化编辑界面 – 丰富的设计元素和预制布局 – 全局元素和高级设计选项 |
– 高级功能需要购买 Elegant Themes 会员 – 对初学者有一定学习曲线 |
WPBakery Page Builder | – 强大的拖放编辑功能 – 支持前端和后端编辑 – 丰富的内容元素和模板库 |
– 高级功能需要购买专业版 – 界面相对较复杂 |
新手推荐
推荐使用的编辑器:Elementor 原因:
- 易于上手:Elementor 提供直观的拖放式编辑界面,新手可以快速上手,无需编写代码。
- 丰富的功能:即使是免费版,Elementor 也提供了丰富的设计元素和模板,足以满足大多数网站的需求。
- 强大的社区支持:Elementor 拥有庞大的用户社区和丰富的在线教程,新手在遇到问题时可以轻松找到解决方案。
- 扩展性强:Elementor 支持多种第三方扩展插件和主题,用户可以根据需求随时扩展网站功能。
通过使用 Elementor,初学者可以快速创建专业美观的 WordPress 网站,同时享受到简洁高效的编辑体验。如果在使用过程中遇到任何问题,可以参考 Elementor 的官方文档和社区资源,或者寻求我们的帮助。