如何在 Divi 中為提示、信息、警告等創建樣式內容框（免費下載）
已發表: 2021-06-20用於提示、警告和其他重要信息等內容的樣式化內容框是任何網站或博客的便利資產。 它們是展示重要內容的有效且便捷的方式，用戶會喜歡一致的設計。 例如，您可能需要一個內容框設計來突出教程中的關鍵提示或警告用戶潛在問題。
在本教程中，我們將向您展示如何在 Divi 中構建 3 個內容框設計。 這些內容框設計可以輕鬆地使用新圖標、配色方案和/或內容進行調整，以滿足任何需要。 在向您展示如何設計這些框後，我們將向您展示如何使用 Divi 的全局預設，只需點擊幾下即可更輕鬆地部署新的預先設計的內容框。 不需要插件！
讓我們開始吧！
搶先看
今天，我們將在 Divi 中構建這 3 個主要的內容框設計。
通過這 3 個主要的內容框設計，您將能夠輕鬆進行自定義（如圖標、顏色和文本），為任何場合製作無窮無盡的內容框設計。
以下是我們在下面的免費下載中包含的 36 個示例。
免費下載佈局
要了解所有 36 個內容框設計，您首先需要使用下面的按鈕下載佈局。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。
單擊導入按鈕。
在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。
然後點擊導入按鈕。
完成後，分區佈局將在 Divi Builder 中可用。
讓我們進入教程，好嗎？
你需要什麼開始
首先，您需要執行以下操作：
- 如果您還沒有安裝並激活 Divi 主題。
- 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
- 選擇“從頭開始構建”選項。
之後，您將有一個空白畫布開始在 Divi 中進行設計。
在 Divi 中創建內容框設計
在開始設計內容框之前，讓我們在 Divi Builder 的默認部分添加一個新的單列行。
內容框設計#1
要創建第一個內容框，請向該列添加一個模糊模塊。
在內容選項卡下，更新以下內容：
- 使用圖標：是
- 圖標：見截圖
- 背景顏色：#ffffff
- 背景漸變左顏色：#00529b
- 背景漸變右顏色：#bde5f8
- 梯度方向：90度
- 起始位置：3em
- 結束位置：0%
在設計選項卡下，更新圖標樣式如下：
- 圖標顏色：#ffffff
- 圖像/圖標對齊方式：左
- 使用圖標字體大小：是
- 圖標字體大小：2em
接下來，按如下方式更新文本樣式：
- 標題文字顏色：#00529b
- 標題文字大小：1.5em
- 標題行高度：2em
- 正文顏色：#bde5f8
- 正文大小：1em
- 車身線高：2em
一旦文本樣式就位，更新大小和填充如下：
- 內容寬度：100%
- 最大寬度：700px
- 模塊對齊：居中
- 填充：頂部 2em，底部 2em，左側 5em，右側 2em
然後為模糊添加一個微妙的框陰影，如下所示：
- 盒子陰影：見截圖
- 框陰影垂直位置：0px
- 框陰影模糊強度：88px
- 框陰影傳播強度：-10px
- 陰影顏色：rgba(0,0,0,0.17)
在高級選項卡下，我們將為模糊圖標提供自定義樣式，使其具有圓形形狀，背景和邊框顏色與之前使用的左側背景漸變顏色相匹配。 我們還將使用絕對位置定位圖標，以便我們可以將其準確放置在我們想要的位置，而不會佔用文檔中的任何實際空間。
要添加自定義樣式，請將以下 CSS 代碼粘貼到 Blurb Image CSS 框中：
position:absolute; margin-bottom: 0px; border: 0.5em solid #00529b !important; border-radius:50%; background: #00529b; transform: translateX(-3.75em);
注意：當更改內容框（或模糊模塊）的配色方案時，我們還需要更新在模糊圖像 CSS 中用於圖標邊框和背景的顏色。
讓我們看看最終的結果。
內容框設計#2
要創建我們的第二個內容框設計，請複制之前的模糊模塊以快速啟動設計，以便我們可以進行一些修改。
對於此設計，我們將使用 CSS 網格屬性將圖標左側的圖標垂直居中。
在設計選項卡下，將 Blurb Image CSS 替換為以下內容：
margin-bottom: 0px;
然後將以下 CSS 添加到 Blurb Content CSS 框中：
display: grid; align-items: center; justify-content: center; grid-template-columns: 5em auto; grid-gap: 2em;
網格中左列（持有圖標的列）的寬度設置為5em ，包含標題和正文文本的右列設置為auto 。 我們需要將左側漸變顏色的寬度與持有圖標的5em寬度網格列相匹配。 為此，請更新以下內容：
- 起始位置：5em
在設計選項卡下，更新圖標對齊方式和大小：
- 圖像/圖標對齊方式：居中
- 圖標字體大小：3em
現在我們不需要左邊的填充，所以把它去掉。
現在一切都應該排列整齊。 查看最終結果。
內容框設計#3
要創建第三個內容框設計，請複制我們剛剛完成的第二個簡介模塊（內容框）。
複製第二個簡介後，打開重複的簡介設置。
在設計選項卡下，更改圖標顏色：
- 圖標顏色：rgba(255,255,255,0.3)
接下來，我們將通過將自定義 CSS 添加到 before 偽元素（這基本上允許您在 blurb 模塊元素之前附加額外的設計和/或內容）來在圖標上添加垂直標籤文本。
要添加標籤，請將以下 CSS 粘貼到 Before CSS 框：
content: 'key tip'; bottom:50%; font-size: 1em; line-height: 1em; letter-spacing: 0.4em; position:absolute; transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important; transform-origin: bottom left; color: #fff; font-family: inherit; font-weight: bold; text-transform: uppercase; z-index:1;
我們還將旋轉圖標以匹配旋轉的垂直文本。 為此，請將以下 CSS 添加到 Blurb Image CSS 框中：
margin-bottom: 0px; transform: rotateZ(-90deg);
這是最終結果。
更新設計
通過更改正文大小來更新內容框元素的大小
每個內容框都是使用em長度單位構建的（ em相對於元素的根正文字體大小）。 因此，在 Divi 的內置設計設置中調整正文大小時，內容框的大小將無縫縮放。
更新自定義 CSS 顏色
對於內容框設計 #1，我們使用自定義 CSS 為圖標添加了自定義背景和邊框顏色。 確保更新用於邊框和背景屬性的顏色以匹配您自己設計的配色方案。
更新標籤文本
對於內容框設計 #3，我們在before偽元素上添加了一個帶有自定義 CSS 的標籤。 要更新文本，只需更改 Before CSS 框中的 content 屬性值。
使內容框在 Divi 中可重用
將模塊保存到 Divi 庫
使模塊在 Divi 中可重用的主要方法有兩種。 第一種方法是將模塊（或任何元素）保存到 Divi 庫。
將元素保存到庫中後，您可以在向頁面添加新元素時在 Divi 庫中找到它。
使用全局預設
使模塊在 Divi 中可重用的第二種主要方法是為該模塊創建全局預設。 將模塊的設計保存為全局預設後，您可以輕鬆地將該全局預設添加到同一模塊的任何其他實例中。
在這種情況下，我們可以打開每個內容框（或模糊模塊）的設置，並為每個內容框創建一個新的全局預設。 為此，請打開 Blurb 模塊設置並單擊頂部的預設選項。 然後將模塊設置從自定義樣式轉換為新的預設。
隨意命名新預設並保存。
對要創建的每個模糊模塊預設重複這些步驟。
要在未來創建更多內容框，只需添加一個新的模糊模塊並選擇您要使用的圖標即可。 然後通過單擊頂部的預設下拉菜單並選擇您選擇的預設來激活任何上傳的預設。
最終結果
這是我們構建的 3 個主要內容框設計的最終視圖。
這裡有 36 種設計，您可以通過我們在上面的免費下載中包含的一些簡單的自定義來製作。
最後的想法
我們創建的樣式內容框可以成為任何網站或博客的有用設計資產。 您可以利用 Divi 中強大的設計選項來調整內容框以適應任何設計。 此外，通過將它們保存並上傳到 Divi 庫和/或創建全局預設的能力，您只需點擊幾下即可隨時部署這些內容框。 希望這些會派上用場。
我期待在評論中收到您的來信。
乾杯!