4.9
(19)

本文分享一个页面构建器的扩展插件,那么之前我们给大家去讲解了很多的关于elementor的页面构建器,那么这一节课我们要给大家分享的是古腾堡Gutenberg的页面构建器,现在wordpress的最新版本,不管你是去创建页面或者是去创建一个产品,那么我们看到的效果默认使用的就是我们现在看到的古腾堡Gutenberg的这样的一个页面编辑器,古腾堡的页面构建器实际上是wordpress官方所给我们集成的一个页面构建器,只是我们之前很多时候习惯于使用艾里蒙特,所以往往忽略于古腾堡的页面构建器的强大。

实际上古腾堡页面构建器,它也是能够完成我们制作独立站的很多的需求的。只要我们一说页面构建器,实际上来说它就是把我们在网页当中经常用到的,比如说文本段落,或者是我们的标题、图片、轮播图等等,这些把它集成为一个模块儿。

例如我们现在看到的,这个其实是古腾堡自带的一些模块,如果我们想去创建一个段落,直接把 p标签直接拖拽进来,那么我们在右边看到的就是它的显示效果,如果我们想添加一个标题,同样的它也是一个模块,例如我们加一个list,或者是加上一段代码,或者是我们去加手风琴表格等等,实际上古城堡里面也是非常全面的,除了这些基础的模块之外,当然也有一些非常高级的功能,例如我们可以去调用我们的文章列表,也可以去调用我们的产品列表,里面还有很多的一些模块儿,包括我们的产品模块儿,还有我们的头像等等。

另外古腾堡也有第三方的一些集成模块儿,例如我们想去插入一些推特的推文或者是油管的一些视频,那么这些都是支持的。所以如果你能够熟练的去使用古腾堡页面构建器,也是完全可以完成我们独立站页面的制作的。

古腾堡除了给我们添加一些模块之外,另外它也给我们集成了一些特效,就是把这些blocks这些模块儿集成一些区域,然后我们直接可以去插入调用,例如我们可以看到这里有一个那么你也可以去添加这种效果,然后做出来一些非常绚丽的带有背景图片的 banner,包括我们的头部底部,还有我们的图片集,它都是有一些固定的模块儿的,这些模块儿你也可以直接去使用。

然后另外它的媒体里面它也提供了很多的风格儿,比如说我们的图片风格儿等等。

另外古登堡这些默认的模块儿,它也会有一些样式的编辑,比如说我们现在去添加一个标题,我们看到这个标题已经添加进来了,然后在右侧我们就可以看到这个模块的一些编辑,比如说我们可以去修改它的颜色,或者是去修改它的背景,并且我们可以看到这些颜色除了一个单调的单色之外,也有一个渐变色,例如我们现在给它添加一个渐变色,也是非常好看的,并且渐变的角度也是可以去调整的,包括线性的星形的都是可以去调整。

如果你给这个标题加了一个超链接,那么我们也可以去设置我们超链接的颜色,包括悬停颜色,然后是字体的大小,然后字体的风格我们都可以去调整。另外就是我们字体第一个字母是不是要大写,下面还可以为我们这个模块去添加外边距内边距,比如我们加外边距,这是上下的,然后这是左右的,都是可以调整的,非常的方便,如果想加内边距,那么就选择padding就可以了。

然后下面还有一个高级的设置,高级的设置我们可以针对这个模块儿给它添加一个名字,也可以给它添加一个CSS样式,然后 CSS样式你可以写入到自定义里面。

所以默认的古腾堡页面编辑器其实也是非常强大的,那么在这个位置我们选中这个模块以后,我们也可以进行copy,然后在这个模块的上面和下面,我们也可以去添加一些模块,我们也可以去copy它的样式,复制它的样式。

下面我们也可以给它添加一个小组,更强大的是我们可以把这个模块直接进行锁定,这样的话你就没办法去修改这个模块了。另外我们也可以去编辑html代码,因为我们点击编辑,我们就可以看到这个模块的html代码非常的清晰,然后在左上角我们可以看到这里有个加号,这个加号就是你重新回到这个模块页面,你可以再去添加其他的模块。

