Gudenberg- 古登堡编辑器快速入门

Gudenberg是wordpress5版本后默认的页面编辑器,相比于之前的经典编辑器(classic editor),古登堡编辑器的易用性和功能性都大大提升。即使没有任何网页制作经验,也可以非常容易地使用古登堡编辑器制作精美的网页。

元素块的概念

在古登堡编辑器中,网页是以块(Block)为基本单位构建的。块有段落(paragraph)、图片(image)、Heading(标题)等多种类型,因此古登堡编辑器又称为块编辑器(Block editor)。

在页面编辑界面,点击菜单栏中的“+”号,选择需要的块即可将其添加到网页中。

mark

选中块元素,元素上方和页面右侧会出现该元素的属性工具栏,可进一步对块进行参数调整,如对齐、大小、上下位置等。

mark

5.6版本的wordpress中,古登堡编辑器自带了20多种元素块,涵盖了网页设计中常用的段落、标题、图片、视频、按钮等元素。

同时古登堡编辑器还提供了扩展接口,支持以插件的形式扩展其他类型的块元素,在pugins插件市场中可以搜索到非常多的第三方插件。

mark

以Getwid这个插件为例,提供了多达40多种扩展块,包括幻灯片Slide、表单Form等企业网站必备的元素:

mark

网页布局基础

网页布局(Page Layout)是指网页中各个视觉元素的位置和排列组合关系。

mark

Gudenberg编辑器中,块元素默认按照从上往下排列,可通过块工具栏中的“^ v ”上下箭头调整块上下顺序。

mark

如果需要调整上下两个块之间的间隔,可通过插入spacer间隔元素实现。

mark

块的宽度默认占用整行,块的高度由填充的内容决定。

如果需要在一行中排列两个块元素,则需要借助列(columns)这个布局元素,然后在columns中放入其他元素块。

mark
mark

古登堡编辑器提供的排版功能非常有限,如果需要实现稍微复杂点的设计需求,如控制元素上下左右边距、移动端适配、元素动态效果等就只能通过手动编写CSS样式来实现了。

古登堡编辑器的功能还在不断完善中,很多新的功能在正式加入到发行版本之前会以独立插件“gutenberg”的形式出现,如果需要尝试这些新功能,可以安装这个插件。需要注意的是,这些新功能可能会不稳定,不建议生产网站使用。

示范网页

对于没有设计经验的新手来说,从零开始设计一个完整的网页还是相当有挑战,涉及到网页布局、颜色搭配、字体选择、对齐等多种设计操作,没有一定的设计经验短时间内很难设计出一个自己满意的网页效果。

一个快捷的方法是借鉴那些专业设计师制作好的Demo示范网页,将其导入到古登堡编辑器中,然后在此基础上再做修改。

“Starter templates”就是这么一个插件,在它提供的网页库中可以找到非常多的经过专业设计师制作的精美示范网页,这些网页除了具备设计感外,还具备移动端自适应等丰富功能。

mark

挑选到适合自己需求的网页后,就可以一键导入到自己的网站中。

mark

Starter templates插件和astra主题都是brainstorm这家公司开发的,这家公司开发的插件都非常受欢迎,而且评分都在4.8分以上。

第三方编辑器

除了自带的古登堡编辑器之外,市场上还有非常多的第三方编辑器可供选择,如DIVI、Elementor、Beaver等,这些知名的编辑器比古登堡当前的功能要强大很多,可以满足专业网页设计的制作需求,但大多是收费插件,根据自身建站需要选择使用。

我个人特别推荐 Elementor编辑器,如果把古登堡编辑器比作修图工具的美图秀秀,Elementor就是Adobe公司的PhotoShop。关于Elementor编辑器的使用可参考博客相关文章。

End
Share on facebook
Facebook
Share on email
Email
Share on linkedin
LinkedIn

这篇文章有用吗?

平均评分 4.8 / 5. 投票数: 9

本文目录:

Subscribe
提醒
0 Comments
Inline Feedbacks
View all comments
Scroll to Top
TTVPS公众号

欢迎关注TTVPS公众号,
一起交流探讨最新的外贸营销技术!