如何創建響應式 Fluid Divi 模塊

為了進一步簡化為 Divi 模塊實現一致響應式設計的過程，我們可以應用流體網頁設計的實踐。 與更傳統的響應式設計方法不同，流體網頁設計不會在不同的斷點處中斷或突然跳轉到不同的大小/樣式。 它結合了相對於視口寬度的響應長度單位，因此設計可以流暢地調整（或縮放），使設計在所有設備上保持一致。

在本教程中，我們將向您展示如何創建流暢的 Divi 模塊。 使用類似的流體設計實踐來創建流體排版和/或流體按鈕，我們將創建一個流體 Divi 模塊，它將與瀏覽器視口無縫縮放。 正如我們將發現的，秘密組合是向模塊添加具有相對（或流體）長度單位的根體字體大小，然後在整個模塊的需要時進行設置。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

這是一個演示此流體模塊功能的代碼筆。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

如何創建響應式 Fluid Divi 模塊

行

首先，在默認的常規部分中創建一個新的單列行。

打開行設置，並更新以下內容：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：自動
• 最大寬度：100%
• 填充：5vw 頂部，5vw 底部

設計流暢的號召性用語模塊

儘管幾乎可以將相同的流體設計技術添加到任何 Divi 模塊中，但我們將在本教程中使用 Divi 的號召性用語模塊之一。

在列/行內添加一個新的號召性用語模塊。

內容設置

在內容設置下，添加一個模擬按鈕鏈接 URL 並更新背景顏色如下：

• 按鈕鏈接網址：#
• 背景顏色：#5e6472

向模塊添加流體根字體大小

在設計流體模塊時，我們需要為模塊添加流體根字體大小。 一旦將其添加到模塊中，此根字體大小將使用 em 長度單位動態合併到我們模塊設計的其餘部分中。

要將流體根字體大小添加到模塊，請轉到高級選項卡並將以下自定義 CSS 添加到主元素：

font-size: clamp(16px, 2vw, 24px);

對於這種字體大小，我們使用 CSS Clamp() 函數來設置最小字體大小、流體字體大小（需要時）和最大字體大小。

使用 em 長度單位值覆蓋具有默認間距的任何元素

儘管不是絕對必要的，但為了獲得真正的模塊流體設計，我們需要使用該屬性的 em 長度單位值覆蓋模塊當前使用的任何默認（幕後）間距。 您可以通過使用瀏覽器開發工具檢查您的元素來識別這些。 在這種情況下，號召性用語模塊在促銷說明和促銷標題元素上都有一個底部填充。 由於底部填充屬性使用像素 (px) 長度單位，我們需要使用 em 長度單位覆蓋每個單位，該單位將合併我們剛剛添加到主元素的根正文字體大小。

使用 em 長度單位更新設計

現在我們的模塊的流體根字體大小已經到位，我們需要做的就是使用 em 長度單位更新模塊的設計。 因為 em 長度單位是相對於根字體大小的，任何使用 em 長度單位的設計都會繼承字體大小的流動性，並在需要時隨字體大小流暢地縮放。

文章主體

我們之前添加的自定義根字體大小是在考慮正文的情況下有目的地創建的。 因此，我們可以為正文文本分配一個值 1em，它繼承了根字體大小的確切值。 我們也可以添加一個 body line-height。 為此，請更新以下內容：

• 正文大小：1em
• 車身線高：1.8em

標題文字

對於模塊的標題文本元素，我們可以使用 em 長度單位給它一個更大的尺寸。 更新以下內容：

• 標題文字大小：1.7em
• 標題行高度：1.3em

為了讓您了解標題文本的實際大小，我們只需將 em 長度值乘以根字體值即可。 請記住，根字體大小使用clamp() 來建立最小(16px)、流體(2vw) 和最大(24px) 字體大小。 因此最小標題文本大小將是 16px 的 1.7 倍，接近 27.2px。 流體字體大小將是 2vw 的 1.7 倍（視口寬度的 2%）。 最大字體大小將是 24px 的 1.7 倍，接近 69.36px。

按鈕設計

該模塊的第三個元素是按鈕。 我們可以使用 em 長度單位值更新按鈕的設計設置，以合併流體設計。
更新以下按鈕設置：

• 按鈕文字大小：1.3em
• 按鈕邊框寬度：0.12em
• 按鈕邊框半徑：1.5em
• 按鈕字母間距：0.1em
• 按鈕填充：頂部 0.1em，底部 0.1em，左側 2em，右側 2em

尺寸和間距

為了確保模塊具有流體尺寸和流體間距，我們還需要對這些值使用 em 長度單位。

更新以下大小和間距設置：

• 最大寬度：40em
• 最小高度：0vw
• 邊距：頂部 0.5em，底部 0.5em，自動左，自動右
• 填充：頂部 2.5em，底部 2.5em，左側 2em，右側 2em

結果

現在讓我們看看我們的流體模塊在實時頁面上調整瀏覽器寬度時的結果。

使用 CSS 網格在一行中添加多個流體模塊

為了將多個相鄰的流體模塊添加到一行中，我們需要確保我們的流體模塊設計不受任何父容器寬度的限製或阻止。 換句話說，我們希望模塊的父容器（列）設置為 auto 以便它隨著模塊的大小而縮放。 我們可以在列級別使用 CSS Grid 來設置網格中的每個模塊，每列都有一個自動寬度。

調整模塊大小和間距

在為模塊創建 CSS 網格之前，我們需要將模塊的最大寬度和邊距調整為更適合具有兩個模塊的兩列佈局的大小。

打開模塊的設置並更新以下內容：

• 文本對齊方式：左
• 最大寬度：24em
• 邊距：左 0.5em，右 0.5em

複製模塊

現在復制模塊以在同一列中創建另一個。

將 CSS 網格添加到列

現在我們可以將自定義 CSS 添加到列中以創建模塊的 CSS 網格。

在高級選項卡下，將以下 CSS 添加到桌面視圖的主元素：

display:grid;
grid-template-columns: auto auto;
justify-content:center;

然後將以下 CSS 添加到手機視圖的主元素中：

display:grid;
grid-template-columns: auto;
justify-content:center;

這會將兩個模塊設置在桌面上的兩列網格中（每個都有一個自動寬度）。 然後在電話上，模塊將返回到一列（自動寬度）網格。

結果

現在看看結果。

最終結果

流體模塊完成後，您可以使用內置設計設置更新模塊樣式，為其提供自定義字體、顏色等。

這是使用不同字體、字體顏色、按鈕顏色和背景顏色的最終結果。

最後的想法

正如我們在本教程中所看到的，在 Divi 模塊上結合流體設計是一種方便的方法，可以確保模塊在所有瀏覽器尺寸上看起來美觀且一致，而無需在特定斷點處更新設計的麻煩。

不要忘記查看我們關於流體設計的其他文章，包括我們創建流體排版和流體 Divi 按鈕的指南。

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

乾杯!