然后第二个就是我们去切换我们的选项,就像我们的photoshop一样,例如我们现在把它切换到拖拽模块儿,那么我们就可以拖拽这个模块儿,把它调换成它的位置。然后另外我们就是把它切换成编辑,我们在这里就可以去修改这里面的内容,它是直接可以进行修改的,所以非常的方便。

另外我们可以针对这些字体进行加粗或者是倾斜,或者是给它加超链接。然后另外我们也可以给它添加一些其他的,例如我们可以加上一些代码,或者是给它插入一个图片等等,所以默认的古腾堡的页面构建器也是非常强大的。然后在左上角另外两个就是我们看到第一个是撤销,我们也可以按照键盘上面的CTRL+Z也可以去撤销。

然后第二个恢复我们的修改,然后后面这一个就是我们的导航,在这里我们可以看到我们的两个模块,然后你可以把这两个模块进行拖拽,改变它的位置等等。

这就是默认的古腾堡的界面,这里的古腾堡和我们之前使用到的艾里蒙特页面构建器,它的地位是相同的,但是不同的是古腾堡是wordpress官方所开发的模块儿,它是集成于我们的wordpress程序的,所以使用古腾堡设计出来的页面,当然要比elementor更快,这个是毫无疑问的。

但是我们也看到古腾堡它是有一些缺陷的,比如说我们现在打开左侧的模块儿,那么在这个模块当中我们发现它缺少了一些内容,比如说我们针对不同的设备,然后去调整不同的样式等等这样的模块,或者是我们想添加一些自定义的样式,默认的古城堡它都是不支持的,它只能做一些简单的修改。

所以这个时候我们就像elementor一样,在它默认的模块的基础上,我们需要去做一些扩展,而这一节课我们要给大家分享的stackable,它其实就是古腾堡页面构建器的一个扩展插件,它可以在古腾堡的基础上去添加一些模块,而这些模块儿它可以协助我们针对不同的设备,或者是添加一些更高级的模块儿。

我们现在可以看一下它的特色,在特色里面我们可以找到Blocks,例如我们可以看到这里面有一些高级图片,或者是一些手风琴,或者是一些高级的标题,甚至是一些按钮,这些模块其实和我们使用艾里蒙特的页面构建器是类似的。

例如我们现在打开手风琴,我们看到下面就是它的演示,这种效果使用默认的古城堡,它就没办法去添加,添加出来的效果就不是很好看,所以这个时候我们就需要使用到这样的页面构建器的扩展插件。

这个插件在桌面上我们已经准备好了,并且已经给大家提供了一个汉化包。

所以如果你是搭建中文的站点,也可以直接对这个插件进行汉化,下面我们就直接使用我们前面给大家去安装的一个主题叫blocksy,因为这个blocksy我们之前已经给大家去测试过了,虽然它号称也是兼容elementor的,但是如果你使用elementor,你会发现有很多的页面它是不兼容的,而这个主题的最佳搭档实际上是古腾堡,而在古腾堡的基础上,我们可以去添加一个stackable,这样的古腾堡的页面构建器的扩展插件,然而从而实现可视化的页面编辑。

如果你使用的是blocksy这个主题,它默认使用的是免费版本的stackable,我们这里给大家提供的是一个PRO版本的,所以我们直接去安装PRO版本的就可以了,所以我们找到我们的插件,点击安装,然后上传我们的插件,在桌面上找到我们已经准备好的 PRO版本,然后点击打开安装。

插件安装成功以后,我们激活一下 stackable的古城堡的页面构建器,扩展插件,它不需要去安装免费版本,如果你有PRO版本直接去安装PRO版本就可以了。

我们这里就直接安装的PRO版本好,安装成功以后我们就可以看到这样的界面,这里面它也会有一些视频教程,包括一些文档,包括一些社区的分享等等,我们可以简单的去了解一下。

声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。