WordPress divi主题

在 Divi 中使用溢出选项的 3 种有用方法

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

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

Divi 的内置溢出选项使向页面上的任何元素添加溢出 css 属性(即可见、隐藏、滚动)变得非常简单。 这有助于轻松创建独特的设计和可滚动的内容。 在这篇文章中,我将介绍这些溢出选项的实际作用。 而且,我将介绍在您自己的 Divi 网站上使用溢出的三种有用方法。

google广告开户

让我们开始吧。

了解 Divi 的溢出选项

  divi 溢出选项

Divi 的溢出选项允许您将元素的 css 溢出属性设置为以下值之一:

  1. 默认 – 默认值是可见的(见下文)。
  2. 可见 – 溢出的内容将保持可见,并且在扩展到框外时不会被剪裁。 由于这是 Divi 中的默认设置,因此您很少需要选择它。
  3. 滚动 – 溢出的内容将被隐藏,但用户将能够垂直或水平滚动浏览隐藏的内容。
  4. 隐藏 – 框外溢出的内容将被隐藏(无法滚动)
  5. 自动 – 此选项将在必要时启用滚动功能(即内容超出框)。 这对于需要在较小浏览器上具有滚动功能的设置高度或宽度的设计非常有用。

Divi 具有水平和垂直溢出的溢出选项,允许您为每个溢出设置不同的属性值。 当您想向元素添加垂直滚动功能但又不希望滚动条水平显示时,这会派上用场。

以下是从本教程中的设计中获取的一些快速插图,可帮助您了解溢出选项的工作原理。

溢出可见(默认)

在此示例中,位于行容器之外的内容仍然可见,这是 Divi 中所有元素的默认设置。

  divi 溢出选项

  divi 溢出选项

溢出隐藏

将溢出隐藏属性添加到行后,框外的内容将被裁剪并完全隐藏在视图之外。

WordPress divi主题

  divi 溢出选项

溢出滚动

使用溢出滚动允许您隐藏盒子容器外的内容(很像溢出隐藏)。 主要区别在于出现了一个滚动条,允许用户滚动浏览超出容器限制的内容。

例如,这里是一个高度为 400px 的文本模块。 文本模块的内容超出了文本模块,但默认保持可见。

  divi 溢出选项

但是,一旦您将垂直溢出滚动属性添加到文本模块,就会出现滚动条,允许用户滚动浏览隐藏的内容。

  divi 溢出选项

现在您已经更好地理解了溢出选项,让我们深入构建一些在现实生活中使用它们的有用方法的工作示例。

订阅我们的 Youtube 频道

在 Divi 中使用 Divi 溢出选项的 3 种有用方法

#1 使用溢出隐藏来剪辑溢出内容以获得独特的设计

要了解如何使用溢出隐藏属性,我们将创建一个带有溢出文本和溢出图像的快速示例设计。 然后我们将看到将行设置为溢出隐藏时设计如何变化。

fiverr建站WordPress程序员

首先,创建一个具有一列行的常规部分。 在我们开始添加模块之前,让我们为该部分添加以下填充:

自定义填充:12vw 顶部,12vw 底部

  divi 溢出选项

然后按如下方式更新行设置:

宽度:80vw
最大宽度:80vw
内边距:0px 顶部,0px 底部
盒子阴影:见截图
盒子阴影模糊强度:80px

独立站选品工具

  divi 溢出选项

然后将文本模块添加到该行并更新以下文本模块设置:

首先在内容框中添加一个h2标题如下:

<h2>Overflow</h2>

然后更新设计设置如下:

标题 2 字体:Lato
标题 2 字体粗细:粗体
标题 2 字体样式:TT
标题 2 文本对齐:居中
标题 2 文本颜色:#dddddd
标题 2 文字大小:15vw
标题 2 字母间距:0.1em
标题 2 文字阴影:见截图
标题 2 文本阴影颜色:rgba(0,0,0,0.05)

高质量外链购买

  divi 溢出选项

现在,要使文本溢出行内容区域,我们需要使用自定义边距。 将以下自定义边距添加到文本模块,使其在行上方(垂直)和行的每一侧(水平)溢出。

边距:-6vw 顶部,-10vw 左侧,-10vw 右侧

  divi 溢出选项

接下来,在您刚刚创建的文本模块下方添加另一个文本模块并更新以下内容:

JasperAI 10000字免费额度试用

内容:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(顺便说一句,像这样的代码片段是利用溢出滚动选项的好方法。)

文字字体:Lato
文本文本对齐:右
文字文字大小:24px(桌面),16px(手机)
文字行高:1.3em
最大宽度:50%
模块对齐:右
填充:4vw 右

  divi 溢出选项

