如何在 Divi 中创建搜索结果页面模板

我们都已经习惯于使用搜索表单在网站上查找我们需要的内容。 因此，在 Divi 中创建网站时，我们确实需要考虑页面结果模板的设计，以驱动这些搜索结果的外观。

在本教程中，我们将介绍如何使用 Divi Theme Builder 构建一个简单而优雅的搜索结果页面模板。 我们将向您展示如何包含搜索结果页面模板的关键元素，包括动态页面结果标题和博客模块生成的相关搜索内容。

让我们开始吧。

抢先看

这是我们将要创建的搜索结果页面模板的快速浏览。

免费下载模板

要使用本教程中的搜索结果页面模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并使用 Theme Builder Portability 选项将 json 文件之一添加到 Divi Theme Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要安装并激活 Divi 主题。 确保您拥有最新版本的 Divi。

您还需要为测试目的创建一些帖子/页面，以便搜索结果页面实际显示结果。

之后，您就可以开始了。

关于搜索结果页面

在 Divi 中，搜索结果页面是用户在 Divi 的一种搜索表单中输入搜索查询后被重定向到的页面。 导致搜索结果页面的可能搜索查询包括默认 Divi 标题中的搜索表单、从 Divi Builder 中的搜索模块生成的搜索以及内置于 WordPress 的搜索小部件。

默认情况下，搜索结果页面将简单地显示在提要中搜索的页面或帖子，就像典型的博客页面一样。 但是使用 Divi，您可以使用 Divi Theme Builder 随意设计模板。

如何在 Divi 中创建搜索结果页面模板

创建新模板

首先，转到 WordPress 仪表板并导航到 Divi > Theme Builder。 然后单击“添加新模板”区域。

在模板设置下，分配模板搜索结果。

然后单击新模板的添加自定义正文区域并选择“构建自定义正文”。

选择从头开始构建布局。

使用模板布局编辑器设计搜索结果页面模板

页面结果模板的标题部分

在模板布局编辑器中，通过向默认部分添加一列行来开始模板的设计。 这是我们将为模板构建页面标题的地方。

分频器模块设计重点

然后插入一个分隔模块。 这将作为我们页面标题的设计重点。

更新分隔线样式如下：

• 线条颜色：#3a405a
• 线位置：底部
• 分隔线重量：5px
• Z-索引：-1

带标题的文本模块

在分隔模块下，添加一个新的文本模块，内容如下：

<h1>Search Results</h1>

更新文字设计如下：

• 背景颜色：#ffffff
• 文本对齐：居中
• 标题字体：Muli
• 标题字体粗细：重
• 标题文字颜色：#3a405a
• 标题文字大小：70 像素（桌面）、40 像素（平板电脑）、22 像素（手机）
• 标题行高度：80px
• 最大宽度：60%
• 模块对齐：居中
• 最小高度：80px

现在我们可以通过添加自定义边距将文本模块向上移动以与分隔线重叠。

• 边距：-75px

搜索模块

在带有标题的文本模块下，添加一个搜索模块。 这对于希望在登陆搜索结果页面后继续搜索您的博客/网站的用户很有帮助。

为表单添加输入占位符文本。

您还可以通过选择例外选项组下的选项，从搜索结果中排除某些页面、帖子和/或类别。 例如，如果您主要为博客创建搜索表单，您可能希望从搜索结果中排除页面，以便只显示博客文章。

然后更新搜索设置如下：

• 占位符颜色：#3a405a
• 字段背景颜色：#ffffff
• 字段字体：蒙特塞拉特
• 字段文本大小：20px
• 按钮和边框颜色：#3a405a
• 按钮字体：Muli
• 按钮字体粗细：粗体
• 按钮文字颜色：#ffffff
• 按钮文字大小：18px
• 宽度：100%
• 最大宽度：300px
• 模块对齐：居中
• 圆角：8px

这在很大程度上照顾了我们的标题部分。

行填充

在我们开始下一节之前，让我们取出行的底部填充。

• 填充：底部 0px

创建搜索结果模板的正文部分

现在我们准备添加模板的第二部分，其中将包含搜索结果存档标题和搜索结果内容。

创建新的节和行

在顶部部分下，向布局添加一个新的常规部分。

然后向该部分添加一列行。

添加帖子/档案标题作为动态内容

搜索结果页面将受益于显示用户输入的搜索查询的标题。 我们可以使用文本模块将其添加到页面并拉入帖子/存档标题动态内容元素。

首先，添加一个文本模块。

删除正文内容框内的虚拟文本，然后选择悬停在正文内容框上时显示的动态内容图标。 然后从列表中选择帖子/存档标题。

Post/Archive Title 元素以短语“Results for”开头，后跟括号中的搜索内容/查询。 下面是一个示例，说明如果用户搜索术语“业务”，将会显示什么。

接下来，更新文本模块的设计设置，如下所示：

• 文字字体：Muli
• 文字字体粗细：重
• 文字文字颜色：#d30c7b
• 文字文字大小：22px
• 文本对齐：居中
• 动画风格：幻灯片
• 动画方向：下
• 动画强度：250%

添加的动画将从“云”分隔样式下显示搜索结果标题（稍后我们将添加它）。 因此，每次用户输入新的搜索查询时，标题都会下拉以获得很酷的效果。

添加新行

在包含 post/archive title 元素的 Text 模块下，创建一个新的单列行。

将博客模块添加到该行。 这将显示搜索结果页面的实际帖子/内容。

更新博客模块的内容设置如下：

• 当前页面的帖子：是
• 帖子数：9
• 摘录长度：120
• 显示作者：NO

这里最重要的选项是当前页面的帖子。 这必须处于活动状态，搜索结果页面才能显示搜索的动态内容。

然后更新博客模块的设计如下：

• 布局：网格
• 标题字体：Muli
• 标题字体粗细：超粗
• 标题文字颜色：#3a405a
• 标题文字大小：24px
• 标题行高度：1.3em
• 正文字体：蒙特塞拉特
• 正文颜色：#3a405a
• 网格布局圆角：10px
• 网格布局边框宽度：0px
• 框阴影：显示屏幕截图
• 框阴影垂直位置：0px
• 框阴影模糊强度 15px
• 框阴影扩散强度：-5px

接下来，更新分页样式如下：

部分背景和分隔线

作为设计的最后一步，更新部分设置如下：

• 背景颜色：#eeeeee
• 顶部分隔线样式：见截图
• 分隔线颜色：#ffffff
• 分隔线翻转：垂直
• 分隔线安排：在部分内容的顶部
• 填充：100px 顶部

最后结果

这是在实时站点上搜索术语“业务”时页面模板的最终结果。

这是平板电脑和手机上的设计。

这是在搜索结果页面上使用搜索表单进行添加查询时搜索结果标题动画的示例。

最后的想法

搜索结果页面对于用户来说是一个有用的工具，因此给予它应有的关注是个好主意。 使用 Divi，您可以在设计模板时使用 Divi Visual Builder 创建包含所有必要动态元素的搜索结果模板。 无需代码知识。 我希望这会给您一些灵感，为您自己的博客或网站创建自定义搜索结果页面模板。

我期待在评论中收到您的来信。

干杯!