WordPress divi主题

如何将实时 Ajax 搜索添加到您的 Divi 网站

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

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

特色插件现已在 Divi 市场上出售

Divi Ajax 搜索可在 Divi 市场中使用! 这意味着它已通过我们的审查,并符合我们的质量标准。 您可以访问市场中的 Divi Extended 以查看其所有可用产品。 从 Divi Marketplace 购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi)。

google广告开户

在 Divi 市场购买

Ajax 是向 Divi 添加实时搜索的好方法。 使用 Ajax,页面不必重新加载即可向用户显示搜索结果。 这可以让您的访问者更快地看到结果,这有助于他们在您的页面上停留更长时间。 结果是一个看起来更干净、功能更流畅的网站。

Ajax 搜索未内置在 Divi 中,但可以使用第三方插件轻松添加。 在本教程中,我们将了解如何将 Ajax 搜索添加到 Divi,并了解如何设置搜索样式以适合您网站的设计。

上教程。

抢先看

在我们开始之前,先来看看我们的 Ajax 搜索完成后的样子。 这是桌面视图。 我将向 WooCommerce 商店添加 Ajax 搜索。 我正在使用在线商店布局包中的显示页面。 我们还将设置搜索样式以匹配布局。 当然,由于这是一个测试站点,我在作弊并使用 WooCommerce 测试产品。 结果对任何产品都一样。

以下是相同设计在手机上的外观。

如何将实时 Ajax 搜索添加到您的 Divi 网站

订阅我们的 Youtube 频道

1. 安装 Divi Ajax 搜索

安装 Divi Ajax 搜索

WordPress divi主题

首先,从 Divi Marketplace 购买 Divi Ajax Search。 它通常是 29 美元,包括无限使用和一年的支持和更新。 Divi Ajax Search 可让您搜索页面、帖子、项目和 WooCommerce 产品。 它适用于这些帖子类型中的每一个。 它可以搜索标题、摘录和特色图像,并根据您的设置显示它们。

安装 Divi Ajax 搜索

要安装插件,请转到 插件 > 添新 并选择 上传插件.

安装 Divi Ajax 搜索

选择 选择文件 并导航到计算机上文件的位置并选择它。 点击 现在安装.

安装 Divi Ajax 搜索

安装插件后,选择 激活插件.

2. 将 Ajax 搜索添加到您的 Divi 网站

将 Ajax 搜索添加到您的 Divi 网站

这是原始布局。 它包括标题、与标题图像重叠的类别以及用于显示产品的 WooCommerce 模块。 我将在 shop 模块上方添加 Ajax 搜索功能。 我还将对其进行样式设置以匹配布局的元素。

将 Divi Ajax 搜索添加到布局

将 Divi Ajax 搜索添加到布局

fiverr建站WordPress程序员

点击商店模块下的图标,打开模块模态。 滚动到或搜索 迪维阿贾克斯搜索 并将其添加到布局中。 我正在展示线框视图,但任何视图都一样。

将 Divi Ajax 搜索添加到布局

将模块拖放到商店模块上方。

配置搜索框

配置搜索框

单击齿轮以打开选项。 我已切换到桌面视图,因此可以实时查看我的更改。

独立站选品工具

配置搜索框

首先,我们将调整占位符文本。 默认占位符文本使用“搜索”一词。 这很好,但我将其更改为 搜索我们的产品 所以用户知道他们正在搜索商店而不是博客文章或其他内容。 我会离开 订购方式, 命令, 和 无结果文本 在他们的默认值。

  • 占位符文本 – 搜索我们的产品
  • 搜索结果 – 10
  • 订购 – 日期
  • 顺序 – 描述
  • 无结果文本 – 未找到结果

决定在搜索结果中显示什么

决定在搜索结果中显示什么

在名为“搜索区域”的部分下,选择要搜索的内容。我将其保留为默认设置,包括标题、内容和摘录。

接下来,选择帖子类型。 您可以使用它来搜索帖子、页面、项目、产品或以上所有内容。 我正在选择产品。

高质量外链购买

搜索:

帖子类型:

选择要显示的内容

选择要显示的内容

向下滚动到显示区域以选择结果的显示方式。 我保留搜索图标、标题、摘录和特色图片的默认设置。 我还启用了产品价格,将列数更改为 4,并选择使用砌体。 这会给我我想要的布局。

