使用 Divi 的新高度和宽度选项来创建响应式设计

尽管它们通常不是访问者注意到您的网站的第一件事，但宽度和高度 CSS 属性有助于使您的网站保持一致并看起来很棒。 现在，使用 Divi 的新可拖动大小选项，您可以在构建器本身内部控制每个元素的宽度、最大宽度、最小高度、高度和最大高度。 这使您可以自由地创建在不同屏幕尺寸上具有高度响应性的网站。

现在，所有这些听起来都很棒，但实际上如何将其转化为一个漂亮的网站？ 这正是我们要在这篇文章中讨论的内容。 我们将首先解释 Divi 设置中可用的所有高度和宽度属性之间的区别，然后在不同的场景中使用它们来使我们的页面设计完全按照我们希望的方式运行。

让我们开始吧！

订阅我们的 YouTube 频道

了解属性之间的差异

在我们的日常设计过程中使用宽度和最大宽度之前，了解它们的作用很重要。 理论上的解释是这样的：

宽度 –设计元素的实际宽度。 如果这是 100%，则它与容器允许的宽度一样宽。 宽度通常使用 % 表示。 宽度的百分比越低，设计元素就越窄。

最大宽度 -最大宽度对宽度有影响。 如果模块的宽度设置为 100%，只要它保持在最大宽度值以下，它就会坚持该值。 一旦达到最大宽度值，它就不会超过它。

但这如何转化为响应式设计？ 为了帮助解释差异，我们将通过在全新页面上启用 Visual Builder 来创建视觉比较。 我们将添加一个包含一列行的部分。 然后，插入带有一些内容、背景颜色和一些自定义填充的文本模块。

改变宽度

当您将文本模块的宽度更改为 80% 时，您将看到文本模块的尺寸缩小。 也可以根据需要对齐模块。

更改最大宽度

当您更改最大宽度时，指定的值只会从实际宽度超过最大宽度值的那一刻开始应用。 让我们快速演示一下：

不超过

超过

除了宽度和最大宽度，您还可以在每个元素的大小设置中找到最小高度、高度和最大高度。 这就是你从这些术语理论上可以理解的：

最小高度 -要分配给元素的最小高度。 如果此值大于输入的高度，则输入的最小高度将占主导地位。

高度 -这定义了要分配给元素的实际高度。

最大高度 -一旦高度超过分配给高度的值，该值将成为新高度。

更改最小高度

如果您更改元素的最小高度，该值将成为标准。 测试时，您将自动实时看到文本模块的高度变化。

改变高度

如果您将最小高度和高度结合起来，则必须确保高度大于最小高度。 如果不是，高度将被忽略。 在下面的两个 GIF 中，您将能够实时看到差异。

不超过

超过

更改最大高度

如果最大高度超过最小高度但小于高度，则最大高度将接管。 例如，如果您为最小高度分配比最大高度更高的值，则最小高度将占主导地位。

更改行的最大宽度

网页设计的最佳实践之一是为整个网站确定一个特定的最大宽度。 这有助于使所有内容在不同的屏幕尺寸上看起来都具有响应性。 它还可以帮助设计师创建准确的线框。

更改全局最大宽度

您可能知道也可能不知道，您可以通过转到“常规设置”并继续“布局设置”，在主题定制器中为您的内容设置特定的默认最大宽度。 保持最大宽度不变有助于增强响应能力。

特别更改一行的最大宽度

通过新的可拖动大小更新，您还可以单独定义行的最大宽度。 这对于使用更高的最大宽度更有意义的例外情况非常有用。

给模块相同的高度

您应该记住的另一种技术侧重于为相似的元素提供相同的高度。 这在美学上令人赏心悦目，并有助于访问者轻松浏览内容。 有两种常见的方法来解决这个问题：

使用列均衡器

第一种方法是 Divi 使用了很长时间的方法。 如果要为行中的每一列创建相同的高度，可以在行的大小设置中启用列均衡器。 如果您使用列背景颜色，您会很快注意到差异。

为每个模块分配高度

另一种方法是为您添加的模块分配一个预定义的高度。

对齐模块内的内容

为所有模块指定高度后，您还可以调整内容的对齐方式。 为此，您可以使用自定义填充来手动确定模块中的空白，或者使用几行 CSS 代码来自动对齐内容。

display: flex;
flex-wrap: wrap;
align-content: center;

选择设计元素高度或宽度并将溢出变成滚动

您可以使用新的可拖动大小选项做的另一件很酷的事情是将溢出变成滚动。 这将轻松帮助您节省页面空间并添加额外的交互。 这有两个步骤； 为元素设置高度并更改可见性设置中的溢出。 首先更改元素的高度。

然后，转到元素的可见性设置并将垂直溢出更改为滚动。

创建跨所有屏幕尺寸的全屏英雄部分

继续下一个也是最后一个提示！ 想要创建一个全屏英雄部分？ 打开页面上的英雄部分，转到大小设置并更改高度。 为此使用高度视口单位很重要，以确保所有屏幕尺寸的所有内容都保持响应。

• 高度：100vh

想要在全屏英雄部分集中对齐内容吗？ 还将以下自定义 CSS 代码行添加到您部分的主要元素：

display: flex;
flex-wrap: wrap;
align-content: center;

最后的想法

在这篇文章中，我们已经讨论了 Divi 的可拖动大小更新带来的新宽度和高度选项。 我们已经向您展示了它们的工作原理以及如何使用它们为您正在构建的任何类型的网站创建响应式页面设计。 如果您有任何问题或建议，请务必在下方评论区留言！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。