[ad_1]
Divi 搜索框概述
办公室
联络号码
下载和/或修改全局标头
对于本文，我们将使用杂货配送布局包附带的免费页眉/页脚。 您可以简单地下载 邮递*：法语 存档并提取必要的 .json 文件在您的计算机上。
之后转到您的 WordPress 仪表板并导航到 Divi - 主题生成器. 从那里你必须点击 向上和向下箭头图标 打开便携选项。
在新模式中，单击 进口 选项卡并找到 .json 你下载的文件。 准备好后，选择 从导入生成器模型 Divi主题 开始下载。
此时您已准备好进入 全局标题 的一部分 网站模板 默认情况下，. 进口于 .json 文件应该自动应用免费赠品作为整个网站的标题。
向二级菜单栏添加搜索字段
使用 Divi Visual Builder，您应该看到与全局标题类似的内容。
我们要做的第一件事是为搜索字段创建空间。 我们希望确保每个人都可以轻松访问搜索字段。 游客，所以我们将把它添加到二级菜单（在 首页 / 联系方式 线）。
首先，我们将使用 迪维搜索模块 在第一行的第三列。
占位符文本对于搜索字段很重要，因此当您的模块就位时，请转到 参数 并设置你的 预留区 文本到提醒用户要查找的内容的内容。 我们把 寻找物品！ 作为占位符，因此用户知道这是他们可以搜索的内容，因为我们使用的是杂货配送布局包。
第三列中的搜索框不好。 所以我们要输入 搜索模块 设置并转到 设计 舌头。 找到它 变压器 选项，然后转到 翻译 选项卡（第二个）。 然后，您可以将搜索模块拖到位，Divi 将为它处理所有 CSS 和间距。
我们还使用 % 作为这个值，这样无论桌面上的视口如何，它都保持相对。 使用 像素 可能会扭曲一些不同的分辨率。
Divi 变压器翻译 还需要针对移动设备调整选项。 如果你不这样做，它是一样的。 所以一定要去 反应 设置并在二级菜单选项中设置搜索模块的位置。 我们刚刚调整了移动设备的垂直放置，因为将其放置在行的第三列会自动将其显示在行项目的底部。
设计 Divi 搜索模块
虽然您没有很多用于搜索框的样式选项，但您确实有一些。 即，文本和字段本身的颜色，无论是在它处于非活动状态时还是在用户单击它时。 （当然还有间距和尺寸以及其他标准的 Divi 设计选项。）
要查找颜色选项，请转到 冠军 菜单中的 设计 舌头。 展开后，您可以修改占位符文本的颜色、字段的背景颜色和字段文本的颜色（用户输入的文本，即说）。 除此之外 专心 变体是指用户专门与搜索框进行交互时。
根据您的喜好设置样式后，单击“保存”按钮。
检查可见性设置
我们的一些免费布局和标题包为台式机和移动设备提供了不同的显示选项。 如果您在可视化构建器中看到变暗/变灰的 mod，则表明该 mod 在某些设备上被禁用。
对于杂货配送标题，最后两列在移动设备上被禁用。 我们要进入 线路设置 然后单击要在移动设备上显示的列的设置。 在这种情况下，它是第三个。
然后去 进度 舌 并导航到 能见度 选项。 在这里，确保下面的所有选项 关闭 关于 未经检查 对于包含搜索字段的列。 单击保存按钮 (绿色勾号)，并且模块应显示为彩色且不再变色。
确定所有内容都可见后，您就可以将这个东西放到网上了！
保存您的工作
确保单击 绿色保存按钮 在屏幕的右下角。
您现在可以使用右上角的 X 关闭视觉生成器。 在下一个屏幕上，您需要确保 Divi Theme Builder 已保存您的所有选项。 如果他说 保存更改, 点击按钮。 如果他说 已保存所有更改，那么您的搜索字段已经存在于您的 Divi 二级菜单中。
最终结果
剩下要做的就是欣赏您在网站上的工作！
办公室
联络号码
Divi 搜索字段的结论
搜索框是网站良好用户体验的基本组成部分。 如果您想为您的客户提供最好的服务 游客，确保您的内容可搜索应该是您的首要任务之一。 我希望您能使用这种快速简便的方法并将其应用到您的 Divi 站点中！
[ad_2]
