如何创建响应式 Fluid Divi 模块

已发表: 2021-06-30

为了进一步简化为 Divi 模块实现一致响应式设计的过程，我们可以应用流体网页设计的实践。 与更传统的响应式设计方法不同，流体网页设计不会在不同的断点处中断或突然跳转到不同的大小/样式。 它结合了相对于视口宽度的响应长度单位，因此设计可以流畅地调整（或缩放），使设计在所有设备上保持一致。

在本教程中，我们将向您展示如何创建流畅的 Divi 模块。 使用类似的流体设计实践来创建流体排版和/或流体按钮，我们将创建一个流体 Divi 模块，它将与浏览器视口无缝缩放。 正如我们将发现的，秘密组合是向模块添加具有相对（或流体）长度单位的根体字体大小，然后在整个模块的需要时进行设置。

让我们开始吧！

抢先看

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

这是一个演示此流体模块功能的代码笔。

免费下载布局

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

下载文件
免费下载

免费下载

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

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

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

单击导入按钮。

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

然后点击导入按钮。

分区通知框

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

让我们进入教程，好吗？

你需要什么开始

扩展角标签

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

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

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

如何创建响应式 Fluid Divi 模块

行

首先，在默认的常规部分中创建一个新的单列行。
响应式流体divi模块

打开行设置，并更新以下内容：

  • 使用自定义装订线宽度：是
  • 天沟宽度：1
  • 宽度：自动
  • 最大宽度：100%
  • 填充：5vw 顶部，5vw 底部

响应式流体divi模块

设计流畅的号召性用语模块

尽管几乎可以将相同的流体设计技术添加到任何 Divi 模块中，但我们将在本教程中使用 Divi 的号召性用语模块之一。

在列/行内添加一个新的号召性用语模块。

响应式流体divi模块

内容设置

在内容设置下，添加一个模拟按钮链接 URL 并更新背景颜色如下：

  • 按钮链接网址：#
  • 背景颜色：#5e6472

响应式流体divi模块

向模块添加流体根字体大小

在设计流体模块时，我们需要为模块添加流体根字体大小。 一旦将其添加到模块中，此根字体大小将使用 em 长度单位动态合并到我们模块设计的其余部分中。

要将流体根字体大小添加到模块，请转到高级选项卡并将以下自定义 CSS 添加到主元素： 

font-size: clamp(16px, 2vw, 24px);

响应式流体divi模块

对于这种字体大小，我们使用 CSS Clamp() 函数来设置最小字体大小、流体字体大小（需要时）和最大字体大小。

响应式流体divi模块

使用 em 长度单位值覆盖具有默认间距的任何元素

尽管不是绝对必要的，但为了获得真正的模块流体设计，我们需要使用该属性的 em 长度单位值覆盖模块当前使用的任何默认（幕后）间距。 您可以通过使用浏览器开发工具检查您的元素来识别这些。 在这种情况下，号召性用语模块在促销说明和促销标题元素上都有一个底部填充。 由于底部填充属性使用像素 (px) 长度单位，我们需要使用 em 长度单位覆盖每个单位，该单位将合并我们刚刚添加到主元素的根正文字体大小。

响应式流体divi模块

使用 em 长度单位更新设计

现在我们的模块的流体根字体大小已经到位，我们需要做的就是使用 em 长度单位更新模块的设计。 因为 em 长度单位是相对于根字体大小的，任何使用 em 长度单位的设计都会继承字体大小的流动性，并在需要时随字体大小流畅地缩放。

文章主体

我们之前添加的自定义根字体大小是在考虑正文的情况下有目的地创建的。 因此，我们可以为正文文本分配一个值 1em，它继承了根字体大小的确切值。 我们也可以添加一个 body line-height。 为此，请更新以下内容：

  • 正文大小：1em
  • 车身线高：1.8em


响应式流体divi模块

标题文字

对于模块的标题文本元素，我们可以使用 em 长度单位给它一个更大的尺寸。 更新以下内容：

  • 标题文字大小：1.7em
  • 标题行高度：1.3em


响应式流体divi模块
为了让您了解标题文本的实际大小，我们只需将 em 长度值乘以根字体值即可。 请记住，根字体大小使用clamp() 来建立最小(16px)、流体(2vw) 和最大(24px) 字体大小。 因此最小标题文本大小将是 16px 的 1.7 倍，接近 27.2px。 流体字体大小将是 2vw 的 1.7 倍（视口宽度的 2%）。 最大字体大小将是 24px 的 1.7 倍，接近 69.36px。

按钮设计

该模块的第三个元素是按钮。 我们可以使用 em 长度单位值更新按钮的设计设置，以合并流体设计。
更新以下按钮设置：

  • 按钮文字大小：1.3em
  • 按钮边框宽度：0.12em
  • 按钮边框半径：1.5em
  • 按钮字母间距：0.1em
  • 按钮填充：顶部 0.1em，底部 0.1em，左侧 2em，右侧 2em

响应式流体divi模块

尺寸和间距

为了确保模块具有流体尺寸和流体间距，我们还需要对这些值使用 em 长度单位。

更新以下大小和间距设置：

  • 最大宽度：40em
  • 最小高度：0vw
  • 边距：顶部 0.5em，底部 0.5em，自动左，自动右
  • 填充：顶部 2.5em，底部 2.5em，左侧 2em，右侧 2em

响应式流体divi模块

结果

现在让我们看看我们的流体模块在实时页面上调整浏览器宽度时的结果。


使用 CSS 网格在一行中添加多个流体模块

为了将多个相邻的流体模块添加到一行中，我们需要确保我们的流体模块设计不受任何父容器宽度的限制或阻止。 换句话说，我们希望模块的父容器（列）设置为 auto 以便它随着模块的大小而缩放。 我们可以在列级别使用 CSS Grid 来设置网格中的每个模块，每列都有一个自动宽度。

调整模块大小和间距

在为模块创建 CSS 网格之前，我们需要将模块的最大宽度和边距调整为更适合具有两个模块的两列布局的大小。

打开模块的设置并更新以下内容：

  • 文本对齐方式：左
  • 最大宽度：24em
  • 边距：左 0.5em，右 0.5em


响应式流体divi模块

复制模块

现在复制模块以在同一列中创建另一个。

响应式流体divi模块

将 CSS 网格添加到列

现在我们可以将自定义 CSS 添加到列中以创建模块的 CSS 网格。

在高级选项卡下，将以下 CSS 添加到桌面视图的主元素： 

display:grid;
grid-template-columns: auto auto;
justify-content:center;

然后将以下 CSS 添加到手机视图的主元素中： 

display:grid;
grid-template-columns: auto;
justify-content:center;

这会将两个模块设置在桌面上的两列网格中（每个都有一个自动宽度）。 然后在电话上，模块将返回到一列（自动宽度）网格。

响应式流体divi模块

结果

现在看看结果。

最终结果

流体模块完成后，您可以使用内置设计设置更新模块样式，为其提供自定义字体、颜色等。

这是使用不同字体、字体颜色、按钮颜色和背景颜色的最终结果。

最后的想法

正如我们在本教程中所看到的，在 Divi 模块上结合流体设计是一种方便的方法，可以确保模块在所有浏览器尺寸上看起来美观且一致，而无需在特定断点处更新设计的麻烦。

不要忘记查看我们关于流体设计的其他文章，包括我们创建流体排版和流体 Divi 按钮的指南。

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

干杯!