仅用模式构建页面


简介

在本课中,我将向你展示如何仅使用模式来构建整个页面。块模式是一组预先设计好的块,你可以将它们插入到页面和文章中,然后用自己的内容进行自定义。使用块模式是一种简单的方法,可以创建结合不同块的美观布局。模式不仅能节省你的时间,还能激发创意。

添加和选择模式

要添加主题自带的模式,请点击左上角的插入器,然后进入“模式”。接着,你可以按类别浏览模式,并在右侧查看预览。如果找不到你需要的模式,可以前往模式目录,方法是访问 WordPress.org,点击“扩展”,然后选择“模式”。我建议你浏览所有模式,并点赞那些吸引你的。一旦你点击星标,该模式就会成为你收藏模式列表的一部分;当你进入“收藏”时,就能看到所有符合你设计需求的模式。

示例页面

让我展示一个我为马术学校使用模式创建的服务页面。在顶部,我们有一个介绍、服务列表,然后是为每项服务单独设置的部分。首先,我们有骑马课程及价格列表,接着是骑马远足、生日派对和假期项目。让我们看看如何仅使用模式来实现这一点。

规划阶段

首先,我在工作文档中规划了我的页面。然后,我浏览了所有标记为收藏的模式。接着,我复制了模式的 URL,并将其粘贴到相关部分的下方。现在基础工作已经完成,我们可以逐一打开每个模式。

构建页面

然后,我们将复制模式,复制后,前往我们的网站并粘贴第一个模式。接着,我们可以复制并粘贴服务模式,然后依次向下操作。我实际上只是使用电脑快捷键粘贴命令 V。现在,我已经将所有模式添加到页面中,我们可以开始编辑了。所以,如你所见,我们现在有了页面结构。

让我们从第一部分开始,替换相关图片。如你所见,我已经将所有图片添加到媒体库中。然后,我们可以开始更改右侧的内容。我将更新标题。我还想更改按钮块或行动号召的背景颜色。顶部的文本不是标题,所以我会将其改为段落。然后,我们更改措辞以及文本颜色。这样,第一部分就完成了。

对于服务部分,我将把组块改为全宽,并将左右内边距改为 60 像素,与顶部和底部相同。然后,将背景颜色改为第三色,接着添加我们提供的服务:骑马课程、骑马远足、生日派对和假期项目。

对于下一部分,我将把列块改为全宽,然后将滑块上的内边距改为 4。我会替换图片,重置顶部文本的字体大小,并写上“从初学者到高级”。然后,将部分标题改为“骑马课程”,并取消加粗。我还会重置占位文本的字体大小,并为该部分添加更多文本。最后,我会复制之前按钮块或行动号召的样式,并将该按钮块的样式粘贴到另一个上。然后,将行动号召改为“立即预订”,这样就完成了。

对于价格表,我将为组块选择全宽,然后将背景颜色改为第三色,并将块的圆角半径改为 0 像素。然后,修改标题,确保它是标题 2,并写上“价格”。接着,我们可以删除下面的文本,并开始向表格中添加内容。现在,我们的价格表准备好了。

对于骑马远足部分,我将更新左列的内容,删除底部的图片,并替换内容旁边的两张图片。最后,将列块的内边距改为 4。这样,这部分也完成了。

接下来是生日部分。替换图片后,我将选择列块并将其改为全宽。然后,使用滑块将内边距改为 4。接着,删除右列的内容,并用标题、占位内容和行动号召进行更新。最后,将列块的背景颜色改为第三色。

在最后一部分,我将把列块调整为宽幅,删除右列的内容,添加新的标题、内容和行动号召按钮,最后替换图片。替换完所有四张图片后,我的服务页面就完成了。最后,我会为所有图片添加替代文本,检查内容、标题和样式,并确保我的页面或网站对移动设备响应友好。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注