使用 Divi 的變換控件創建獨特的 Blurb 模塊佈局
已發表: 2019-03-22Divi 的 Transform 控件可以非常輕鬆地定位和設置頁面元素的樣式，以創建獨特的佈局。 Divi 的簡介模塊是在網站上展示項目的最常見元素之一。 所以，我想我會展示如何通過創建幾個具有模糊模塊的獨特佈局來使用這些變換效果。 當然，您可以使用邊距和填充來完成類似的定位，但這個過程會更加複雜，而且沒有那麼有趣。 此外，變換控件允許您添加額外的樣式以縮放和旋轉您的簡介，以獲得更獨特的設計。
在本教程中，我將向您展示如何使用 Divi 的變換控件以創造性的方式定位和旋轉模糊。
讓我們開始吧。
入門
對於本教程，您真正需要的只是 Divi。 要進行設置，請繼續創建一個新頁面。 給你的頁面一個標題，並在前端部署Divi builder，從頭開始構建一個頁面。
現在您可以開始了。
創建 Blurb 佈局設計 #1
在第一個佈局設計中，我們將使用兩個不同的行來構建我們的簡介。 然後我們將使用 Divi Transform 選項來縮放和定位模糊模塊以創建獨特的模糊模塊佈局。
創建第一行
首先，創建一個常規部分，然後為該行添加以下列佈局：1/2 1/6 1/6 1/6
添加文本模塊並為其設置樣式
在左側的1/2列中，添加一個文本模塊，內容如下：
<h2>Our Services</h2> <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>
然後更新以下設計設置：
背景顏色：#ffffff
寬度：500px
自定義邊距（桌面）：-70px 左
自定義邊距（平板電腦）：左 20 像素
自定義填充：頂部 20 像素，底部 20 像素
更新部分填充
接下來，我們需要為我們的部分添加一些填充。 打開部分設置並更新以下內容：
自定義填充：20vw 頂部
更新第一行的設置
接下來，按如下方式更新行設置：
天溝寬度：1
自定義填充：10vw 頂部，0px 底部
邊框寬度：5px
邊框顏色：#eeeeee
添加第二行
接下來在您剛剛自定義的行下添加另一行。 給它一個六列佈局。
創建和設計 Blurb 模塊
現在是時候開始創建我們最終將使用變換控件定位的模糊模塊。 添加您創建的第一（頂）行的模糊模塊第 2 列。
在簡介設置中，刪除內容並使用“服務”一詞更新標題文本。 然後單擊以使用圖標而不是圖像。 在這個例子中，我使用的是雲圖標。
更新其餘的模糊設置，如下所示：
圖標顏色：#ffffff
圓圈圖標：是
圓圈顏色：#5e89fb
標題字體：Nunito
標題文本對齊：居中
標題文字大小：16px
自定義填充：1vw 頂部，1vw 底部，1vw 左，1vw 右
然後通過將以下 CSS 添加到高級選項卡下的 Blurb Image CSS 框來更新模糊圖標下的默認邊距：
margin-bottom: 5px
接下來，複製您剛剛創建的模糊模塊並將其粘貼到每一列中，確保在頂行的第 3 列中有兩個模糊模塊，並且在第二行中將第 5 列和第 6 列留空。
添加變換效果以縮放和定位模糊
現在我們準備好使用變換控件來定位和縮放宣傳語，使其成為獨特的設計。
首先，打開頂行第 2 列中的模糊設置並更新變換控件，如下所示：
變換比例 X 軸：242%
變換比例 Y 軸：242%
變換 平移 X 軸：-96px
變換 平移 Y 軸：-44px
接下來，更新第一行第 3 列頂部 Blurb 模塊的設置，如下所示：
變換比例 X 軸：192%
變換比例 Y 軸：192%
變換 平移 X 軸：-70px
變換 平移 Y 軸：-13px
然後，更新頂行第 4 列中的模糊模塊，如下所示：
變換比例 X 軸：158%
變換比例 Y 軸：158%
Transform Translate X 軸：33px
變換 平移 Y 軸：-13px
接下來，更新頂行第 3 列中的底部模糊模塊，如下所示：
變換比例 X 軸：132%
變換比例 Y 軸：132%
變換 平移 X 軸：89px
變換 平移 Y 軸：39px
然後給它一個下面的背景顏色，為一個微妙的設計元素在行邊框中創建一個中斷：
背景顏色：#ffffff
就是這樣！
對於額外的設計元素，您可以逐漸增加整個佈局中使用的每個圖標上圓圈顏色的不透明度。
移動調整
要調整平板電腦和手機顯示器的導語模塊佈局，我們可以簡單地將轉換效果設置回原始狀態，以便導語恢復其原始大小並很好地定位在列內。 為此，我們可以使用 Divi 的多選功能。 由於可能很難單擊已使用 transform 屬性定位的模塊，因此現在是在構建器設置中啟用網格模式的好時機。 這將允許您在原始位置看到模糊模塊。 進入網格模式後，繼續按住 ctrl 或 cmd，然後單擊每個具有轉換效果的模塊。 然後單擊所選任何模塊的齒輪圖標以打開元素設置模式。
在元素設置模式中，更新以下內容：
變換比例 X 軸：100%
變換比例 Y 軸：100%
變換 平移 X 軸：0px
變換 平移 Y 軸：0px
這將恢復平板電腦和手機顯示器上的原始位置和比例。
最後結果
這是最終的設計。
創建 Blurb 模塊佈局 #2
在下一個示例中，我將使用 Divi 的縮放、平移和旋轉變換選項向您展示一個獨特的模糊模塊佈局。 我還將添加一個額外的 CSS 片段，為每個簡介添加透視圖。 這是如何做到的。
創建標題
首先，添加一個具有一列行的新常規部分。 然後將文本模塊添加到具有以下內容的行：
<h2>Our Process</h2> <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>
然後更新其餘的文本模塊設置，如下所示：
標題 2 字體：Nunito
標題 2 字體粗細：半粗體
標題 2 文字大小：50px
標題 2 字母間距：7px
寬度：500px
使用六列行創建 Blurb 佈局
這照顧了標題。 現在是時候為我們的模糊模塊佈局添加行了。 繼續並在當前行的正下方創建一個具有六列佈局的新行。
設置 Blurb 模塊的樣式
在第一列中，添加一個新的模糊模塊並更新設置如下：
刪除內容框中的正文，並使用“Step”一詞更新標題文本。
然後單擊以使用圖標並選擇圓形檢查圖標。
為 Blurb 設置白色背景色，如下所示：
背景顏色：#ffffff
然後更新設計設置：
圖標顏色：#ffffff
圓圈圖標：是
圓圈顏色：#3d0dad
標題字體：Nunito
標題字體粗細：粗體
標題字體樣式：TT
標題文本對齊：居中
標題字母間距：4px
然後，給blurb一個盒子陰影，如下所示：
盒子陰影：見截圖
陰影顏色：rgba(0,0,0,0.12)
最後，將旋轉變換效果添加到模糊模塊：
Transform 旋轉 X 軸：-3deg
Transform 旋轉 Y 軸：-10deg
Transform 旋轉 Z 軸：31deg
這處理了我們的第一個模糊模塊。
更新行設置
現在在我們開始復制我們的模糊模塊之前，我們需要按如下方式更新行設置：
天溝寬度：2
自定義填充：11vw 頂部，0px 底部
這將有助於在佈局中分隔宣傳語。
複製和設計其餘的 Blurbs
現在我們準備複製和自定義其餘的簡介。 繼續複製第 1 列中的模糊模塊並將其粘貼到除最後一列（第 6 列）之外的所有其餘列中。 我們將第 6 列留空，以便為要向右移動的廣告留出更多空間。
現在打開第 2 列中的模糊模塊設置並更新以下內容：
圓圈顏色：#62de9d
變換比例 X 軸：120%
變換比例 Y 軸：120%
Transform Translate Y 軸：-10%（確保在此處輸入百分比值）
接下來，更新第 3 列中的 blurb 模塊，如下所示：
圓圈顏色：#5e89fb
變換比例 X 軸：140%
變換比例 Y 軸：140%
變換 平移 Y 軸：-20%
變換 平移 X 軸：10%
更新第 4 列中的模糊模塊，如下所示：
圓圈顏色：#2a3fc9
變換比例 X 軸：160%
變換比例 Y 軸：160%
變換 平移 Y 軸：-30%
變換 平移 X 軸：30%
最後，更新第 5 列中的 blurb 模塊，如下所示：
圓圈顏色：#62de9d
變換比例 X 軸：180%
變換比例 Y 軸：180%
變換 平移 Y 軸：-40%
變換 平移 X 軸：55%
正如你所看到的，每個模糊都會從左到右增加 20% 的大小。 並且變換翻譯百分比值確保宣傳語保持良好排列。
由於設計溢出到最後一列（第 6 列），我們將其留空。 但是，如果您增加行的大小，您始終可以在第 6 列中添加另一個簡介。
將透視屬性添加到每一列
在 CSS 中，透視屬性用於在 Z 空間中為 3D 定位元素提供一些透視。 基本上它定義了當用戶看屏幕時對象離用戶多遠。 透視屬性必須應用於具有 3D 位置的父容器，在這種情況下是我們的模糊模塊。 因此，我們必須使用一小段 CSS 將透視圖添加到每一列，如下所示。
將以下 CSS 添加到 5 列中的每一列的“列主要元素 CSS”框中，如下所示：
第 1 列主要元素：
perspective: 1000px
第 2 列主要元素：
perspective: 1000px
第 3 列主要元素：
perspective: 1000px
第 4 欄主要元素：
perspective: 1000px
第 5 列主要元素：
perspective: 1000px
在這種情況下，變化非常微妙，但我認為值得付出額外的努力。
這是沒有透視圖的模糊模塊佈局設計。
在這裡，透視就到位了。
如果你想讓模糊看起來更接近用戶，你可以降低透視值。 例如，這就是每列添加“透視：400像素”後的模糊效果。
向該部分添加分隔線背景
為了使宣傳語看起來像是站在一個表面上，我們可以為該部分添加一個分隔線背景。 打開部分設置並更新以下內容：
底部分隔線樣式：見截圖
底部分隔線顏色：#dddddd
底部分隔線高度：27vw
底部分隔線水平重複：0.8x
底部分隔線翻轉：水平
要調整平板電腦和手機顯示器的佈局，您需要多選每個模糊模塊並更新平板電腦顯示器元素設置中的以下轉換選項：
變換比例 X 軸：100%
變換比例 Y 軸：100%
變換 平移 Y 軸：0%
變換 平移 X 軸：0%
最後結果
現在讓我們檢查一下模糊模塊佈局的最終結果。
最後的想法
使用 Divi 的變換控件，您可以輕鬆地將簡介模塊放置在頁面的精確區域中。 這使得為特色服務、流程步驟和無數其他用途試驗和創建新的模糊模塊佈局變得很有趣。 我希望本教程能給您一些靈感，讓您自己測試這些設計技術。
如需更多靈感，請查看這 5 個創意簡介模塊設計。
我期待在評論中收到您的來信。
乾杯!