您想通过平衡主按钮和辅助按钮来自定义 Divi 的全宽标题模块吗？
模块 Divi Fullwidth Header 使您可以轻松地向您的网站添加精美的 Hero 部分 网站Web. 该模块带有两个按钮，标题文本、副标题文本、正文、徽标和图像，这使得自定义选项无穷无尽。
在今天的文章中，我们将向您展示如何使用 Divi 全角标题. 我们将使用 3 个预制布局包开始我们的设计，并设计我们的部分，重点是主要和次要按钮的平衡。
我们希望主按钮脱颖而出，因为它是我们的主要行动号召，同时保持辅助按钮可见和可访问，而不会超过主按钮。
主次按钮设计原则
主按钮和辅助按钮帮助引导 游客 您的 网站Web 对某些股票。 主按钮通常是最常见或最需要的操作，辅助按钮是不太常见的操作。 这有助于指导 游客 到他们想去的地方。
为此，主要按钮应在视觉上突出，而辅助按钮不应突出。 这意味着主要按钮应该更加独特并具有更大的视觉重量，以吸引更多注意力。
现在我们了解了主按钮和辅助按钮的工作原理，让我们开始教程吧！
概观
下面是我们今天要设计的三个全角标题。
让我们从使用 Divi Builder 创建一个新页面开始
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi Builder
然后点击 开始建设 (从头开始)
之后，您将有一块空白画布可以开始在Divi中进行设计。
第一个例子的设计
现在我们的页面已经设置好了，让我们从用户体验登陆页面的全角标题开始。
配置我们的页面
在我们开始定制之前，我们需要加载预定义的布局包 UX 来自 Divi 图书馆。 当您激活 Visual Builder 时，您将看到三个选项弹出，选择 浏览布局.
加载布局包
要在页面上加载 UX 布局包：
- 在标签中 “预制布局”，使用搜索功能查找UX布局包。
- 找到它后，单击它。 这将显示布局详细信息和可用页面。
- 点击 降落并点击 “使用此布局”.
我们将重新创建布局的顶部作为一个模块 全角标题.
删除第一部分
由于我们要使用全角标题模块重新创建第一部分，因此我们需要删除该部分。 将鼠标悬停在该部分上，然后单击垃圾桶图标。
添加全宽部分
在我们可以添加全角标题之前，我们需要添加一个全角部分。
点击箭头 “ +” 显示 Divi 部分，然后单击 “全屏宽度”. 这将自动调出 Divi Fullwidth Module 库。
添加全角标题
在 Divi Fullwidth 模块库中，单击“ 全角标题”。
添加内容
在开始自定义模块之前，我们先添加它 内容 该模块所需的。
添加文字内容
在“文本”选项卡下，添加 内容 辅料
- 标题：提高您的 UX 设计知识
- 副标题：用户体验设计课程
- 按钮 #1：课程概述
- 按钮 #2：了解更多
- 正文：默认
添加图像
现在我们有了我们的 内容 文本到位后，我们需要在设计中添加两个图像。
- 在标签中 图片, 添加徽标图像（星星）和标题图像（手持电话的人的照片）。
更改背景颜色
在标签中 背景，配置这个参数：
- 背景颜色：#131517
自定义全角标题
现在我们的内容已经设置好了，让我们通过 设计.
向下滚动图标
让我们添加向下滚动图标，向下箭头。
- 显示向下滚动按钮：是。
- 选择向下箭头图标。
- 向下滚动图标颜色：#000
图片
让我们通过圆角为我们的图像添加曲线。
在标签中 图片，配置以下设置：
- 图像圆角 ：点击链接按钮取消链接角，然后在左下角和右下角的输入框中输入1000px。 这将使我们图像的左下角和右下角变圆。
标题文字
在这里，让我们自定义这个模块的标题文本。 在选项卡中 标题文本，配置这些设置：
- 标题：
- 字体：PT Sans
- 字体粗细：粗体
- 文字大小：5 雷姆
- 线高：1,2 em
正文文本
这是我们为这个模块定制正文的地方。 在选项卡中 文章主体，配置这些设置：
- 正文字体：Mukta
- 正文大小：18px
字幕文字
这是我们为这个模块定制标题文本的地方。 在选项卡中 字幕文字，配置这些设置：
- 副标题：
- 字体：Mukta
- 字体粗细：粗体
- 风格：大写
- 文字颜色：#13d678
- 字母间距：3px
按钮一
这是我们可以为按钮一定义自定义样式的地方： 主按钮. 在选项卡中 按钮一，配置这些设置：
- 为按钮一使用自定义样式：是
- 按钮一：
- 文字颜色：#ffffff
- 背景颜色：#13d678
- 边框宽度：0 像素
- 边框半径：100px
- 字体：Mukta
- 字体粗细：粗体
- 显示按钮一个图标：是
- 图标：右箭头
- 仅在按钮一的悬停时显示图标：否
按钮二
现在，让我们自定义第二个： 辅助按钮. 在选项卡中 按钮二，配置这些设置：
- 为按钮使用自定义样式：是
- 按钮二
- 文字颜色：#ffffff
- 背景颜色：#303030
- 边框宽度：0 像素
- 边框半径：100 像素
- 字体：Mukta
- 字体粗细：粗体
- 显示按钮两个图标：是
- 按钮二图标：右箭头
- 仅在悬停按钮二上显示图标：是
添加按钮链接
不要忘记为您的按钮添加链接！ 在选项卡中 链接，配置以下设置：
- 按钮 #1 链接 URL：在此处粘贴按钮 1 的 URL。
- 按钮 #1 链接 URL：在此处粘贴按钮 2 的 URL。
保存您的工作
现在我们有了完全设计的全宽标题，请务必保存您的设计！
- 单击模块窗口右下角的绿色箭头。
- 保存
- 退出 VisualBuilder。
另请参阅： Divi：如何创建流体英雄部分
玩得开心
定制 Divi 全宽标头模块的方法是无穷无尽的。 利用主按钮和辅助按钮可以帮助指导您 游客 转到您希望他们查看的页面或执行您希望他们执行的操作（例如提交请求）。
让我们再看两个具有突出主按钮的全角标题示例。
“退休中心”包中的全角标题
按钮样式
让我们来看看独特的主要和次要按钮样式。
按钮一
在 Button One 选项卡上，配置以下设置：
- 为按钮一使用自定义样式：是
- 按钮一：
- 文字大小：14px
- 文字颜色：#ffffff
- 背景颜色：#0a0a0a
- 边框宽度：0 像素
- 边框半径：10px
- 字母间距：3px
- 字体粗细：粗体
- 字体样式：TT
- 仅在悬停时为 Buttpn One 显示图标：是
- 按钮一填充：15px（顶部和底部），25px（左右）
按钮二
在标签中 按钮二，配置以下设置：
- 为按钮使用自定义样式：是
- 按钮二：
- 文字大小：14px
- 文字颜色：#ffffff
- 背景颜色：#0a0a0a
- 边框宽度：0 像素
- 边框半径：10px
- 字体粗细：粗体
- 字体样式：TT
- 按钮两个内边距：10px（底部），10px（左右）
你去吧！ 两个独特的按钮，一个突出，一个位于第二个位置。
“财务计划”包的全角标题
按钮样式
让我们来看看独特的主要和次要按钮样式。
按钮一
在标签中 一键式，配置以下设置：
- 为按钮一使用自定义样式：是
- 按钮一：
- 文字大小：18px
- 文字颜色：#ffffff
- 背景颜色：#1b4ffe
- 填充：15px() 顶部和底部）； 25px(左右)
按钮二
在标签中 按钮二，配置以下设置：
- 为按钮二使用自定义样式：是
- 按钮二：
- 文字颜色：#1b4ffe
- 背景颜色：透明
- 图标颜色：#1b4ffe
立即下载DIVI！！！
结论
Divi 的全宽标题模块可以轻松地在您的桌面上创建令人惊叹的英雄部分 网站Web.
战略性地使用主要和次要按钮将改善您的用户体验并帮助网站访问者采取他们想要采取的行动。
全角标题的自定义选项是无穷无尽的，所以尽情尝试吧！
如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
