分类： 开始使用WordPress

简介

是时候让你的 WordPress 设置个性化，以满足你和网站的需求了。在本教程中，我们将配置 WordPress 网站的常规设置，从博客标题到电子邮件地址，甚至网站语言。让我们从 WordPress 仪表盘开始。我将点击左侧的“设置”。当你悬停时，会看到以下选项：常规、撰写、阅读、讨论、媒体、固定链接和隐私。我们将在单独的教程中逐一介绍这些内容。

网站标题和副标题

首先，进入常规设置。在顶部，你会看到网站标题和副标题。你可能在安装 WordPress 时已经设置过这些，但如果没有设置或想重命名，可以在这里操作。我将保留我的名称为“我的美食博客”，但我会将副标题改为“Roxie 的最爱美食和食谱”。一个小建议是使用描述性名称，这样搜索引擎能正确显示你的网站。现在，你可以看到我的网站标题和副标题显示在左上角。

URL 设置

好了，我们继续看 URL 设置。这一点非常重要。你的网站 URL 设置，无论是 WordPress 地址还是站点地址，通常会在安装时自动配置好，并且很少需要在此区域更改。在这里更改 URL 设置可能会导致网站前端或后端无法访问，并且需要访问数据库才能恢复或修复这些项目。作为初学者，你可能只在需要实施 SSL 证书时才会用到这个设置。

电子邮件地址

好的，接下来是电子邮件地址。你可以在这里将电子邮件更改为与安装 WordPress 时不同的地址。所有管理员和密码重置邮件都会发送到这个地址，所以请确保它是有效的。

会员资格

接下来，我们来看会员资格。使用 WordPress，你可以选择允许任何人注册你的网站。如果选择此选项，你会看到新用户的默认角色是“订阅者”，因此新用户对仪表盘的访问权限有限。你可以更改这个设置，但我建议保留订阅者级别。注册后，你随时可以更新用户角色，赋予他们更多访问权限和功能。

网站语言

我将向下滚动到网站语言，从下拉列表中选择我偏好的语言。我会确认选择英语。确保选择正确的语言非常重要，因为它能帮助浏览器和翻译系统检测网站的首选语言。

时区和日期格式

好的，太棒了。接下来是时区。选择你偏好的时区所在城市，或者你也可以选择与协调世界时的偏移量，哪个方便就用哪个。你会看到我选择了纽约。现在，我向下设置日期格式。这个日期格式会显示在网站前端，与任何文章元数据（如作者、日期和时间）一起出现，比如在新博客文章中。我可以用同样的方式设置时间格式，还可以选择不同选项并在预览中查看效果。所以，如果我们访问我的美食博客，你会看到日期格式显示在文章下方，而日期和时间显示在评论下方。因此，请确保选择一种与你的主题搭配良好的格式。选择完成后，我将进入最后一部分，选择日历小工具从哪一天开始。你会看到所有选项，但我保留为星期日。完成后，我会保存更改。

结论

干得好！你已经根据自己和网站的需求个性化设置了这些常规设置。

简介

您是否知道 WordPress 提供了网站健康诊断功能？在本节中，我们将探讨如何确保您的网站处于最佳状态。网站健康小工具可以在仪表盘中找到，或者您也可以前往“工具”并点击“网站健康”。正如您所见，我的网站健康状况需要改善。

状态和信息选项卡

网站健康页面有两个选项卡：状态和信息。状态选项卡让您查看有关 WordPress 配置的关键信息以及任何需要您关注的事项。信息选项卡则提供了您 WordPress 网站技术细节的详细视图。您可以查看网站各个方面的详细信息，例如主题、插件和服务器设置。还有一个有用的导出功能，允许您将网站的所有信息复制到剪贴板。

关键问题

当我们返回状态选项卡时，您会注意到两个主要类别是安全或性能相关问题。关键问题指的是您网站中可能存在安全漏洞或严重性能问题的部分。我目前遇到的关键问题是，我的网站运行着过时版本的 PHP。由于 PHP 版本由您的主机公司在服务器级别设置，更新需要您前往主机控制面板更改设置，或者如果无法操作，请他们代为处理。在更新 WordPress 或您使用的 PHP 版本之前，请备份您的网站。您可能遇到的其他关键问题包括缺少一个或多个必需的模块、有待更新的插件、网站无法完成循环请求等。当您打开折叠面板时，您将了解更多关于解决特定问题的步骤。

推荐改进

