在上期文章中,我们讨论了WordPress默认主题与Gutenberg(古腾堡)编辑器的页眉设置。本期内容将带你了解如何通过Gutenberg快速排版首页。如果你觉得逐一添加模块(如标题、文本、按钮、图片等)太过繁琐,那么本篇将教你如何借助Gutenberg中的Patterns来快速布局,简化设计过程。无论你是个人博客站点,还是电商网站,都能找到合适的排版方式,瞬间让你的网站焕然一新!
![图片[1]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091007374990.png)
如果我们不像一个一个的去加单独的模块,比如标题,文本,按钮,图片等等,还要考虑添加容器再去布局(如上图)
![图片[2]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091007422114.png)
上腿就是经常用到的一些容器
Columns:就是一行多少列的布局
Group:其实和上面差不多,但他是一分为几的那种布局,大家可以看实际情况来
Row:就是横向排列添加
Stack:就是竖向排列添加
Grid:就是网格
都很好理解的,大家可以实操添加试试,这样能更好理解
那么我不想这么麻烦怎快速添加呢
![图片[3]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091007482932.png)
如上图,我们找到Patterns(模式)这里有多的模版
![图片[4]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091007551220.png)
找到一个合适的模版,拖拽到右边的首页,然后你就可以去替换文字以及按钮和图片了,如下图
![图片[5]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091007561996.png)
效果是不是很快,焕然一新
![图片[6]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091007581631.png)
如果我们要加入图集,可以选择Gallery,右边选择一个适合你的,模式也就是模块,直接拖拽就行了
像其他的大家根据翻译和你需要的实际效果加入就行了
如果你是一个做电商网站
然后需要安装WooCommerce插件的吗,那你的模式Patterns(模式)会有一个WooCommerce单独的模式,如下图。他会根据网站自动匹配很多的模式,你选择你需要的
![图片[7]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008022735.png)
然后选择一个拖拽到右边的首页,如下图
![图片[8]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008041986.png)
然后设置好这个模块的布局以及大小还有背景啊等等
![图片[9]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008064019.png)
当然你可以手动设置商品展示,如下图
![图片[10]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008095664.png)
然后拖拽到首页后,再去设置布局,以及要展示什么内容,以及按分类来筛选,都在右边的设置区(如下图)
![图片[11]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008131749.png)
好了,到这里你就基本就能快速排版首页了,如果不知道古腾堡(Gutenberg)Block块怎么设置,可以查看之前的文章
这里再讲述一个知识点
如果你是之前使用其他主题的,但你想要之前主题的模版内容
![图片[12]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008265027.png)
![图片[13]-快速排版首页的Gutenberg(古腾堡)模块与Patterns模式指南(05)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091008260567.png)
你可以在这里找到
summarize
通过本文,你已经了解了如何在Gutenberg编辑器中使用Patterns快速排版首页。无论是图片集展示,还是电商网站的商品布局,都可以通过模式模块快速实现。如果你对Gutenberg Block(块)设置不熟悉,可以参考我们之前的文章获取更多详细教程。如果在排版过程中遇到问题,欢迎随时联系或在评论区留言,下一期我们会为大家带来更多关于默认主题与Gutenberg的使用技巧!
Link to this article:https://www.361sale.com/en/19309The article is copyrighted and must be reproduced with attribution.
No comments