如果没有搜索字段，您网站的导航将会受到影响。 您可以在互联网上获得最强大的浏览体验，但如果您的用户无法搜索以找到他们正在寻找的确切内容，您可能（并且可能会）失去业务。 本教程将引导您向 Divi 的二级菜单添加一个搜索字段，这样无论如何，您的用户将始终只需点击几下即可获得所需的一切。
Divi 搜索字段预览
桌面
移动的
上传和/或编辑全局标题
对于本文，我们将使用杂货配送布局包附带的免费页眉/页脚。 您可以简单地下载 。压缩 归档并提取所需的 .json 文件到您的计算机。
之后，进入您的 WordPress 仪表板并导航到 Divi – 主题生成器. 从那里，您需要单击 上下箭头图标 打开便携性选项。
在新模式中，单击 进口 选项卡并找到 .json 您下载的文件。 准备好后，选择 导入 Divi 主题生成器模板 开始上传。
此时，您已准备好进入 全局标题 的部分 默认网站模板. 导入 .json 文件应该自动应用免费赠品作为网站的全局标题。
将搜索字段添加到辅助菜单栏
使用 Divi Visual Builder，您应该会看到与此类似的内容作为全局标题。
我们要做的第一件事是为搜索字段腾出空间。 我们希望确保所有访问者都可以轻松使用搜索字段，因此我们要将其添加到二级菜单（在 主页/联系方式 排）。
首先，我们将使用 Divi 搜索模块 到第一行的第三列。
占位符文本对于搜索字段很重要，所以当你的模块就位时，进入 设置 并设置你的 占位符 文字提醒用户他们可以搜索的内容。 我们把 寻找物品！ 作为占位符，因此用户知道这是他们可以搜索的内容，因为我们正在使用杂货配送布局包。
第三列中的搜索字段不好看。 所以我们想进入 搜索模块 设置并进入 设计 标签。 找出 转换 选项，然后导航到 翻译 标签（第二个）。 然后，您可以将搜索模块拖到适当的位置，Divi 将为它处理所有 CSS 和间距。
我们还使用 % 作为该值，以便无论桌面上的视口如何，它都保持相对。 使用 像素 可以使它在一些不同的分辨率下倾斜。
迪维的 转换翻译 选项也需要针对移动设备进行调整。 如果你不这样做，同样的所以确保你进入 响应能力 设置并在二级菜单选项下设置搜索模块的位置。 我们刚刚调整了移动设备的垂直位置，因为将其放置在行的第三列会自动将其显示在行元素的底部。
设置 Divi 搜索模块的样式
虽然您没有很多用于搜索字段的样式选项，但您确实有一些。 即文本和字段本身的颜色，无论是在它处于非活动状态还是在用户单击它时。 （当然还有间距和尺寸以及其他标准 Divi 设计选项。）
要查找颜色选项，请导航至 场地 菜单中的 设计 标签。 展开后，您可以选择更改占位符文本颜色、字段背景颜色和字段文本颜色（即用户输入的文本）。 此外， 重点 变体是当用户专门与搜索字段交互时。
根据您的喜好设置样式后，单击保存按钮。
检查可见性设置
我们的一些布局包和免费赠品标题带有不同的桌面和移动显示选项。 如果您在可视化构建器中看到淡出/灰显的模块，则表明该模块在某些设备上被禁用。
对于杂货配送标题，最后两列在移动设备上被禁用。 我们想进入 行设置 并单击要在移动设备上显示的列的设置。 在这种情况下，它是第三个。
然后，进入 先进的 标签 并导航到 能见度 选项。 在这里，确保下面的所有选项 禁用 是 未经检查 对于包含您的搜索框的列。 点击保存按钮（绿色复选标记)，并且模块应该以全彩显示并且不再褪色。
一旦你确定一切都是可见的，你就准备好让这个东西上线了！
保存您的工作
确保单击 绿色保存按钮 在屏幕的右下角。
现在您已准备好使用右上角的 X 关闭可视化构建器。 在下一个屏幕上，您需要确保 Divi Theme Builder 已保存所有选项。 如果它说 保存更改，单击按钮。 如果它说 已保存所有更改，那么您的搜索字段已经存在于您的 Divi 二级菜单中。
最终结果
现在唯一要做的就是在您的网站上欣赏您的作品！
桌面
移动的
总结 Divi 搜索字段
搜索字段是为您的网站提供良好用户体验的基本部分。 如果您想为访问者提供最好的服务，那么确保您的内容是可搜索的应该是您的首要任务之一。 希望您可以采用这种快速简便的方法并尽快将其应用于您的 Divi 网站！
