您想在中创建一个英雄部分吗 Divi 哪个是流体而不是传统的响应式？
英雄部分 网站Web 是流体设计的最佳候选者之一。 与适应不同断点的传统响应式设计不同，流畅的设计无缝地适应浏览器视口，并使设计在任何设备上保持一致。 毕竟，英雄部分是用户在 网站Web.
在本教程中，我们将向您展示如何在 Divi. 创建这种流畅设计的关键是为每个使用的模块添加一个流畅的根字体大小，然后合并长度单位 em （谁是 相对于根正文字体大小 ) 在模块设置中。
让我们开始吧！
概观
下面是我们将在本教程中创建的设计的快速浏览。
注意流畅的设计如何平滑地适应浏览器窗口的宽度。
使用 Divi Builder 创建新页面
要开始，您需要执行以下操作：
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi 生成器
然后点击 开始建设 (从头开始)
之后，您将有一个空白画布开始设计 Divi.
另请参阅： Divi：如何使用全宽标题模块创建英雄部分
如何在 Divi 中设计流畅的英雄部分
栏目设置
首先，让我们更新该部分的现有设计设置。 打开部分设置并更新以下内容：
- 梯度停止：
- 30%：#ff2000
- 30%：#121212
- 渐变方向：45度
在标签下 设计，更新填充：
- 内边距：0px 顶部，0px 底部
创建一条线
接下来，向该部分添加一列行。
线路设置
打开线路设置并在选项卡下更新以下内容 设计 :
- 天沟宽度：1
- 宽度：100%
- 最大宽度：1px
- 最小高度：100 vh（桌面），无（平板电脑和手机）
- 填充：0px（顶部和底部）
创建带边框的流动标题文本
现在部分和行已经完成，我们可以将流动的标题文本添加到 Hero 部分。 我们还将为创意设计元素的文本模块添加一个流畅的边框。
添加文本模块
要创建标题文本和边框，请在列中添加一个新的文本模块。
文字设定
在标签下 内容， 更新它 内容 包含以下 HTML 代码的正文：
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
为了使设计元素流动，我们首先需要使用 CSS Clamp() 函数为模块添加流动的根字体大小。
在标签下 高级，粘贴以下 CSS 片段：
font-size: clamp(32px, 4.1vw, 70px);
在标签下 设计，更新以下标题文本设计设置：
- 标题文字：
- 类型：H1
- 字体：蒙特塞拉特
- 字体粗细：重
- 颜色：#ffffff
- 尺寸：1em
- 字母间距：0,1em
- 线高：1,2 em
还要更新 mod 填充，如下所示：
- 填充：第一个（顶部、底部、左侧和右侧）
要创建流体边界设计，请更新以下内容：
- 边框宽度：1em
- 边框颜色：#ffffff
- 底部边框颜色：透明
- 左边框颜色：透明
创建强调边框
要创建重音边框，我们可以复制现有的 Text 模块。
删除它 内容 现有车身并更新设计参数如下：
- 最大宽度：6,5cm
- 高度：3,25 厘米
- 边框宽度：0,5em
- 边框颜色：#ff2000
要定位重音边框，请在标题文本 (1em) 模块中添加一个偏移量等于边框宽度的绝对位置。
在标签下 高级，更新以下位置选项：
- 职位：绝对
- 地点：右上角
- 垂直偏移：1em
- 水平偏移：1em
创建字幕文本
在标题文本下方，我们将添加流动的字幕文本。 由于此文本较小，我们将添加较小的流体根字体大小。
添加一个新的文本模块
要创建标题文本，请在现有标题文本模块下方添加一个新文本模块。
您可以添加一些填充文本句子，如下所示：
- 内容：Vestibulum ac diam sat amet quam vehicula elementum sed sat amet dui。 Lorem ipsum dolor sit amet, consectetur adipiscing elit。
添加流体根字体大小
接下来，我们需要添加一个更适合小文本的新的流体字体大小。 在“高级”选项卡下，将以下 CSS 片段粘贴到主元素下方：
font-size: clamp(14px, 1.4vw, 24px);
文字设计设置
在标签下 设计，更新以下内容：
- 文字：
- 字体粗细：半粗体
- 颜色：#ffffff
- 尺寸：1em
- 高度：1,6 厘米
然后更新大小和间距如下：
- 最大宽度：19cm
- 边距：2 em（下）、auto（左）、5 em（右）
创建流体按钮
要创建流畅的按钮，请在字幕文本模块下方添加一个新的按钮模块。
接下来，将按钮文本更新为“7 天免费试用”。
添加流体根字体大小
接下来，我们需要添加适合按钮的新流体字体大小。
在标签下 高级，将以下 CSS 片段粘贴到主元素下方：
font-size: clamp(20px, 2.35vw, 40px);
按钮设计设置
在标签下 设计，更新以下内容：
- 按钮对齐：右
- 为按钮使用自定义大小：是
- 按钮文字颜色：#ff2000
- 梯度停止：
- 颜色 1 25%：透明
- 颜色 2 25%：#ffffff
- 渐变方向：45度
- 按键：
- 边框宽度：0 像素
- 边框半径：0 像素
- 字体：蒙特塞拉特
- 字体粗细：粗
- 风格：斜体
- 显示按钮图标：是
- 图标：右侧的三角形箭头（见截图）
- 图标位置：右
- 边距：8em（右）
- 填充：0,2em（顶部和底部）、1,5em（左）、1em（右）
为英雄部分创建图像
与所有的 内容 将英雄部分调整为正确的页面大小，我们准备在左侧添加英雄部分图像。 为此，首先在按钮下方添加一个图像模块。
打开图像设置并上传图像。
图像设计设置
在标签下 设计，更新以下设置：
- 图像对齐：左（台式机和平板电脑），居中（手机）
- 最大宽度：48%（台式机和平板电脑）、70%（手机）
- 填充：4%（左）
最后，使用 vmin 长度单位给图像一个带有偏移的绝对位置，如下所示：
- 位置：绝对（台式机和平板电脑），相对（手机）
- 位置：左上角（台式机和平板电脑）
- 垂直偏移：30vmin（台式机和平板电脑），0px（手机）
最终结果
这是实时页面上的最终结果。
也可以看看： Divi：如何为英雄部分使用蒙版和背景图案
这就是流畅的设计如何平滑地适应浏览器窗口的宽度。
立即下载DIVI！！！
结论
将流畅的设计添加到 Hero 部分是一种方便的方法，可以确保折叠顶部在所有浏览器尺寸中保持美观一致，而无需在点、特定站点或使用媒体查询时更新设计。
希望这项技术能为未来的项目增加另一种有用的设计技能。
我们也希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