接下来，我们可以讨论推荐改进。此部分列出了所有对您的网站并非关键，但为了更好的安全性和性能而应修改的项目。就我而言，我应该首先更新我正在使用的 WordPress 版本，然后删除任何未激活的插件和主题。要更新 WordPress，您可以点击页面顶部的“请立即更新”，这将带您进入更新页面。现在，您只需点击“更新到新版本”，并记得备份您的数据库和文件。要删除未激活的主题，请导航到“外观”，打开未激活的主题，然后点击右下角的“删除”。接下来，我们处理未激活的插件。前往“插件”，这次我们可以使用批量选择选项，选择所有未激活的插件并同时删除它们。

让我们返回网站健康页面，因为还有一个推荐改进需要讨论。最后一项推荐改进建议我安装两个尚未安装的可选 PHP 模块。如果您的网络主机提供相应权限，您可以在 CPanel、Plesk 或类似软件中安装这些模块。但如果您的主机公司没有提供自行安装的方法，您可以联系他们并请他们代为安装。最后，“测试通过”部分列出了网站健康工具测试的其他所有项目，显示没有问题。

结论

在网站健康支持页面上了解更多关于此工具的信息。请记住，李·亨特曾说过：“所有幸福的基础是良好的健康。”

简介

今天，我们将学习如何将一个 WordPress 网站的数据导出并导入到另一个网站。换句话说，你可以使用导入和导出选项为你的 WordPress 内容寻找新家。如果你决定导出，网站的内容会被下载到一个 XML 文件中，然后你可以将其导入到另一个 WordPress 网站。

导出

如果你准备好导出，请导航到“工具”并点击“导出”。在下方，选择要导出的内容；你可以决定导出所有内容、仅文章、仅页面或仅媒体。让我们选择“所有内容”，然后点击“下载导出文件”。现在，我们可以继续将 XML 文件保存到我们的电脑上。

导入

这是一个全新的 WordPress 安装，没有文章、媒体或页面。我想将之前网站的 XML 文件导入到这个新网站。转到“工具”并点击“导入”。我们寻找底部的“WordPress 导入器”。让我们继续点击“立即安装”。安装成功后，我们可以点击“运行导入器”。接下来，我们可以选择从另一个网站导出的 XML 文件。点击“上传文件并导入”。要成功导入媒体，请记得选择“下载并导入文件附件”。请注意，媒体库中未嵌入到文章或页面中的未附加媒体将不会包含在 XML 导出文件中。现在，我们可以继续点击“提交”。

这可能需要几秒钟。现在我们可以去查看所有已导入的内容。让我们前往“文章”。这里是我们另一个网站的所有文章——所有媒体、所有页面以及所有文章评论。由于是相同的主题，我们可以前往“站点编辑器”。我们会注意到，导航菜单、模板以及页眉和页脚模板部分都已从另一个网站转移过来。

迁移插件

如果你要导入的网站与导出网站的主题不同，你首先需要在新网站上安装并激活原始主题。请注意，将内容转移到新网站不包括网站的设计、主题或插件。但是，你可以使用迁移插件来转移整个网站。

从其他平台导入内容

当你进入“导入”时，你会注意到还有其他系统可以从中导入文章或评论，例如 Blogger、Live Journal 甚至 Tumblr。还有一个选项或插件可以将现有分类转换为标签，反之亦然。

结论

我希望你使用导出和导入工具时感到更得心应手。

引言

在本课中，我们将讨论如何测试您的内容是否具有可访问性。如果您已经观看了本主题的第一课，那么您应该已经熟悉“可访问性”这个术语，并了解其重要性。让我们回顾一下。数字可访问性是一个广义术语，旨在确保尽可能多的人能够使用网络，无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业影响，但重要的是要记住，这些指南旨在为每个人提供更好的浏览体验。确保您的网站可访问的最简单方法是在设计和开发阶段就考虑这一点。然而，基于区块的主题提供了极大的灵活性，而能力越大，责任越大。幸运的是，许多技术性的可访问性问题通常可以通过自动化工具轻松检测和修复。例如，正确的标题层级、颜色对比度、有意义的替代文本、链接文本等。讽刺的是，这些正是网络上最常见的可访问性失败点。在本教程中，我们将重点扭转这一趋势，向您展示如何在发布前测试您创建的内容，并确保您的文章和页面是可用的。

WordPress 内置辅助工具

