如何在 Divi 中设计流体英雄部分

网站的英雄部分是流体设计的最佳候选者之一。 与在不同断点处进行调整的传统响应式设计不同，流体设计可与浏览器视口无缝扩展，并使设计在任何设备上保持一致。 毕竟，英雄部分是用户在网站上看到的第一件事。

您可能已经在之前的关于流体排版、流体模块和/或流体按钮的教程中看到了流体设计。 在本教程中，我们将向您展示如何在 Divi 中创建一个完整的流体英雄部分。 创建这种流畅设计的关键是为每个使用的模块添加一个流畅的根字体大小，然后在整个模块的设置中加入 em 长度单位（相对于根正文字体大小）。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

请注意流体设计如何随着浏览器视口宽度平滑缩放。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

如何在 Divi 中设计流体英雄部分

为了构建流畅的英雄部分，我们将为三个模块中的每一个添加一个流畅的根字体大小。 这些模块将构成标题、副标题和按钮。 然后我们将在模块设计设置中使用 em 长度单位来确保设计元素与流体根字体大小相关。 然后我们将使用绝对位置和偏移量将图像定位在页面的左侧。 结果将是一个流畅的英雄部分，它与视口宽度完美地缩放，因此设计在所有设备上都是一致的。

部分设置

首先，让我们更新该部分的现有设计设置。 打开部分设置并更新以下内容：

• 背景渐变左颜色：#ff2000
• 背景渐变右颜色：#121212
• 梯度方向：45度
• 起始位置：30%
• 结束位置：0%

在设计选项卡下，更新填充：

• 填充：0px 顶部，0px 底部

创建行

接下来，向该部分添加一列行。

行设置

打开行的设置并更新设计选项卡下的以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：1700px
• 最小高度：100vh（台式机），无（平板电脑和手机）
• 填充：0px 顶部，0px 底部

创建带边框的流体标题文本

现在部分和行已完成，我们可以将流体标题文本添加到英雄部分。 我们还将为创意设计元素的文本模块添加一个流畅的边框。

添加文本模块

要创建标题文本和边框，请向该列添加一个新文本模块。

文字设置

在内容选项卡下，使用以下 HTML 更新正文内容：

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

为了使设计元素流畅，我们首先需要使用 CSS Clamp() 函数为模块添加一个流畅的根字体大小。 在高级选项卡下，通过以下 CSS 片段：

font-size: clamp(32px, 4.1vw, 70px);

有了流体根字体大小，我们就可以更新设计设置了。 始终使用 em 长度单位很重要，因为 em 长度单位与元素的根字体大小相关。

在设计选项卡下，更新以下标题文本设计设置：

• 标题类型：H1
• 标题字体：蒙特塞拉特
• 标题字体粗细：重
• 标题文字颜色：#ffffff
• 标题文字大小：1em
• 标题字母间距：0.1em
• 标题线高度：1.2em

此外，更新模块填充如下：

• 填充：1em（上、下、左、右）

要创建流体边框设计，请更新以下内容：

• 边框宽度：1em
• 边框颜色：#ffffff
• 底部边框颜色：透明
• 左边框颜色：透明

创建重音边框

要创建重音边框，我们可以复制现有的文本模块。

取出现有的body内容，更新设计设置如下：

• 最大宽度：6.5em
• 高度：3.25em
• 边框宽度：0.5em
• 边框颜色：#ff2000

请记住，此重复模块中包含相同的流体根字体大小。 所以，我们可以使用em长度单位来调整边框的大小和宽度。 这将确保设计将随着标题文本模块的设计而调整。

要定位重音边框，请添加一个绝对位置，偏移量等于标题文本模块中的边框宽度 (1em)。 在高级选项卡下，更新以下位置选项：

• 位置：绝对
• 位置：右上角
• 垂直偏移：1em
• 水平偏移：1em

创建流动字幕正文

在标题文本下方，我们将添加流体字幕正文文本。 由于此文本较小，我们将添加较小的流体根字体大小。

添加新的文本模块

要创建字幕文本，请在现有标题文本模块下方添加一个新文本模块。

您可以添加几句填充文字，如下所示：

• 正文内容：前庭交流直径坐 amet quam vehicula elementum sed 坐 amet dui。 Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。

添加流体根字体大小

接下来，我们需要添加一个新的流体字体大小，它更适合较小的文本。 在高级选项卡下，将以下 CSS 片段粘贴到主元素下：

font-size: clamp(14px, 1.4vw, 24px);

文字设计设置

在设计选项卡下，更新以下内容：

• 文字字体粗细：半粗体
• 文字文字颜色：#ffffff
• 文字文字大小：1em
• 文本行高：1.6em

然后更新尺寸和间距如下：

• 最大宽度：19em
• 边距：底部 2em，自动左，5em 右

创建流体按钮

要创建流体按钮，请在字幕文本模块下方添加一个新按钮模块。

然后将按钮文本更新为“7 天免费试用”。

添加流体根字体大小

接下来，我们需要添加适合按钮的新流体字体大小。 在高级选项卡下，将以下 CSS 片段粘贴到主元素下：

font-size: clamp(20px, 2.35vw, 40px);

按钮设计设置

在设计选项卡下，更新以下内容：

• 按钮对齐：右

• 按钮文字颜色：#ff2000
• 按钮背景渐变左侧颜色：透明
• 按钮背景渐变右颜色：#ffffff
• 梯度方向：45度
• 起始位置：25%
• 结束位置：0%
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字体：蒙特塞拉特
• 按钮字体重量：重
• 按钮字体样式：斜体
• 按钮图标：右三角箭头（见截图）
• 按钮图标位置：左

• 边距：8em 右
• 填充：顶部 0.2em，底部 0.2em，左侧 1.5em，右侧 1em

为英雄部分创建图像

所有的英雄部分内容都在页面的正确大小上，我们准备将英雄部分图像添加到左侧。 为此，首先在按钮下添加一个图像模块。

打开图像设置并上传图像。

图像设计设置

在设计选项卡下，更新以下设置：

• 图像对齐：左（台式机和平板电脑），中心（手机）
• 最大宽度：48%（桌面和平板电脑），70%（手机）
• 填充：4% 左

最后，使用 vmin 长度单位为图像提供具有偏移量的绝对位置，如下所示：

• 位置：绝对（桌面和平板电脑），相对（手机）
• 位置：左上角（台式机和平板电脑）
• 垂直偏移 30vmin（桌面和平板电脑），0px（手机）

最后结果

这是实时页面上的最终结果。

以下是流体设计如何随着浏览器视口宽度平滑缩放。

浏览器支持

除了 IE 之外，所有主要浏览器都非常支持 CSS 钳位（）函数（用于本教程中的流体字体大小）。 有一个奇怪的 safari 错误，它在调整浏览器窗口时不会动态缩放，但会在页面加载时正确显示。 为了解决这个问题，你似乎需要做的就是给每个模块一个最小高度 0vw。

最后的想法

将流畅的设计添加到英雄部分可以是一种方便的方式，以确保首屏在所有浏览器尺寸上看起来都非常一致，而无需在特定断点处更新设计或使用媒体查询。

不要忘记查看我们关于流体设计的其他文章，包括如何创建流体排版、流体模块和流体按钮。

我期待在评论中收到您的来信。

干杯!