现在,让我们添加一个溢出到行外的图像。 在两个文本模块下方创建一个新的图像模块,然后上传您选择的图像。

WordPress备份工具updrafplus

然后更新图像设置如下:

最大宽度:35vw
边距:-12vw 顶部,-8vw 底部,-5vw 左侧
盒子阴影:见截图
盒子阴影水平位置:-40px
盒子阴影垂直位置:-50px
阴影颜色:rgba(0,0,0,0.17)

  divi 溢出选项

将行设置为溢出可见的设计(默认)

现在让我们看看保持我们的行溢出设置为可见(默认)的设计。

  divi 溢出选项

如您所见,此默认溢出可见选项非常适合创建一些漂亮而现代的设计。

将行设置为溢出隐藏的设计

现在让我们看看当我们对行使用 Overflow Hidden 属性时会发生什么。 打开行设置并更新以下内容:

水平溢出:隐藏
垂直溢出:隐藏

  divi 溢出选项

这是结果。

  divi 溢出选项

如您所见,溢出的内容(顶部标题和图像)现在被剪裁和隐藏以创建独特的设计。 通过此设置,您可以轻松利用变换选项来缩放和移动元素,以使设计恰到好处。

#2 使用溢出滚动允许用户垂直滚动内容

下一个示例介绍垂直溢出滚动。 此溢出选项可用于将可滚动内容添加到链接或资源列表中。 您可以将任何模块或行转换为可滚动内容的容器。 这是使用文本模块的方法。

创建具有单列行的常规部分。 然后添加一个文本模块,内容如下:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

  divi 溢出选项

然后更新文本模块设计设置如下:

文字字体:Lato

  divi 溢出选项

链接文字颜色:#333333
链接文字大小:18px

  divi 溢出选项

有序列表文本颜色:
有序列表文本大小:20px
有序列表行高:1.8em
有序列表样式类型:小数前导零

  divi 溢出选项

标题 3 字体粗细:超粗体
标题 3 文字大小:50px
最大宽度:500px
填充:顶部 3%,底部 3%,左侧 8%,右侧 8%

  divi 溢出选项

这是在我们给出高度和溢出滚动之前文本模块的样子。

  divi 溢出选项

现在,将文本模块更新为最大高度为 400 像素。 由于文本模块的默认溢出值是可见的,您会注意到模块下方的文本溢出。

  divi 溢出选项

我们现在需要做的就是将垂直溢出设置为滚动,如下所示:

垂直溢出:滚动

  divi 溢出选项

这是最终的设计。

  divi 溢出选项

有关如何在 Divi 网站上使用垂直溢出滚动的更多示例,请查看以下帖子:

#3 使用溢出滚动允许用户水平滚动浏览内容

使用溢出滚动进行水平滚动是另一种让您的内容可以从一个简洁的位置访问的方法。 此外,它也是在没有插件的情况下在移动设备上整合侧滑功能的好方法。

为了向您展示如何做到这一点,我们将一起构建一个快速示例。

首先,创建一个具有一列行的常规部分。

然后在该行中添加一个简介模块。

您可以用新图像或图标替换默认图像。 然后通过一些调整来更新设计设置:

文字对齐:居中
标题字体:Lato
标题字体粗细:重
填充:左侧 3%,右侧 3%

  divi 溢出选项

将简介模块复制 5 次,这样您的行列中总共有 6 个简介。

  divi 溢出选项

然后使用以下自定义 CSS 将行设置更新到列主元素。

display: grid;
grid-template-columns: repeat(6, 50%);

这将使您的简介列进入水平网格布局,每列 6 列,宽度为容器的 50%(或在本例中为行)。 这意味着两个简介/列将占据行内的空间。 其他 4 个模块将在行外延伸到右侧。 这是溢出滚动属性派上用场的地方。 更新以下溢出选项:

水平溢出:滚动

  divi 溢出选项

现在您可以根据需要调整行的宽度,并且两个简介将始终很好地对齐。 这是最终的设计。

我在行中添加了一个框阴影,以便您可以更好地看到内容框。 请注意,在用户向右滚动之前,最初会如何显示两个简介。

  divi 溢出选项

有关更多信息,请查看有关创建水平刷卡的完整帖子。

最后的想法

如今,典型网格布局之外的重叠元素和定位元素变得越来越普遍。 大多数情况下,这纯粹是出于设计目的。 了解如何使用 Divi 的溢出选项将帮助您了解如何隐藏或显示容器外部的内容以创建这些独特的设计。 而且,了解溢出滚动也可以方便地将可滚动内容添加到您的网站。

我希望这篇文章有助于阐明溢出属性以及如何将其用于下一个 Divi 项目。

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

干杯!