在 Divi 中使用溢出選項的 3 種有用方法

Divi 的內置溢出選項使向頁面上的任何元素添加溢出 css 屬性（即可見、隱藏、滾動）變得非常簡單。 這有助於輕鬆創建獨特的設計和可滾動的內容。 在這篇文章中，我將介紹這些溢出選項的實際作用。 而且，我將介紹在您自己的 Divi 站點上使用溢出的三種有用方法。

讓我們開始吧。

了解 Divi 的溢出選項

Divi 的溢出選項允許您將元素的 css 溢出屬性設置為以下值之一：

1. 默認 - 默認值是可見的（見下文）。
2. 可見 - 溢出的內容將保持可見，並且在擴展到框外時不會被剪裁。 由於這是 Divi 中的默認設置，因此您很少需要選擇它。
3. 滾動 - 溢出的內容將被隱藏，但用戶將能夠垂直或水平滾動瀏覽隱藏的內容。
4. 隱藏 - 框外溢出的內容將被隱藏（無法滾動）
5. 自動 - 此選項將在必要時啟用滾動功能（即內容超出框）。 這對於需要在較小瀏覽器上具有滾動功能的具有設定高度或寬度的設計會派上用場。

Divi 具有水平和垂直溢出的溢出選項，允許您為每個設置不同的屬性值。 當您想向元素添加垂直滾動功能但又不希望滾動條也水平顯示時，這會派上用場。

以下是從本教程中的設計中提取的一些快速插圖，可幫助您了解溢出選項的工作原理。

溢出可見（默認）

在此示例中，已定位在行容器外部的內容保持可見，這是 Divi 中所有元素的默認設置。

溢出隱藏

將溢出隱藏屬性添加到行後，框外的內容將被剪裁併完全隱藏起來。

溢出滾動

使用溢出滾動允許您隱藏框容器外的內容（很像溢出隱藏）。 主要區別在於出現的滾動條允許用戶滾動瀏覽超出容器限制的內容。

例如，這裡是一個高度為 400px 的文本模塊。 文本模塊的內容超出了文本模塊，但默認情況下保持可見。

但是一旦將垂直溢出滾動屬性添加到文本模塊，就會出現滾動條，允許用戶滾動隱藏的內容。

現在您對溢出選項有了更好的理解，讓我們深入構建一些在現實生活中使用它們的有用方法的工作示例。

訂閱我們的 YouTube 頻道

在 Divi 中使用 Divi 溢出選項的 3 種有用方法

#1 使用溢出隱藏來剪輯獨特設計的溢出內容

為了了解如何使用溢出隱藏屬性，我們將創建一個帶有溢出文本和溢出圖像的快速示例設計。 然後我們將看到在將我們的行設置為溢出隱藏時設計如何變化。

首先，創建一個具有一列行的常規部分。 在我們開始添加模塊之前，讓我們為該部分添加以下填充：

自定義填充：12vw 頂部，12vw 底部

然後按如下方式更新行設置：

寬度：80vw
最大寬度：80vw
填充：0px 頂部，0px 底部
盒子陰影：見截圖
框陰影模糊強度：80px

然後向該行添加一個文本模塊並更新以下文本模塊設置：

首先在內容框中添加一個 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)

現在，為了使文本溢出行內容區域，我們需要使用自定義邊距。 將以下自定義邊距添加到文本模塊，使其在行上方（垂直）和行的每一側（水平）溢出。

邊距：-6vw 頂部，-10vw 左，-10vw 右

接下來，在您剛剛創建的模塊下方添加另一個文本模塊並更新以下內容：

內容：

<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 右

現在，讓我們添加一個溢出行外的圖像。 在兩個文本模塊下創建一個新的圖像模塊，然後上傳您選擇的圖像。

然後按如下方式更新圖像設置：

最大寬度：35vw
邊距：-12vw 頂部，-8vw 底部，-5vw 左
盒子陰影：見截圖
框陰影水平位置：-40px
框陰影垂直位置：-50px
陰影顏色：rgba(0,0,0,0.17)

設計時將行設置為溢出可見（默認）

現在讓我們看看保持行溢出設置為可見（默認）的設計。

如您所見，這個默認的溢出可見選項非常適合創建一些漂亮而現代的設計。

將行設置為溢出隱藏的設計

現在讓我們看看當我們對行使用 Overflow Hidden 屬性時會發生什麼。 打開行設置並更新以下內容：

水平溢出：隱藏
垂直溢出：隱藏

這是結果。

如您所見，溢出的內容（頂部標題和圖像）現在被剪切和隱藏以創建獨特的設計。 通過這種設置，您可以輕鬆利用變換選項來縮放和移動元素，使設計恰到好處。

#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>

然後更新文本模塊設計設置如下：

文字字體：Lato

鏈接文字顏色：#333333
鏈接文字大小：18px

有序列表文本顏色：
有序列表文本大小：20px
有序列表行高：1.8em
有序列表樣式類型：十進制前導零

標題 3 字體粗細：超粗體
標題 3 文字大小：50px
最大寬度：500px
填充：頂部 3%，底部 3%，左側 8%，右側 8%

在我們給出高度和溢出滾動之前，這是文本模塊的樣子。

現在，更新最大高度為 400px 的文本模塊。 由於文本模塊的默認溢出值是可見的，您會注意到文本在模塊下方溢出。

我們現在需要做的就是將垂直溢出設置為滾動，如下所示：

垂直溢出：滾動

這是最終的設計。

有關如何在 Divi 網站上使用垂直溢出滾動的更多示例，請查看以下帖子：

• 如何使用 Divi 的新溢出選項創建滾動畫廊模型
• 如何在 Divi 中設計可滾動的最近帖子小部件區域

#3 使用溢出滾動允許用戶水平滾動內容

使用溢出滾動進行水平滾動是另一種讓您的內容從一個簡潔的位置訪問的方法。 此外，這也是在沒有插件的情況下在移動設備上整合側滑功能的好方法。

為了向您展示如何做到這一點，我們將一起構建一個快速示例。

首先，創建一個具有一列行的常規部分。

然後向該行添加一個模糊模塊。

您可以用新圖像或圖標替換默認圖像。 然後通過一些調整更新設計設置：

文本對齊：居中
標題字體：Lato
標題字體粗細：重
填充：左 3%，右 3%

將簡介模塊複製 5 次，以便在行列中總共有 6 個簡介。

然後使用以下自定義 CSS 將行設置更新到列主元素。

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

這將使您的宣傳欄變成一個水平網格佈局，其中有 6 列，每列的寬度為容器的 50%（或在本例中為行）。 這意味著兩個簡介/列將佔據行內的空間。 其他 4 個模塊將延伸到行外到右側。 這是溢出滾動屬性派上用場的地方。 更新以下溢出選項：

水平溢出：滾動

現在您可以根據需要調整行的寬度，兩個簡介將始終很好地對齊。 這是最終的設計。

我在行中添加了一個框陰影，以便您可以更好地看到內容框。 請注意，在用戶向右滾動之前，最初將如何顯示兩個簡介。

有關更多信息，請查看有關創建水平刷卡的完整帖子。

最後的想法

如今，在典型網格佈局之外的重疊元素和定位元素變得越來越普遍。 大多數情況下，這純粹是出於設計目的。 了解如何使用 Divi 的溢出選項將幫助您了解如何隱藏或顯示容器外的內容以創建這些獨特的設計。 並且，理解溢出滾動對於將可滾動內容添加到您的網站也會派上用場。

我希望這篇文章有助於闡明溢出屬性以及如何在下一個 Divi 項目中使用它。

我期待在評論中收到您的來信。

乾杯!