GenerateBlocks轻量级WordPress页面编辑器详细介绍

GenerateBlocks是一款 WordPress页面编辑器，GenerateBlocks页面编辑器与其它页面编辑器相比属于轻量级的。特点是提供了很多强大的编辑功能，又不会增加 js和css代码，让 WordPress很轻快的跑起来，使用GenerateBlocks构建更好的 WordPress网站。

关于GenerateBlocks

Goolge在每次更新中都特别强调网站打开速度，随着 Google算法不断发展，现在对网站速度的要求越来越严格。很多 WordPress主题比较臃肿，向代码中添加了很多 js、css代码，严重拖慢了网站打开速度，而与此同时 GenerateBlocks一直在想法设法减少添加代码，让 WordPress网站打开更快，符合 Goolge要求。

GenerateBlocks与 elementor编辑器相似，都能构建功能强大的网站。GenerateBlocks可以和任何 WordPress主题搭配使用，我把 GenerateBlocks与GeneratePress主题一起使用。GenerateBlocks提供免费和付费版本，都有很不错的功能。

虽然 GenerateBlocks是个插件，不过基于其页面编辑器的属性和与 GeneratePress主题的紧密联系，老魏也把相关内容归纳到 GeneratePress专题中。

GenerateBlocks特点

GenerateBlocks插件专为速度、性能打造。

• GenerateBlock插件代码安全，稳定和超轻量级；
• 使用干净的HTML5代码，动态CSS且不依赖代码；
• 灵活：使用这四个模块，你可以构建任何布局，进行任何设计；
• 反应：使用设备级控件和高级网格创建专为任何屏幕设计的出色站点；
• 编码标准：按照最高的编码标准构建，以确保安全性，稳定性和未来的兼容性。
• 对主机服务器要求不高，老魏在 1核CPU、1G内存的云服务器中流畅运行 GeneratePress主题+GeneratePress Pro插件+GenerateBlocks插件设计的网站。
• 更多特点请查看 GenerateBlocks官网网站。

WordPress安装GenerateBlocks插件

在 WordPress后台 > 插件 > 安装插件，搜索 GenerateBlocks，安装并启用 GenerateBlocks。

默认安装的 GenerateBlocks是免费版，功能也是足够用的。如果你还有更多高级需要可以购买 GenerateBlocks Pro（付费版）使用。

购买后登录 GenerateBlocks官网下载压缩包，从 WordPress后台 > 插件 > 安装插件上传，安装激活后，转到settings，输入 license key（许可密钥）就可以使用了。

GenerateBlocks “块”的概念

GenerateBlocks只有4个block（块）：Container（容器），Grid（网格），Headline（标题）、Buttons（按钮），你可以用这4个块构建出任何内容来。其中 Grid是最重要的一个块。

• Container（容器）：把你的内容组织成行和区块；
• Grid（网格）：使用灵活的网格创建高级布局；
• Headline（标题）：使用高级字体内容丰富的文本；
• Buttons（按钮）：创建漂亮的按钮推动访客转化。

1、Container（容器）

Container（容器）是Generateblocks的基础区块，把内容按行和列组织好放进去。

在“容器”块中，你可以在容器块中调整填充，边距，颜色，容器宽度等。

使用容器块和网格块构建站点会有助于设计更加美观。你可以使用排版，间距，颜色，渐变，背景之类的内置功能来控制容器块。

2、Grid（网格）

网格是 GenerateBlocks中最重要的块，你可以单独使用网格，也可以与 Container块一起使用，老魏建议把网格包装在容器中。

网格块灵活的特性可以设计出很多美观的布局。比如可用于设计价格表、创建推荐区、订阅框以及更多其他设计。

3、Headline（标题）

Headline Block 与 古登堡编辑器中的Heading Common Block相似，但是它内置了许多组件，能够把标题和段落的设计、美观度提高到更高层次。

你可以选择段落和标题标签（h1，h2，h3，h4，h5，h6），用标题栏中的元素设计标题，也可以使用图标设置标题。

此外，您可以使用“字体排版”组件选择自定义字体，字体粗细，大小，并在“标题”块中选择颜色，调整间距等。

还有使用“高级”组件设置“元素ID”，“ CSS类”等。

4、Buttons（按钮）

使用按钮你可以创建在Call To Action中使用的功能按钮。还可以创建登录，注册按钮，社交媒体按钮，并在每个按钮中添加图标。

在同一行中设置多个按钮或垂直堆叠。

使用其他组件（如字体，间距，颜色，渐变等）来美化按钮。

Generateblocks组件

Generateblocks还提供众多组件供使用。

• Typography字体组件：对文本进行各种设置，启用高级字体并选择Google字体，也可以在本地托管Google字体并选择本地字体。选择字体大小，后备字体系列等。更文本更美观漂亮。
• Spacing间距：在此组件中为 GenerateBlocks中的4个块设置间距。可以调整填充，边距，边框大小，边框半径等，调整设计参数。
• Colors颜色：为容器，网格，标题和按钮设置颜色。设置边框颜色，链接颜色悬停，文本颜色等。
• Background Gradient背景及渐变：把“渐变”组件添加到块中。启用“渐变”选项并设置渐变的方向，设置颜色和两种颜色的停止位置。在“容器”，“网格”和“按钮”中使用“渐变”组件。
• Background Image背景图片：在容器或网格块中使用背景图片。除了JPG，PNG扩展名之外，还可以把SVG图像设置为背景图像。出于安全考虑WordPress不允许上传SVG扩展名。需要额外安装SVG插件才能启用SVG上传。
• SVG icon SVG图标：在“按钮和标题”块中设置SVG图标，从“常规图标”或“社交图标”面板中选择图标。

轻量级GenerateBlocks怎么样

正如本文开头提到的 Google对速度的要求，GenerateBlocks主要重心在于速度、性能。插件在每个页面中仅添加一个CSS文件，没有内联CSS代码，也没有使用JavaScript，并且该插件生成的HTML极少，这使得GenerateBlocks比较轻量级且超级快速。

GenerateBlocks速度测试结果极快，在GTMetrix测试网站首页得分非常好。如下图所示是某个使用 GeneratePress主题+GeneratePress Pro插件+GenerateBlocks插件的网站得分，在 Google眼中这样得分的网站是很棒的，起码在速度这一块可以给予不错的考虑。

GenerateBlocks的使用比较简单，后期老魏会在网站中安装并使用 GenerateBlocks构建网站、设计布局，来体验GenerateBlocks页面编辑器的强大功能，并分享在魏艾斯笔记的 GeneratePress专题中。