WordPress divi主题

如何在 Divi 的二级菜单中添加搜索字段

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

如果没有搜索字段,您网站的导航将会受到影响。 您可以在互联网上获得最强大的浏览体验,但如果您的用户无法搜索以找到他们正在寻找的确切内容,您可能(并且可能会)失去业务。 本教程将引导您向 Divi 的二级菜单添加一个搜索字段,这样无论如何,您的用户将始终只需点击几下即可获得所需的一切。

google广告开户

Divi 搜索字段预览

桌面

桌面版的 divi 搜索栏

移动的

移动版的 divi 搜索栏

上传和/或编辑全局标题

对于本文,我们将使用杂货配送布局包附带的免费页眉/页脚。 您可以简单地下载 。压缩 归档并提取所需的 .json 文件到您的计算机。

json文件

之后,进入您的 WordPress 仪表板并导航到 Divi – 主题生成器. 从那里,您需要单击 上下箭头图标 打开便携性选项。

divi 搜索字段的主题生成器

在新模式中,单击 进口 选项卡并找到 .json 您下载的文件。 准备好后,选择 导入 Divi 主题生成器模板 开始上传。

导入文件

此时,您已准备好进入 全局标题 的部分 默认网站模板. 导入 .json 文件应该自动应用免费赠品作为网站的全局标题。

WordPress divi主题

全局标头

将搜索字段添加到辅助菜单栏

使用 Divi Visual Builder,您应该会看到与此类似的内容作为全局标题。

全局标题编辑器

我们要做的第一件事是为搜索字段腾出空间。 我们希望确保所有访问者都可以轻松使用搜索字段,因此我们要将其添加到二级菜单(在 主页/联系方式 排)。

首先,我们将使用 Divi 搜索模块 到第一行的第三列。

第三列中的搜索模块

占位符文本对于搜索字段很重要,所以当你的模块就位时,进入 设置 并设置你的 占位符 文字提醒用户他们可以搜索的内容。 我们把 寻找物品! 作为占位符,因此用户知道这是他们可以搜索的内容,因为我们正在使用杂货配送布局包。

divi 搜索字段内的占位符文本

第三列中的搜索字段不好看。 所以我们想进入 搜索模块 设置并进入 设计 标签。 找出 转换 选项,然后导航到 翻译 标签(第二个)。 然后,您可以将搜索模块拖到适当的位置,Divi 将为它处理所有 CSS 和间距。

我们还使用 % 作为该值,以便无论桌面上的视口如何,它都保持相对。 使用 像素 可以使它在一些不同的分辨率下倾斜。

fiverr建站WordPress程序员

转换选项

迪维的 转换翻译 选项也需要针对移动设备进行调整。 如果你不这样做,同样的所以确保你进入 响应能力 设置并在二级菜单选项下设置搜索模块的位置。 我们刚刚调整了移动设备的垂直位置,因为将其放置在行的第三列会自动将其显示在行元素的底部。

移动端变换

设置 Divi 搜索模块的样式

虽然您没有很多用于搜索字段的样式选项,但您确实有一些。 即文本和字段本身的颜色,无论是在它处于非活动状态还是在用户单击它时。 (当然还有间距和尺寸以及其他标准 Divi 设计选项。)

要查找颜色选项,请导航至 场地 菜单中的 设计 标签。 展开后,您可以选择更改占位符文本颜色、字段背景颜色和字段文本颜色(即用户输入的文本)。 此外, 重点 变体是当用户专门与搜索字段交互时。

独立站选品工具

搜索字段样式

根据您的喜好设置样式后,单击保存按钮。

检查可见性设置

我们的一些布局包和免费赠品标题带有不同的桌面和移动显示选项。 如果您在可视化构建器中看到淡出/灰显的模块,则表明该模块在某些设备上被禁用。

对于杂货配送标题,最后两列在移动设备上被禁用。 我们想进入 行设置 并单击要在移动设备上显示的列的设置。 在这种情况下,它是第三个。

行选项

高质量外链购买

然后,进入 先进的 标签 并导航到 能见度 选项。 在这里,确保下面的所有选项 禁用未经检查 对于包含您的搜索框的列。 点击保存按钮(绿色复选标记),并且模块应该以全彩显示并且不再褪色。

搜索栏

一旦你确定一切都是可见的,你就准备好让这个东西上线了!

保存您的工作

确保单击 绿色保存按钮 在屏幕的右下角。

保存您的更改

JasperAI 10000字免费额度试用

现在您已准备好使用右上角的 X 关闭可视化构建器。 在下一个屏幕上,您需要确保 Divi Theme Builder 已保存所有选项。 如果它说 保存更改,单击按钮。 如果它说 已保存所有更改,那么您的搜索字段已经存在于您的 Divi 二级菜单中。

divi 搜索字段保存更改

最终结果

现在唯一要做的就是在您的网站上欣赏您的作品!

桌面

桌面版

移动的

手机版

WordPress备份工具updrafplus

总结 Divi 搜索字段

搜索字段是为您的网站提供良好用户体验的基本部分。 如果您想为访问者提供最好的服务,那么确保您的内容是可搜索的应该是您的首要任务之一。 希望您可以采用这种快速简便的方法并尽快将其应用于您的 Divi 网站!

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