Divi上的全屏菜单模块使您可以轻松地在页面顶部（或网站上的任意位置）添加漂亮的彩色标题。 这些模块只能放在全宽部分中。

如何添加Divi全屏菜单模块

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

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。 新的“全屏菜单”模块只能添加到全角部分中。 如果您要开始一个新页面，请不要忘记先在页面上添加全角部分。

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

用例示例：向“关于”页面添加全屏标题

对于此示例，我将向您展示如何使用Fullwidth标头模块添加带有自定义文本和背景图片的标头。

所有全屏模块仅在使用全屏部分时可用。 使用Visual Builder，插入一个新的全屏部分。 然后将一个Person模块添加到该部分。

更新全屏标题设置，如下所示：

内容选项

标题：关于我们字幕文本：我们做不同的事情...背景图片网址：[插入1920 x 800图片]叠加背景颜色：rgba（0,0,0,0.2 ，XNUMX）

德观念选项

文本和徽标的方向：中间按钮向下滚动按钮：是图标：[选择图标]向下滚动图标颜色：＃fcbf00滚动图标：50px文本颜色：浅文本颜色：＃fcbf00字体标题：打开，不带粗体，大写标题字体大小：60px（桌面），40px（平板电脑），30px（电话）字幕字体大小：25px

高级选项（自定义CSS）

主要元素：
室内装潢：100px 0;

这就是它！

全屏标题内容选项

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

标题

在此输入您的页面标题。

字幕文字

如果要使用字幕，请在此处添加。 您的标题将以小字体显示在标题下方。

按钮#1文本

输入按钮的文本。

按钮#2文本

输入按钮的文本。

包装内容

在这里，您可以定义将放置在标题和标题文本下的内容。

按钮网址1

输入按钮的URL。

按钮网址2

输入按钮的URL。

徽标图片网址

上载您想要的图像或输入您要查看的图像的URL。

标题图片网址

上载您想要的图像或输入您要查看的图像的URL。

背景图片网址

如果设置，此图像将用作此模块的背景。 要删除背景图片，只需从设置字段中删除URL。 背景图像将出现在背景颜色的顶部，这意味着应用背景图像时背景颜色将不可见。

背景颜色

为模块定义自定义背景色，或留空以使用默认颜色。

背景叠加颜色

选择背景覆盖颜色，该颜色将放置在背景图像上方。 将半透明的叠加图像放置在背景图像上方时，可以创建很酷的效果。

行政标签

这将更改构造函数中的模块标签，以便于识别。 在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”以更改其单位类型。

字幕字体

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

字幕字体的大小

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

字幕文字颜色

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

字幕字母的间距

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

字幕行的高度

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

最大文字宽度

使用此设置可以减小标题模块中文本的最大宽度。 例如，值为50％将确保文本不会超过整个标题模块宽度的50％。

对按钮使用自定义样式

启用此选项会显示各种按钮自定义设置，您可以使用这些设置来更改模块按钮的外观。

按钮文字大小

此设置可用于增加或减小按钮中文本的大小。 该按钮会随着文本大小的增加和减少而适应。

按钮文字颜色

默认情况下，按钮采用主题定制器中定义的主题的强调色。 此选项使您可以为该模块的按钮分配自定义文本颜色。 使用颜色选择器选择自定义颜色以更改按钮颜色。

按钮背景颜色

默认情况下，按钮具有透明的背景色。 可以通过从颜色选择器中选择所需的背景颜色来更改此设置。

边框宽度按钮

默认情况下，所有Divi按钮的边框均为2px。 使用此设置可以增加或减少边框。 输入0即可删除边框。

按钮边框颜色

默认情况下，按钮边框采用主题自定义程序中定义的主题的强调色。 此选项使您可以为该模块的按钮分配自定义边框颜色。 使用颜色选择器选择自定义颜色，以更改按钮边框的颜色。

按钮边框半径

边框的半径会影响按钮角的圆度。 默认情况下，Divi中的按钮具有较小的边框半径，该边框将角四舍五入3个像素。 您可以将该值减小为0以创建一个方形按钮，或者显着增大该值以创建具有圆形边缘的按钮。

按钮字母的间距

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

按钮字体

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

添加按钮图标

禁用后，此设置将从您的按钮中删除图标。 默认情况下，所有Divi按钮都将在悬停时显示一个箭头图标。

按钮图示

如果启用了图标，则可以使用此设置选择要在按钮中使用的图标。 Divi有不同的图标可供选择。

颜色图标按钮

调整此设置将更改按钮上显示的图标的颜色。 默认情况下，图标颜色与按钮文本颜色相同，但是此设置可让您独立调整颜色。

图标放置按钮

您可以选择在按钮的左侧或右侧显示按钮的图标。

将鼠标悬停在按钮上时仅显示图标

默认情况下，仅在悬停时显示按钮图标。 如果您希望图标始终出现，请关闭此设置。

按钮悬停文本颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。 颜色将与之前设置中定义的基础颜色不同。

悬停按钮背景颜色（悬停按钮颜色）

当访客的鼠标悬停在按钮上时，将使用此颜色。 颜色将与之前设置中定义的基础颜色不同。

悬停边框颜色按钮（悬停边框颜色）

当访客的鼠标悬停在按钮上时，将使用此颜色。 颜色将与之前设置中定义的基础颜色不同。

悬停边框半径按钮

当访问者的鼠标悬停在按钮上时，将使用此值。 该值将不同于先前设置中定义的基值。

指向音符间距按钮

当访问者的鼠标悬停在按钮上时，将使用此值。 该值将不同于先前设置中定义的基值。

先进的全宽页眉选项

在高级选项卡上，您将找到经验丰富的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教程

• 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模块