WordPress divi主题

在 Divi 中使用 Transform Translate 与负边距

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

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

Divi 提供了很多选择,这已经不是什么秘密了。 有时,其中一些选项似乎会产生类似的结果。 了解它们的区别以及如何以及何时使用它们很重要。 负边距和变换转换是可以提供类似结果的设计选项中的两个,在某些情况下,使用一个而不是另一个更有意义。

google广告开户

在这篇文章中,我们将通过向您展示两者之间的区别,让您更轻松地选择正确的设计选项,您可以在 Divi 构建器中找到它们,以及如何利用它们来创建令人惊叹的网页设计。

让我们开始吧!

订阅我们的 Youtube 频道

负边距如何运作

负边距仍然是网页设计和设计中最常用的技术之一。 它可以快速轻松地为您创建的任何网站添加额外的维度。 现在,在 Divi 中,您基本上可以为页面上的任何设计元素添加负边距。 无论您想为部分、行或模块添加重叠,您都可以通过转到设计选项卡在间距设置中找到这些选项。

您可以选择要创建的重叠类型; 从下到上、从上到下、从左到右或从右到左。 考虑元素的 Z 索引也很重要。 由于元素的 Z 索引较高,最常见的重叠发生在从下到上。

变换翻译

查看本教程以查看一些使用负边距创建的出色重叠示例。

WordPress divi主题

转换翻译的工作原理

Transform translate 有一种完全不同的方法,一种更直观的方法。 当您为元素的间距设置添加负边距时,您必须以您选择的单位(像素、视口等)手动输入一个值。 您会看到该值在您的页面上(实时)变为行动,并且您可以继续修改该值。

与负边距相比,transform translate 设计选项更注重视觉效果。 它为您提供了一个表示页面宽度和高度的轴,您可以使用指针将元素定位在页面上的任何位置。 您可以通过转到任何元素的设计选项卡中的转换选项来找到转换转换设计选项。 在那里,您必须启用第二个选项卡。

变换翻译

最大的不同之一 然而,transform translate 和负边距之间的东西是被遗忘的。 如果您使用 transform translate 选项更改元素的位置,则模块占用的初始空间将保留。 对于负边距,情况正好相反。

变换翻译

创建小的重叠? 选择负边距

最高负边距

如果要创建向上重叠,则必须在元素的上边距中添加一个负值。 添加负上边距后,模块下方、同一列和同一行中的任何模块都将跟随。 换句话说; 负边距将适用于特定列中存在的所有模块。

变换翻译

如果您想避免这种情况,您还必须添加一些自定义底部边距。 使用与顶部重叠相同数量的像素(没有减号)。

变换翻译

左右负边距

如果要在元素的左侧或右侧添加负边距,则必须在另一侧添加相同数量的像素(不包括减号)。 如果仅将其添加到一侧,您会看到模块的大小增加:

fiverr建站WordPress程序员

变换翻译

通过将不带减号的相同值添加到另一侧,您可以确保模块保持与以前相同的大小。

变换翻译

创建更大的重叠? 去转换翻译

如果您要创建更大的重叠,最好选择转换转换选项。 它与负边距完全不同。 首先,它没有考虑任何页面结构。 它在视觉上重新定位元素,而不考虑该页面上存在的容器大小。 其次,它可以帮助您将元素准确定位到您想要的位置,而无需手动修改值。

将所有元素添加到部分底部

在设计元素上使用转换转换选项时,您必须记住它会留下最初占用的空间。 在大多数情况下,你想摆脱那个空间,幸运的是,这也是可能的。 首先将模块添加到您的部分底部(在单独的行中),然后使用 transform translate 选项将它们向上重新定位。

独立站选品工具

变换翻译

变换翻译

隐藏溢出和更改部分高度

重新定位部分中的元素后,您可以为部分定义高度。 在底部,您将有相当多的空间被您想要摆脱的重新定位的元素占用。 打开部分设置首先进入溢出设置。 隐藏垂直溢出。 然后,转到您的部分的尺寸设置并为该部分选择匹配的高度(跨不同的屏幕尺寸)。

变换翻译

变换翻译

高质量外链购买

最后的想法

Divi 不断发展的功能有时会使您难以理解两种设计选项之间的差异,从而让您获得相似的结果。 但是,尽管某些选项可能看起来相同,但存在一些差异可以帮助您在两个选项之间做出决定。 在这篇文章中,我们向您展示了两者之间的区别,您可以在 Divi Builder 中的何处找到它们,以及在设计任何类型的网站时如何利用它们来发挥您的优势。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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

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