简介
本节课将演示如何仅用区块模式构建完整页面。区块模式是预设计区块的集合,可插入页面/文章后自定义内容。使用区块模式能快速创建结合多种区块的精美布局,既节省时间又能激发创意。
添加与选择模式
添加主题自带模式:点击左上角插入器→选择”模式”,按分类浏览时右侧会显示预览。若未找到所需模式,可访问WordPress.org→点击”扩展”→选择”模式库”进入目录。建议浏览所有模式并收藏心仪的(点击星星图标),之后在”收藏”标签即可快速查看符合设计需求的模式。
示例页面
展示一个为马术学校用模式构建的”服务”页面:顶部是介绍和服务列表,下方是各服务的独立版块(骑术课程价目表、马背旅行、生日派对、假期课程)。下面演示如何仅用模式实现。
规划阶段
1. 在工作文档规划页面结构
2. 浏览所有收藏的模式
3. 将模式URL复制到对应版块下方
完成基础工作后,即可逐个打开模式进行搭建。
构建页面
复制模式→粘贴到网站→用快捷键(command+V)依次添加所有模式→开始编辑。首先替换首节图片(媒体库已提前上传),修改右侧内容:更新标题、调整按钮背景色、将顶部文本改为段落并修改措辞与颜色。
服务列表版块:
1. 将群组区块设为全宽
2. 左右边距设为60像素(与上下同)
3. 背景色改为第三色调
4. 添加服务项目:骑术课程/马背旅行/生日派对/假期课程
骑术课程版块:
1. 列区块设为全宽
2. 边距滑块调至4
3. 替换图片/重置顶部文字字号/改为”初级到高级”
4. 修改章节标题为”骑术课程”并取消加粗
5. 重置占位文字字号/添加更多内容
6. 复制之前按钮样式/修改行动号召文本为”立即预约”
价目表:
1. 群组区块设为全宽
2. 背景色第三调/边框半径0像素
3. 修改标题为二级标题”价格”
4. 删除下方文本/填充实际内容
马背旅行版块:
1. 更新左列内容
2. 删除底部图片/替换内容旁的两张图
3. 列区块边距设为4
生日派对版块:
1. 替换图片后列区块设为全宽
2. 边距调至4
3. 删除右列内容→添加新标题/占位文本/行动号召
4. 列区块背景色改为第三调
最终版块(假期课程):
1. 列区块设为宽宽度
2. 删除右列内容→添加新标题/内容/行动号召
3. 替换所有四张图片
4. 为所有图片添加替代文本
5. 检查内容/标题/样式/移动端适配
实践练习
使用WordPress Playground测试:
1. 访问区块模式目录(链接)
2. 选择任意两个模式粘贴到页面
3. 调整模式符合设计目标
4. 用全局样式修改颜色与排版设置