WordPress 在编辑器中包含两个内置的可访问性辅助工具。第一点：语义结构。点击“文档概览”，然后选择“大纲”，以检查您的标题是否按正确顺序排列。从 H2 开始，依次降序到 H6，不能跳过任何级别。WordPress 会用浅橙色标记错误的标题级别，并在您使用了不正确的标题级别时通知您。第二点：颜色对比度。如果您选择的文本和背景颜色组合未能提供足够的对比度，WordPress 会发出警告，提示这种颜色组合可能对读者来说难以辨认。尝试为背景和文本使用对比色，以增强可访问性。修复这些问题后，您的网站就已经比互联网上的大多数大型网站更好了。要修复颜色对比度，请选择相关区块（在本例中为按钮区块），然后在右侧的侧边栏设置中打开“样式”。接着，在“颜色”下方，我们可以更改背景颜色和文本颜色，以确保颜色对比度良好。

插件

接下来，让我们探索几个可访问性插件。WP Tota11y、Sa11y 和 Editoria11y 是彼此的不同变体。

WP Tota11y

WordPress Tota11y 是一个轻量级插件，可检查前端和编辑器中的常见可访问性合规性问题，通知您任何不正确的标题级别、颜色对比度、糟糕的链接文本、表单元素中缺失的标签以及图片中缺失的替代文本。该工具具有一个很酷的实验性功能，称为“屏幕阅读器魔杖”，可以像屏幕阅读器一样查看元素。您可以在每个类别中浏览警报并查看建议的修复方法，但建议在前端进行操作，因为在编辑器中可能会令人困惑，因为它会检查整个浏览器窗口。

Sa11y

第二点：Sa11y 在前端提供了一套全面的检查。您可以在“设置”下切换一些额外的检查，例如可读性、高级链接、颜色对比度和表单标签，您还可以在那里找到颜色滤镜，以测试您的页面在几种色盲类型的人看来是什么样子。虽然错误被清晰地标记出来，但描述较为笼统，修复方法也不够直接。Sa11y 允许管理员在其高级设置管理页面上定义和控制各种功能。

Editoria11y

Editora11y 专注于内容和结构。不会检查颜色对比度等设计元素。启用后，它会在前端和编辑器中显示警报，通知您关于文档大纲、标题级别、链接文本和目标（也称为“在新标签页中打开”）以及图片中缺失的替代文本。其目标是帮助作者和编辑发现常见问题，并用通俗语言描述失败点，建议修复方法，并允许用户在警报无关时隐藏或忽略它。Editora11y 还会生成报告，并允许管理员排除警报、跳过某些测试或基于 CSS 选择器包含元素。

Accessibility Checker

另外，还有流行的 Accessibility Checker，它在文章或页面编辑器窗口中添加了一个新部分，并在前端添加了一个悬停按钮。它显示错误的摘要、详细解释（包括相关代码片段）、可能的修复方法，以及忽略单个警报的选项。

操作系统应用和浏览器扩展

如果您想更进一步，测试更多技术方面，可以执行以下操作。第一，尝试仅使用键盘浏览您的网站。不要使用鼠标。使用 Tab 键在链接、按钮和表单字段之间导航，并按 Enter 或空格键激活页面上的这些交互元素。记录下需要修复的功能失效元素和缺失的视觉指示器。第二，您可以更改设备的配色方案，以确保在深色或高对比度模式下内容看起来正常且功能良好。

结论

总之，创建或维护内容的作者和内容管理者可以直接控制关键方面，如标题级别、文本大小、颜色对比、链接、图片替代文本等。换句话说，你无需接触代码就能避免生成不可访问的内容。只需保持用心和同理心。

引言

在本教程中，你将了解无障碍性：它是什么、为什么重要，以及无障碍网站如何惠及所有人。

首先，讲一下“是什么”。作为数字无障碍性的一个子集，网页无障碍性意味着构建所有人都能使用的网站，无论其能力如何。在最普遍、最直接的意义上，无障碍性保证了内容和服务的普遍和平等访问。

技术术语

在学习或实践无障碍性时，你会遇到一些技术术语。我们来澄清一下：

• A11Y 是“accessibility”一词的数字缩写，其中“11”代表字母“a”和“y”之间的字母数量。
• WCAG 是“网页内容无障碍指南”的缩写，这是一套由 W3C 制定的国际无障碍标准。
• WCAG 的基本原则被称为 POUR：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）和健壮性（Robust）：
  1. 可感知意味着传递信息的方式要让任何人都能理解。例如，为图像或视频等视听内容提供文本替代方案。
  2. 可操作指的是让人们能够使用界面并与网站进行交互。例如，支持键盘功能，而不仅仅是鼠标交互。
  3. 可理解确保人们能够理解信息并使用界面。例如，表单元素需要对应的标签来传达清晰的指示。
  4. 健壮性意味着随着技术的发展和演进，内容仍然保持可访问。例如，使用正确的标记来确保与当前和未来的浏览器及辅助技术的兼容性。

常见误解

