使用搜索模块，您可以放置​​一个 形式 搜索您网站上的任何位置。 这个 形式 搜索将允许您的访问者搜索您网站的所有内容，包括所有页面和博客文章。 这为您提供了 WordPress 搜索小部件的功能以及 Divi Builder 提供的灵活性。 您不仅可以控制位置 形式 在页面上搜索，还可以自定义其设计。

如何在页面上添加搜索模块

在将搜索模块添加到页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 使用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住首先在页面中添加一行。

在模块列表中找到搜索模块，然后单击它以将其添加到页面中。 模块列表是可搜索的，这意味着您还可以输入单词“ search”，然后单击Enter进行搜索并自动添加搜索模块！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

示例用例：向全宽博客页面添加自定义搜索模块

对于此示例，我将在博客页面顶部向您展示如何添加搜索模块以作为主要的号召性用语。 这使用户可以轻松搜索您的博客内容，而不会造成混乱。

此页面的顶部具有全角标题，搜索模块位于其正下方。 搜索模块下面是一个使用网格布局的博客模块。

使用Visual Builder将新的标准部分添加到博客页面，并使用全角（1列）行。 然后将搜索模块插入行中。

如下更新更新搜索模块设置：

内容选项

保留文字： 搜索我们的博客...
隐藏按钮：是

德观念选项

输入栏背景色：＃f8f8f8
占位符颜色：＃888888
输入字体大小：16px
输入文字颜色：＃888888
入口线高度：1em
自定义填充：20px顶部，20px底部

保存设置

现在返回更改包含搜索模块的行的宽度。 在线条设置的“设计”选项卡上，为线条设置300px的自定义宽度。 这将使搜索模块保持紧凑并专注于页面。

这就是它！

搜索内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。 所有控制 什么 出现在模块中的内容将始终在此标签中找到。

占位符文字

键入要用作搜索字段的占位符的文本。

隐藏按钮

如果启用此选项，“搜索”按钮将被隐藏。

排除页面

如果启用此选项，则页面将从搜索结果中排除。

排除项目

启用此选项将从搜索结果中排除邮件。

排除类别

选择要从搜索结果中排除的类别。

管理员标签

这将更改构造函数中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

搜索设计选项

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 这是用于更改模块外观的选项卡。 每个Divi模块都有一长串的设计设置，您可以用来调整任何内容。

输入字段的背景颜色

在这里你可以改变搜索栏的背景颜色。

占位符颜色

在使用搜索字段之前，该字段内部存在占位符文本。 如果您已调整字段的背景色，则还可以调整占位符文本的颜色以确保其可读性。

文字颜色

在这里，您可以选择文本的值。 如果您在黑暗的背景上工作，则应打开文本。 如果您使用的是浅色背景，则文本应为深色。

文字方向

这控制了文本在模块中的对齐方式。

入境警察

您可以通过从下拉菜单中选择所需的字体来更改输入文本的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

输入字体大小

您可以在此处调整输入文字的大小。 您可以拖动范围滑块以增加或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需文本大小的值。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

输入文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改输入文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

字母间距

字母间距会影响每个字母之间的间距。 如果要增加输入文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

线的高度

行高会影响输入文本各行之间的间距。如果要增加各行之间的间距，请使用范围滑块调整间距或在字段中输入所需的间距大小。光标右侧的条目。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

按钮和边框颜色

这将更改搜索按钮的背景和边框颜色。

按钮字体

您可以通过从下拉菜单中选择所需的字体来更改按钮文本的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

按钮字体大小

您可以在此处调整按钮文字的大小。 您可以拖动范围滑块以增加或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需文本大小的值。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

按钮文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改按钮文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

按钮的字母间距

字母间距会影响每个字母之间的间距。 如果要增加按钮文本中每个字母之间的间隔，请使用范围滑块调整间隔或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

按钮行的高度

行高会影响按钮文本的每一行之间的间距如果要增加每一行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

最大宽度

默认情况下，搜索栏的最大宽度设置为100％。 这意味着，除非搜索栏的宽度超过父列的宽度，否则搜索栏将以其自然宽度显示，在这种情况下，搜索栏将被限制为列宽的100％。 如果要进一步限制搜索栏的最大宽度，可以通过在此处输入所需的最大宽度值来进行限制。 例如，值为50％会将搜索栏的宽度限制为父列宽度的50％。

自订保证金

边距是添加到模块外部，模块与模块上方，下方或左侧和右侧之间的下一个元素之间的空间。 您可以将自定义边距值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

自定义填充

填充是在模块内部及其边缘与内部元素之间添加的空间。 您可以将自定义填充值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

研究模块的高级选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。 您可以添加多个类，以空格分隔。 这些类可用于Divi子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。

能见度

此选项使您可以控制模块所在的设备。 您可以选择在平板电脑，智能手机或台式机上分别停用模块。 如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

[vc_row center_row =“ yes”] [vc_column宽度=“ 1/2”] [vcex_button target =“空白” layout =“展开” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃18b69d” custom_hover_background =“＃118d7a” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载主题[/ vcex_button] [/ vc_column] [»vc_column] =» 1/2英寸] [vcex_button url =“ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target =“ blank” layout =“ expanded” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃c4226e” custom_hover_background =“＃8d184f” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载模板DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

其他Divi教程

• 5网站对餐厅使用迪维主题
• 如何在Divi WooCommerce产品上添加文字
• 如何更改Divi页面之间的菜单颜色
• 如何使用Divi个性化博客的网格
• 如何使用WordPress的作用迪维编辑
• 如何创建全屏Divi滑块
• 如何更改Divi页面之间菜单的颜色
• 您可能不了解Divi的功能
• 如何在WordPress上使用Divi Builder
• 如何使用Divi视频滚动模块
• 如何使用Divi Builder Flip模块
• 如何在Divi Builder上添加推荐模块
• 如何使用Divi文本模块
• 如何在Divi上创建滑块
• 如何编辑Divi用户角色
• 如何使用Divi社交媒体模块
• 如何在主题WordPress Divi上使用shop模块
• 如何使用Divi侧边栏模块
• 如何使用Divi Price表模块
• 如何使用Divi出版物的标题模块
• 如何添加Divi的视频模块
• 如何使用文章导航模块
• 如何使用Divi搜索模块
• 如何使用Divi钱包模块
• 如何在Divi Builder上使用person模块
• 如何使用带有Divi过滤器的钱包模块
• 如何使用全宽滑块模块
• 如何使用Divi Builder图像模块
• 如何使用Divi Builder的全宽导航模块
• 如何使用图库模块
• 如何使用Divi Builder全宽模块
• 如何使用Divi全宽度组合模块
• 如何使用Divi全角标题模块
• 如何使用Divi计数器模块
• 如何在Divi Builder上使用文章滑块
• 如何使用Divi Email Optin模块