如何在Divi Builder上使用全宽导航模块

Divi的全宽菜单模块允许您将导航菜单放置在页面上的任何位置。这可以用于在页面上添加第二个页面菜单，也可以与空白页面功能结合使用以将主导航移动到页面底部。例如，您可以将菜单移至第一部分的下方，以容纳具有较大启动图像的人。基本上，这可以使您的标题导航器使用构建器在页面中移动！

如何在页面上添加全屏菜单模块

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

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新的全角模块只能添加到全角部分中。如果您要开始一个新页面，请不要忘记先在页面上添加全角部分。我们有一些很棒的教程，介绍如何使用Divi section元素。

在模块列表中找到全角菜单模块，然后单击将其添加到页面中。模块列表是可搜索的，这意味着您还可以输入单词“ Fullwith menu”或“ full-width menu”（取决于您的版本），然后单击Enter以自动搜索并添加全角菜单模块！添加模块后，模块选项列表将为您打招呼。这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：在页面标题下添加全角菜单

对于此示例，我将向您展示如何在页面的标题部分下添加全角菜单。

下面是一个例子：

由于此新的全页菜单将替换默认的主导航菜单，因此有必要选择空白页模板，以使默认的导航菜单除了全宽菜单外不会出现在页面顶部。我将添加。

要编辑页面模板，请转到页面编辑器，然后在右侧栏中的页面属性区域中选择``空白页面''模板。

由于此模块将显示一个已经存在的菜单，因此在将菜单添加到全宽菜单模块之前，已经创建了菜单非常重要。

创建菜单后，使用可视化生成器在页面标题部分下方添加“全角”部分。然后在该部分中添加全宽菜单模块。

更新全角菜单设置，如下所示：

内容选项

菜单：[选择模块中应使用的菜单]上下文：＃333333

德观念选项

文本颜色：浅文本方向：中心菜单字体：Roboto菜单字体大小：20px

这就是它！

招：您可以使用“高级”标签下的查看选项在移动设备上隐藏此菜单，并在标题上方显示其他菜单，以便移动用户无需向下滚动页面即可查看菜单。

全宽菜单内容选项

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

菜单

选择要在模块中使用的菜单。您可以使用页面创建新菜单 外观>菜单 从您的WordPress仪表板。每次创建新菜单时，都可以从该下拉菜单中选择菜单。

背景颜色

默认情况下，菜单模块具有白色背景色。如果要为菜单背景使用其他颜色，则可以在此处使用颜色选择器进行选择。

下拉菜单背景色

默认情况下，菜单模块中的下拉菜单继承了先前设置中定义的背景色。如果希望下拉菜单具有自己的颜色，则可以使用此设置选择自定义颜色。

移动菜单背景色

在移动设备上，菜单模块被转换为其他设计，并且更适合移动设备。您可以独立于桌面下拉菜单来控制移动下拉菜单的背景颜色。

行政标签

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

全宽菜单设计选项

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

打开子菜单

默认情况下，所有子菜单均在主菜单栏下方以下拉菜单的形式打开。如果将菜单放置在页面底部附近，并且菜单具有较长的下拉菜单，则可能需要在菜单模块上方打开这些菜单，以使菜单不会超出浏览器窗口。

制作全角菜单链接

默认情况下，菜单模块的顶级链接位于默认内容宽度内。如果要删除此限制，并使链接从屏幕的最左边开始在页面的整个宽度上运行，则可以启用此选项。

下拉菜单行的颜色

在下拉菜单中，链接以1像素线分隔。如果要自定义此行的颜色，则可以在此设置中使用颜色选择器选择自定义颜色。

文字颜色

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

文字方向

这控制了文本在模块中的对齐方式。您可以在“左”，“右”和“中心”之间进行选择。

活动链接颜色

活动链接的颜色在菜单模块中突出显示，以向用户显示其当前位置。您可以使用此设置更改用于这些活动链接的突出显示颜色。

下拉菜单的文字颜色

默认情况下，模块下拉菜单中的文本会继承主菜单文本的颜色。但是，如果您定义了自定义下拉菜单背景颜色，则可能需要更改此颜色。

移动菜单文本的颜色

默认情况下，模块下拉菜单中的文本会继承主菜单文本的颜色。但是，如果您设置了自定义移动菜单背景色，则可能需要更改此颜色。

菜单字体

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

字体大小菜单

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

菜单文本的颜色

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

菜单字母间距

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

菜单行的高度

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

高级全角菜单选项

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

CSS ID

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

CSS类

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

自定义CSS

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

下拉菜单的动画

启用下拉菜单后，可以在要使用的不同动画之间进行选择。默认情况下，动画设置为淡入淡出，但是您可以将其更改为：展开，拖动或翻转。

能见度

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

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 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 =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

如何使用Divi Builder全宽导航模块