所有这些听起来都很合理，但企业和网站开发者却常常以常见的误解为由而犹豫不决。是时候纠正这些错误观念了：

1. 无障碍性很难。是的，编码、写作和制作舒芙蕾也很难。尽管如此，人类几十年来甚至几个世纪以来都成功完成了这些任务。
2. 无障碍性 = 设计糟糕的网站。一个无障碍的网站可以像你的技能和项目要求所允许的那样美观。
3. 无障碍合规成本高昂。有时确实如此。这就是为什么应该从一开始就创建包容性体验。将其视为事后补救——比如在发布前用插件“解决”问题——总是更不明智且成本更高的做法。
4. 无障碍性是可选项。恰恰相反，它对网站的重要性不亚于客户的品牌形象、团队的编码标准或你语言的语法规则。你不会故意引入错误，那为什么要让东西变得不可访问呢？

更好的思考方式是将无障碍性视为“同理心”的代号。这样，它就变得难以忽视且易于采纳。它不仅仅是法律合规、商业责任和财务影响——它关乎基本人权。

统计数据

2006 年，联合国《残疾人权利公约》将获取信息和通信技术定义为一项基本人权。

根据 W3C 2018 年的报告，全球有超过 10 亿残疾人。

WebAIM 的最新报告发现，排名前百万的首页中有 95.9% 存在无障碍问题。检测到的错误中有 96.4% 属于以下六类：

自 1999 年 WCAG 1.0 发布以来的 25 年里，这六个问题一直困扰着网络。

为什么重要

无障碍性在许多国家不仅是法律要求，而且对商业也有好处。残疾人拥有巨大的消费能力。然而，绝大多数网站都忽略了他们的需求——以下演示有助于说明他们许多人需要克服的一些困难：

1. 在第一个示例中，我们将看到非视障用户（在最佳条件下）如何查看页面。设计包括非默认样式：小字体、无下划线链接以及不足的颜色对比。如果这对非视障人士来说都不易导航，那么对视障人士来说会有多困难呢？
2. 接下来的两个示例模拟了视力缺陷用户如何查看页面。第一个示例展示了低对比度、小字体和无下划线链接的影响。在第二个示例中，我们将看到有时屏幕可能完全模糊。
3. 在下一个示例中，我在一篇文章中添加了一个手风琴组件，然后用鼠标与之交互。接着，我禁用了浏览器中的 JavaScript（在 0:09 处），并尝试与之交互。如视频所示，没有 JavaScript 就无法使用。
4. 在最后一个例子中，我模拟了用户使用键盘浏览页面，通过 Tab 键向前移动，Shift + Tab 键向后移动。链接、搜索表单和 YouTube 视频在聚焦时都有正确的标记，但 “是/否”按钮却没有。当开发者/设计师改变交互元素（本例中为按钮）的默认样式，隐藏聚焦元素的视觉指示时，用户就无法判断它们是否处于激活状态。

关键在于，无障碍网站并非额外福利——它们对我们许多人来说是必不可少的。残疾的范围和人类本身一样多样，涵盖从身体到认知到心理的各个方面。从永久性失明到与年龄相关的视力障碍，从暂时性听力损失到注意力难以集中，从手腕骨折到癫痫，从阅读障碍到多动症，从色盲到多发性硬化症。

这意味着有大量的人无法填写表单、浏览网站、识别文本中的链接、辨别图像、收听播客和观看视频，或者将商品加入购物车。

结论

无障碍性，即使仅局限于网络领域，也是一个广泛且多层面的主题，不可能在几分钟内涵盖所有内容。我们鼓励你进一步学习——阅读、实验，并倡导变革。由于网络上超过三分之一的热门网站使用 WordPress，我们的社区在让网络更加无障碍方面发挥着关键作用。你不需要成为（认证的）无障碍专家。任何参与在线创作的人都可以做出改变。在下一课中，你将学习非技术用户如何在不接触一行代码的情况下提供帮助。

介绍

请和我一起探索媒体库以及整理所有媒体文件的方法。你可以向媒体库添加各种类型的媒体，包括照片、截图、音频、PDF文档、电子表格、PowerPoint演示文稿等。如果你的媒体库中有大量文件，管理这些媒体可能会开始感到杂乱无章或令人不知所措。你可能会问，难道没有办法对媒体进行分类吗？答案是有的，我们将使用一个插件来实现这个目标。

媒体库整理器

让我们前往插件页面，点击“安装新插件”。我在搜索框中输入“Media plugin organizer”，一两秒内，就可以从各种选项中进行选择。我将选择一个名为“Media Library Organizer”的开源插件。Media Library Organizer 不会替换媒体库的外观和感觉，而是会增强WordPress的用户界面，添加批量整理、搜索和筛选媒体所需的关键功能。插件目录中还有许多其他插件，例如 WordPress Real Media Library、FileBird 和 Wicked Folders。我们继续安装 Media Library Organizer 插件。请始终记得点击“启用”。