显示搜索图标:

JasperAI 10000字免费额度试用

显示字段:

  • 标题
  • 摘抄
  • 特色图片
  • 产品价格

列数:

使用砌体:

显示滚动条

显示滚动条

转到滚动条设置并决定显示或隐藏滚动条。 我包括滚动条,以便用户更好地意识到他们可以滚动。

WordPress备份工具updrafplus

滚动条:

Divi Ajax 搜索结果

Divi Ajax 搜索结果

输入搜索词会在搜索字段下显示结果。 这看起来很棒,但它并没有从网站的内容中脱颖而出。 我们将对其进行样式设置,使其适合网站的设计,并且不会与产品图像混合。

3. 设置适合您网站的模块样式

设置适合您网站的模块样式

为了设置搜索框的样式,我将使用我正在使用的布局中的设计元素。 在线商店布局的商店页面底部是几个设计元素。 一个是有趣的电子邮件选择模块。 我将以此为背景和领域的灵感。 我还将使用 Shop Now CTA 的背景颜色作为搜索结果。 我特别关注三个设计元素:

  • 通讯背景颜色 – #757d79
  • 商店 CTA 背景颜色 – #dcae83
  • 两者的填充 – 50px(顶部,底部),60px(右,左)

样式化搜索字段

样式化搜索字段

在内容选项卡中打开背景设置。 本节有三个不同的背景区域。 去最后一个。 它只是称为背景。 在这里输入颜色。

  • 背景颜色 – #757d79

样式化搜索字段

在“设计”选项卡中,转到“间距”设置并输入填充。 这将让我们看到场地周围的区域,以便我们可以更好地看到结果。 这也使搜索框周围有很多颜色,这将与布局中的元素相匹配。

  • 内边距 50px(上、下)、60px(右、左)

样式化搜索字段

在搜索字段设置中,添加字段背景颜色和字段文本颜色。 我使该字段与模块的背景相匹配,并为文本选择了白色。

  • 字段背景颜色 – #757d79
  • 字段文本颜色 – #ffffff

样式化搜索字段

在相同的设置中,向下滚动到 字段边框颜色 并选择白色。 我们还可以调整边框的粗细和半径。 我将让它保持正方形以匹配 optin 模块的文本字段。

  • 字段边框颜色 – #ffffff

样式化搜索字段

打开搜索图标的设置并选择白色。

  • 搜索图标颜色 – #ffffff

样式化搜索字段

打开 Loader 的设置并选择白色作为 装载机颜色. 加载器只会暂时显示,但如果它与其余元素匹配,它会更好看。

样式化结果字段

样式化结果字段

打开内容选项卡中的背景设置并将颜色添加到 搜索结果框 搜索结果项目 背景。 当我们为模块设置样式时,这将不可见,因为它仅在显示搜索结果时显示。

  • 背景颜色 – #dcae83

样式化结果字段

在“设计”选项卡中,打开 搜索结果项目文本. 在“标题”选项卡中,选择全大写字体样式并选择白色作为文本颜色。 我将所有其他标题设置保留为默认设置。

  • 标题字体样式 – TT
  • 标题文本颜色 – #ffffff

样式化结果字段

打开摘录选项卡并选择白色作为 摘录文本颜色.

  • 摘录文本颜色 – #ffffff

样式化结果字段

打开价格标签。 为价格权重选择半粗体,为文本颜色选择白色。

  • 价格字体粗细 – 半粗体
  • 摘录文本颜色 – #ffffff

结果

下面是 Ajax 搜索在桌面上的外观以及我的样式。 搜索结果几乎立即显示。 它看起来优雅而光滑。

这是它在电话上的外观。 结果堆叠并调整以适合屏幕。

结束的想法

使用 Divi Ajax 搜索插件可以快速轻松地将 Ajax 搜索添加到您的 Divi 网站。 它易于使用,易于设计以匹配您的网站,并且结果快速且看起来很棒。 对于它可以搜索的帖子类型以及它将在结果中显示的内容类型,您有很多选项。

现在您的 Divi 网站可以拥有专业设计的 Ajax 搜索功能,您的访问者会喜欢的!

我们希望收到你的来信。 您是否在 Divi 网站上添加了实时 Ajax 搜索? 请在评论中告诉我们您的体验。

特色图片来自 Kroster / shutterstock.com