WordPress divi主题

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

by | May 8, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

抢先看

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

Divi 搜索结果页面模板

Divi 搜索结果页面模板

Divi 搜索结果页面模板

免费下载模板

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

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

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

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

之后,您就可以出发了。

关于搜索结果页面

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

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

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

创建新模板

要开始,请转到 WordPress 仪表板并导航到 Divi > Theme Builder。 然后单击“添加新模板”区域。

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

fiverr建站WordPress程序员

选择从头开始构建布局。

Divi 搜索结果页面模板

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

页面结果模板的标题部分

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

Divi 搜索结果页面模板

分频器模块设计口音

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

独立站选品工具

Divi 搜索结果页面模板

更新分隔线样式如下:

  • 线条颜色:#3a405a
  • 线位置:底部
  • 分隔线重量:5px
  • Z指数:-1

Divi 搜索结果页面模板

带标题的文本模块

在 Divider Module 下,添加一个新的文本模块,其内容如下:


<h1>Search Results</h1>


Divi 搜索结果页面模板

高质量外链购买

更新文字设计如下:

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

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

搜索模块

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

JasperAI 10000字免费额度试用

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

WordPress备份工具updrafplus

然后按如下方式更新搜索设置:

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

Divi 搜索结果页面模板

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

行填充

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

Divi 搜索结果页面模板

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

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

创建新的部分和行

在顶部部分下,将新的常规部分添加到布局中。

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

将帖子/存档标题添加为动态内容

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

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

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

Post/Archive Title 元素以短语“Results for”开头,后跟括号中的搜索内容/查询。 以下是用户搜索“企业”一词时会显示的示例。

Divi 搜索结果页面模板

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

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

添加的动画将显示“云”分隔线样式下的搜索结果标题(稍后我们将添加它)。 因此,每次用户输入新的搜索查询时,标题都会下拉以产生炫酷的效果。

Divi 搜索结果页面模板

添加新行

在包含帖子/存档标题元素的文本模块下,创建一个新的单列行。

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

更新博客模块的内容设置,如下所示:

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

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

Divi 搜索结果页面模板

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

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

Divi 搜索结果页面模板

接下来,更新分页样式如下:

Divi 搜索结果页面模板

部分背景和分隔线

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

  • 背景颜色:#eeeeee
  • 顶部分隔线样式:见截图
  • 分隔线颜色:#ffffff
  • 分频器翻转:垂直
  • 分隔线排列:在章节内容之上
  • 内边距:100px 顶部

Divi 搜索结果页面模板

最后结果

这是在现场网站上搜索“业务”一词时页面模板的最终结果。

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

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

Divi 搜索结果页面模板

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题