Gudenberg是wordpress5版本后默认的页面编辑器，相比于之前的经典编辑器(classic editor)，古登堡编辑器的易用性和功能性都大大提升。即使没有任何网页制作经验，也可以非常容易地使用古登堡编辑器制作精美的网页。
元素块的概念
在古登堡编辑器中，网页是以块(Block)为基本单位构建的。块有段落(paragraph)、图片(image)、Heading(标题)等多种类型，因此古登堡编辑器又称为块编辑器(Block editor)。
在页面编辑界面，点击菜单栏中的“+”号，选择需要的块即可将其添加到网页中。
选中块元素，元素上方和页面右侧会出现该元素的属性工具栏，可进一步对块进行参数调整，如对齐、大小、上下位置等。
5.6版本的wordpress中，古登堡编辑器自带了20多种元素块，涵盖了网页设计中常用的段落、标题、图片、视频、按钮等元素。
同时古登堡编辑器还提供了扩展接口，支持以插件的形式扩展其他类型的块元素，在pugins插件市场中可以搜索到非常多的第三方插件。
以Getwid这个插件为例，提供了多达40多种扩展块，包括幻灯片Slide、表单Form等企业网站必备的元素：
网页布局基础
网页布局(Page Layout)是指网页中各个视觉元素的位置和排列组合关系。
Gudenberg编辑器中，块元素默认按照从上往下排列，可通过块工具栏中的“^ v ”上下箭头调整块上下顺序。
如果需要调整上下两个块之间的间隔，可通过插入spacer间隔元素实现。
块的宽度默认占用整行，块的高度由填充的内容决定。
如果需要在一行中排列两个块元素，则需要借助列(columns)这个布局元素,然后在columns中放入其他元素块。
古登堡编辑器提供的排版功能非常有限，如果需要实现稍微复杂点的设计需求，如控制元素上下左右边距、移动端适配、元素动态效果等就只能通过手动编写CSS样式来实现了。
古登堡编辑器的功能还在不断完善中，很多新的功能在正式加入到发行版本之前会以独立插件“gutenberg”的形式出现，如果需要尝试这些新功能，可以安装这个插件。需要注意的是，这些新功能可能会不稳定，不建议生产网站使用。
示范网页
对于没有设计经验的新手来说，从零开始设计一个完整的网页还是相当有挑战，涉及到网页布局、颜色搭配、字体选择、对齐等多种设计操作，没有一定的设计经验短时间内很难设计出一个自己满意的网页效果。
一个快捷的方法是借鉴那些专业设计师制作好的Demo示范网页，将其导入到古登堡编辑器中，然后在此基础上再做修改。
“Starter templates”就是这么一个插件，在它提供的网页库中可以找到非常多的经过专业设计师制作的精美示范网页，这些网页除了具备设计感外，还具备移动端自适应等丰富功能。
挑选到适合自己需求的网页后，就可以一键导入到自己的网站中。
Starter templates插件和astra主题都是brainstorm这家公司开发的，这家公司开发的插件都非常受欢迎，而且评分都在4.8分以上。
第三方编辑器
除了自带的古登堡编辑器之外，市场上还有非常多的第三方编辑器可供选择，如DIVI、Elementor、Beaver等，这些知名的编辑器比古登堡当前的功能要强大很多，可以满足专业网页设计的制作需求，但大多是收费插件，可根据自身建站需要选择使用。
我个人特别推荐Elementor编辑器，https://ttvps.com.cn这个网站就是基于Elementor制作的。如果把古登堡编辑器比作修图工具的美图秀秀，Elementor就是Adobe公司的PhotoShop。关于Elementor编辑器的使用可参考博客相关文章。
最新WordPress5完整教程列表
- 01- WordPress与网站的基本概念
- 02- WordPress快速安装
- 03- WordPress快速入门
- 04- Astra主题快速入门
- 05- Page 和 Post 页面区别
- 06- Gudenberg编辑器快速入门
- 07- WordPress必备插件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