分类

当我返回媒体库时，你会看到左侧新增了一个名为“媒体分类”的侧边栏，并且有三个选项：添加、编辑和删除。由于我还没有创建任何分类，目前只能添加新的分类和子分类。我将创建一个新分类，命名为“旅行”。然后，点击“批量选择”，挑选合适的图片。完成后，我将它们拖放到新分类中。我想创建的第二个分类叫做“自然”，创建文件夹后，再次点击“批量选择”，选择所有要添加到这个分类的相关图片。选择完所有媒体后，我将它们拖入新分类“自然”中。我想创建的第三个分类叫做“生活方式”。

子分类

现在，我将点击分类来添加子分类。我右键点击鼠标，选择“添加子分类”，并命名我的子分类。第一个叫做“运动”，第二个是“食谱”。完成后，点击“批量选择”，选择运动图片，拖放到新分类中。最后，我想在“食谱”下再创建三个子分类。第一个分类是“素食”，第二个是“肉类”，最后一个是“早餐”。创建子分类后，我选择“批量选择”，将图片拖放到各自的分类中。先是早餐，然后是素食选项，最后是肉类菜肴。现在，你会看到所有图片都在各自的分类中。

结论

我们在这里看到的分类显示方式称为树状视图，用于轻松搜索、筛选和批量分类。如果点击“未分配”，你将能够查看所有尚未分类的图片或文件。如果你右键点击某个分类并选择删除，图片或文件只会回到未分配状态。正如你所见，使用媒体管理插件可以帮助你整理网站媒体，并让你感觉更有掌控力。

同步与非同步

在本课中，我们将学习区分、创建和管理同步与非同步模式。当您创建了一个想要保留并重复使用的特殊设计时，可以将其保存为模式，并指定是否同步。同步模式以前被称为可重用区块，对同步模式的更改将应用于您网站中添加了该模式的所有部分。正如我们在本例中所见，当我更新一个模式中的内容时，它会自动更新另一个模式，因为它们是同步的。

非同步模式只是普通的模式，可以独立编辑。它们可以重复使用和更改，而不会改变或影响原始模式。在本例中，我更改了一个非同步模式中的图片，由于模式未同步，原始模式中的图片没有发生变化。

创建自定义模式

例如，假设您找到或创建了一个特殊设计，并想将其保存为模式。选择容器区块，点击三个垂直点，然后选择创建模式。接着，我们可以为其命名并添加到相关类别中。然后，我们可以将其保存为同步或非同步模式。在本例中，我将保存为同步模式，然后点击创建。当您点击左上角的插入器，选择模式时，您会看到该模式已添加到“我的模式”区域，您可以在那里找到所有自定义模式。

站点编辑器

您也可以在站点编辑器中添加、编辑和管理自定义的同步与非同步模式。让我们前往外观，点击编辑器。这当然会将我们带到站点编辑器。如果我们进入模式，我们可以管理自定义模式、主题提供的模式，以及头部、底部和通用模板部分模式。如果我们进入“我的模式”，我们将看到所有已创建的自定义模式。

同步模式有一个紫色图标，而非同步模式只会显示名称。如果您想将主题附带的某个模式保存为同步或非同步模式，请导航到相关模式，点击三个垂直点，选择复制。然后，我们可以更新名称并保存为同步或非同步模式。在本例中，我将保存为非同步模式。然后，我们可以选择复制，当返回“我的模式”区域时，我们会看到该模式现在是我们可以随意修改和更新的自定义模式之一。

要创建自定义模式，请点击模式旁边的加号图标，选择创建模式。命名后，我们可以将其添加到相关类别。在本例中，我将保存为非同步模式，然后点击创建。然后，我们可以继续创建新模式。完成后，我们可以点击保存，当返回“我的模式”区域时，我们可以查看新的非同步模式。

添加模式

最后，让我们将这个自定义模式添加到我们的一个页面中。让我们前往页面，选择相关页面，在本例中是我的“关于”页面。然后，我将打开列表视图，确保将内容添加到文章内容区块中。要添加非同步模式，我将点击左上角的插入器，进入模式，点击“我的模式”，然后选择所需的非同步模式。

结论

祝您在创建和管理自己的自定义模板时一切顺利。

简介

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

添加和选择模式

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

示例页面

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

规划阶段

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

构建页面

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

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

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

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

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

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

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

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