WordPress divi主题

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

by | May 12, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

订阅我们的 Youtube 频道

了解属性之间的区别

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

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

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

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

响应式设计

WordPress divi主题

更改宽度

当您将文本模块的宽度更改为 80% 时,您会看到文本模块的大小缩小。 还可以显示您想要的对齐模块的可能性。

响应式设计

更改最大宽度

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

未超过

响应式设计

超过

响应式设计

除了宽度和最大宽度,您还可以在每个元素的尺寸设置中找到最小高度、高度和最大高度。 这是您从这些术语理论上可以理解的内容:

最小高度 – 您要分配给元素的最小高度。 如果该值大于输入的高度,则以最小高度输入为主。

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

fiverr建站WordPress程序员

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

更改最小高度

如果您更改元素的最小高度,则该值将成为标准。 测试时,您会自动看到 Text Module 的高度实时变化。

响应式设计

改变高度

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

不超过

独立站选品工具

响应式设计

超过

响应式设计

更改最大高度

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

更改行的最大宽度

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

高质量外链购买

更改全局最大宽度

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

响应式设计

特别更改一行的最大宽度

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

响应式设计

使模块具有相同的高度

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

JasperAI 10000字免费额度试用

使用列均衡器

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

响应式设计

为每个模块分配高度

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

响应式设计

对齐模块内的内容

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

WordPress备份工具updrafplus
display: flex;
flex-wrap: wrap;
align-content: center;

响应式设计

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

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

响应式设计

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

响应式设计

在所有屏幕尺寸上创建全屏英雄部分

到下一个也是最后一个提示! 想要创建全屏英雄版块? 打开页面上的英雄部分,转到尺寸设置并更改高度。 为此使用高度视口单元以确保所有内容在所有屏幕尺寸上都保持响应,这一点很重要。

响应式设计

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

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

响应式设计

最后的想法

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

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题