如何在 Divi 中設計流體英雄部分
已發表: 2021-07-26網站的英雄部分是流體設計的最佳候選者之一。 與在不同斷點處進行調整的傳統響應式設計不同，流體設計可與瀏覽器視口無縫擴展，並使設計在任何設備上保持一致。 畢竟，英雄部分是用戶在網站上看到的第一件事。
您可能已經在之前的關於流體排版、流體模塊和/或流體按鈕的教程中看到了流體設計。 在本教程中，我們將向您展示如何在 Divi 中創建一個完整的流體英雄部分。 創建這種流暢設計的關鍵是為每個使用的模塊添加一個流暢的根字體大小，然後在整個模塊的設置中加入 em 長度單位（相對於根正文字體大小）。
讓我們開始吧！
搶先看
這是我們將在本教程中構建的設計的快速瀏覽。
請注意流體設計如何隨著瀏覽器視口寬度平滑縮放。
免費下載佈局
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。
單擊導入按鈕。
在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。
然後點擊導入按鈕。
完成後，分區佈局將在 Divi Builder 中可用。
讓我們進入教程，好嗎？
你需要什麼開始
首先，您需要執行以下操作：
- 如果您還沒有安裝並激活 Divi 主題。
- 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
- 選擇“從頭開始構建”選項。
之後，您將有一個空白畫布開始在 Divi 中進行設計。
如何在 Divi 中設計流體英雄部分
為了構建流暢的英雄部分，我們將為三個模塊中的每一個添加一個流暢的根字體大小。 這些模塊將構成標題、副標題和按鈕。 然後我們將在模塊設計設置中使用 em 長度單位來確保設計元素與流體根字體大小相關。 然後我們將使用絕對位置和偏移量將圖像定位在頁面的左側。 結果將是一個流暢的英雄部分，它與視口寬度完美地縮放，因此設計在所有設備上都是一致的。
部分設置
首先，讓我們更新該部分的現有設計設置。 打開部分設置並更新以下內容：
- 背景漸變左顏色：#ff2000
- 背景漸變右顏色：#121212
- 梯度方向：45度
- 起始位置：30%
- 結束位置：0%
在設計選項卡下，更新填充：
- 填充：0px 頂部，0px 底部
創建行
接下來，向該部分添加一列行。
行設置
打開行的設置並更新設計選項卡下的以下內容：
- 天溝寬度：1
- 寬度：100%
- 最大寬度：1700px
- 最小高度：100vh（台式機），無（平板電腦和手機）
- 填充：0px 頂部，0px 底部
創建帶邊框的流體標題文本
現在部分和行已完成，我們可以將流體標題文本添加到英雄部分。 我們還將為創意設計元素的文本模塊添加一個流暢的邊框。
添加文本模塊
要創建標題文本和邊框，請向該列添加一個新文本模塊。
文字設置
在內容選項卡下，使用以下 HTML 更新正文內容：
<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>
為了使設計元素流暢，我們首先需要使用 CSS Clamp() 函數為模塊添加一個流暢的根字體大小。 在高級選項卡下，通過以下 CSS 片段：
font-size: clamp(32px, 4.1vw, 70px);
有了流體根字體大小，我們就可以更新設計設置了。 始終使用 em 長度單位很重要，因為 em 長度單位與元素的根字體大小相關。
在設計選項卡下，更新以下標題文本設計設置：
- 標題類型：H1
- 標題字體：蒙特塞拉特
- 標題字體粗細：重
- 標題文字顏色：#ffffff
- 標題文字大小：1em
- 標題字母間距：0.1em
- 標題線高度：1.2em
此外，更新模塊填充如下：
- 填充：1em（上、下、左、右）
要創建流體邊框設計，請更新以下內容：
- 邊框寬度：1em
- 邊框顏色：#ffffff
- 底部邊框顏色：透明
- 左邊框顏色：透明
創建重音邊框
要創建重音邊框，我們可以復制現有的文本模塊。
取出現有的body內容，更新設計設置如下：
- 最大寬度：6.5em
- 高度：3.25em
- 邊框寬度：0.5em
- 邊框顏色：#ff2000
請記住，此重複模塊中包含相同的流體根字體大小。 所以，我們可以使用em長度單位來調整邊框的大小和寬度。 這將確保設計將隨著標題文本模塊的設計而調整。
要定位重音邊框，請添加一個絕對位置，偏移量等於標題文本模塊中的邊框寬度 (1em)。 在高級選項卡下，更新以下位置選項：
- 位置：絕對
- 位置：右上角
- 垂直偏移：1em
- 水平偏移：1em
創建流動字幕正文
在標題文本下方，我們將添加流體字幕正文文本。 由於此文本較小，我們將添加較小的流體根字體大小。
添加新的文本模塊
要創建字幕文本，請在現有標題文本模塊下方添加一個新文本模塊。
您可以添加幾句填充文字，如下所示：
- 正文內容：前庭交流直徑坐 amet quam vehicula elementum sed 坐 amet dui。 Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。
添加流體根字體大小
接下來，我們需要添加一個新的流體字體大小，它更適合較小的文本。 在高級選項卡下，將以下 CSS 片段粘貼到主元素下：
font-size: clamp(14px, 1.4vw, 24px);
文字設計設置
在設計選項卡下，更新以下內容：
- 文字字體粗細：半粗體
- 文字文字顏色：#ffffff
- 文字文字大小：1em
- 文本行高：1.6em
然後更新尺寸和間距如下：
- 最大寬度：19em
- 邊距：底部 2em，自動左，5em 右
創建流體按鈕
要創建流體按鈕，請在字幕文本模塊下方添加一個新按鈕模塊。
然後將按鈕文本更新為“7 天免費試用”。
添加流體根字體大小
接下來，我們需要添加適合按鈕的新流體字體大小。 在高級選項卡下，將以下 CSS 片段粘貼到主元素下：
font-size: clamp(20px, 2.35vw, 40px);
按鈕設計設置
在設計選項卡下，更新以下內容：
- 按鈕對齊：右
- 按鈕文字顏色：#ff2000
- 按鈕背景漸變左側顏色：透明
- 按鈕背景漸變右顏色：#ffffff
- 梯度方向：45度
- 起始位置：25%
- 結束位置：0%
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：0px
- 按鈕字體：蒙特塞拉特
- 按鈕字體重量：重
- 按鈕字體樣式：斜體
- 按鈕圖標：右三角箭頭（見截圖）
- 按鈕圖標位置：左
- 邊距：8em 右
- 填充：頂部 0.2em，底部 0.2em，左側 1.5em，右側 1em
為英雄部分創建圖像
所有的英雄部分內容都在頁面的正確大小上，我們準備將英雄部分圖像添加到左側。 為此，首先在按鈕下添加一個圖像模塊。
打開圖像設置並上傳圖像。
圖像設計設置
在設計選項卡下，更新以下設置：
- 圖像對齊：左（台式機和平板電腦），中心（手機）
- 最大寬度：48%（桌面和平板電腦），70%（手機）
- 填充：4% 左
最後，使用 vmin 長度單位為圖像提供具有偏移量的絕對位置，如下所示：
- 位置：絕對（桌面和平板電腦），相對（手機）
- 位置：左上角（台式機和平板電腦）
- 垂直偏移 30vmin（桌面和平板電腦），0px（手機）
最後結果
這是實時頁面上的最終結果。
以下是流體設計如何隨著瀏覽器視口寬度平滑縮放。
瀏覽器支持
除了 IE 之外，所有主要瀏覽器都非常支持 CSS 箝位（）函數（用於本教程中的流體字體大小）。 有一個奇怪的 safari 錯誤，它在調整瀏覽器窗口時不會動態縮放，但會在頁面加載時正確顯示。 為了解決這個問題，你似乎需要做的就是給每個模塊一個最小高度 0vw。
最後的想法
將流暢的設計添加到英雄部分可以是一種方便的方法，以確保首屏在所有瀏覽器尺寸上看起來都非常一致，而無需在特定斷點處更新設計或使用媒體查詢。
不要忘記查看我們關於流體設計的其他文章，包括如何創建流體排版、流體模塊和流體按鈕。
我期待在評論中收到您的來信。
乾杯!