使用 Divi 將列轉換為定價計劃
已發表: 2019-08-01Divi 的新色譜柱選項為我們的工作流程帶來了大量新的設計可能性。 它們有助於將多個模塊聯合起來，而無需接觸任何單行 CSS 代碼。 在這篇文章中，我們將僅使用 Divi 的內置選項將列轉換為定價計劃。 我們還將使用列懸停變換選項來實現一些驚人的懸停效果。 您也可以免費下載 JSON！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載列定價計劃佈局
要了解免費的列定價計劃佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
讓我們開始重建吧！
訂閱我們的 YouTube 頻道
添加新部分
漸變背景
將新的常規部分添加到您正在處理的頁面並打開部分設置。 轉到背景設置並添加線性漸變背景：
- 顏色 1：#ededed
- 顏色 2：#ffffff
- 起始位置：30%
- 結束位置：30%
間距
我們還在該部分添加了一些頂部和底部填充。
- 頂部填充：200px
- 底部填充：200px
添加新行
列結構
繼續使用以下列結構向該部分添加新行：
漿紗
尚未添加任何模塊，打開行設置，轉到高級選項卡並相應地更改大小設置：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：80%（桌面和平板電腦），90%（手機）
- 最大寬度：1400 像素（桌面）、90%（平板電腦）、100%（手機）
第 1 列設置
我們還需要修改列設置，從第一個開始。 打開第 1 列設置。
漸變背景
將以下漸變背景應用於第 1 列：
- 顏色 1：#f7f7f7
- 顏色 2：#ffffff
- 漸變類型：徑向
- 徑向：底部
- 起始位置：31%
- 結束位置：31%
邊界
還將“20px”邊框半徑添加到列中。
盒子陰影
為了在頁面上創建一些深度，我們還將添加一個微妙的框陰影。
- 框陰影模糊強度：80px
- 陰影顏色：rgba(0,0,0,0.11)
默認變換比例
正如您在這篇文章的預覽中所注意到的，這些列略有變化。 轉到變換設置並確保變換比例選項在其默認狀態下保持“100%”。
- 底部：100%
- 正確：100%
懸停變換比例
在懸停時修改變換比例值。
- 底部：120%
- 正確：120%
默認轉換
我們還使用轉換翻譯設置將桌面上的列稍微推到右側。 添加以下輸入：
- 底部：34px（桌面），0px（平板和手機）
- 右：0px
懸停變換翻譯
在懸停時使變換轉換值恢復正常。
- 底部：0px
- 右：0px
默認變換旋轉
移至變換旋轉設置並在左側添加以下值：
- 左：352deg（桌面），0deg（平板電腦和手機）
懸停變換旋轉
在懸停時將值恢復為“0deg”。
- 左：0度
溢出
在這篇文章的後面，我們將在列的底部添加一個按鈕。 該按鈕將與列的底部邊框重疊。 為了使這成為可能，我們需要使列的溢出可見。
- 水平溢出：可見
- 垂直溢出：可見
默認 Z 索引
接下來更改不同屏幕尺寸的列的 z 索引。 這將幫助我們保持堆疊有序。
- Z 索引：9（台式機）、11（平板電腦和手機）
懸停 Z 索引
在懸停時，我們希望該列出現在其他列之上。 為了實現這一點，我們將增加懸停時的 z 索引。
- Z指數：11
過渡
我們還通過增加過渡設置中的過渡持續時間來創建平滑過渡。
- 轉換持續時間：500ms
第 2 列設置
進入第二列！ 繼續並打開列設置。
漸變背景
應用以下漸變背景設置：
- 顏色 1：#fff200
- 顏色 2：#ffffff
- 漸變類型：徑向
- 徑向：底部
- 起始位置：31%
- 結束位置：31%
邊界
接下來添加邊框半徑的“20px”。
盒子陰影
伴隨著一個微妙的盒子陰影。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0.14)
默認變換比例
第二列是我們的特色定價計劃。 為了確保這不會被忽視，我們將在變換比例設置中增加列的大小。
- 底部：112%（台式機）、100%（平板電腦和手機）
- 右：112%（桌面）、100%（平板電腦和手機）
懸停變換比例
在懸停時修改變換比例值。
- 底部：120%
- 正確：120%
溢出
接下來更改水平和垂直溢出。
- 水平溢出：可見
- 垂直溢出：可見
默認 Z 索引
然後，轉到可見性設置並增加列的 z 索引。
- Z指數：10
懸停 Z 索引
在懸停時修改 z 索引。
- Z指數：12
過渡
並在過渡設置中增加過渡持續時間。
- 轉換持續時間：500ms
第 3 列設置
進入第三列也是最後一列！ 打開列設置。
漸變背景
轉到背景設置並添加以下漸變背景：
- 顏色 1：#f7f7f7
- 顏色 2：#ffffff
- 漸變類型：徑向
- 徑向：底部
- 起始位置：31%
- 結束位置：31%
邊界
接下來添加“20px”邊框半徑。
盒子陰影
伴隨著微妙的盒子陰影。
- 框陰影模糊強度：80px
- 陰影顏色：rgba(0,0,0,0.11)
默認變換比例
是時候改造列了！ 確保默認變換比例值保持“100%”。
- 底部：100%
- 正確：100%
懸停變換比例
在懸停時修改這些值。
- 底部：120%
- 正確：120%
默認轉換
我們還通過應用一些自定義轉換轉換值將列推到桌面左側。
- 底部：-34px（桌面），0px（平板和手機）
- 右：0px
懸停變換翻譯
在懸停時將值恢復為“0px”。
- 底部：0px
- 右：0px
默認變換旋轉
繼續旋轉處於默認狀態的列。
- 左：8deg（桌面），0deg（平板電腦和手機）
懸停變換旋轉
在懸停時將左變換旋轉值更改回“0px”。
- 左：0度
溢出
確保接下來可以看到溢出。
- 水平溢出：可見
- 垂直溢出：可見
默認 Z 索引
然後，轉到可見性設置並確保默認 z 索引為 9。
- Z指數：9
懸停 Z 索引
在懸停時修改 z 索引。
- Z指數：11
過渡
並在過渡設置中增加過渡持續時間。
- 轉換持續時間：500ms
將 Blurb 模塊添加到第 1 列
添加標題
是時候開始向第一列添加模塊了！ 添加一個新的 Blurb 模塊並插入一個標題。
選擇圖標
接下來選擇一個圖標。
圖標設置
轉到設計選項卡並相應地更改圖標設置：
- 圖標顏色：#000000
- 圖標位置：頂部
- 使用圖標字體大小：是
- 圖標字體大小：50px
標題設置
接下來更改標題文本設置。
- 標題字體: Poppins
- 標題文本對齊：居中
- 標題文字顏色：#000000
- 標題文字大小：27px
間距
並添加一些上邊距。
- 上邊距：80px
將分頻器模塊添加到第 1 列
能見度
到第二個模塊，這是一個分隔模塊。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
移至設計選項卡並將分隔線顏色更改為黑色。
- 線條顏色：#000000
漿紗
還要修改大小設置。
- 分隔線重量：6px
- 寬度：14%
- 模塊對齊：居中
- 高度：0px
間距
最後，添加一些上邊距。
- 上邊距：50px
將文本模塊 #1 添加到第 1 列
添加內容
繼續在分隔器模塊正下方添加一個文本模塊並插入您選擇的一些內容。
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體： Poppins
- 文字字體粗細：輕
- 文本對齊：居中
- 文字顏色：#4f4f4f
- 文本行高：2.3em
間距
添加一些自定義邊距和填充值。
- 上邊距：50px
- 頂部填充：10px
- 底部填充：10px
將文本模塊 #2 添加到第 1 列
添加內容
在上一個文本模塊的正下方，我們需要另一個文本模塊。 輸入您選擇的一些內容。
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體： Poppins
- 文字字體粗細：重
- 文本對齊：居中
- 文字顏色：#000000
- 文字大小：47px
- 文本行高：1em
間距
添加一些自定義的頂部和底部邊距。
- 上邊距：50px
- 下邊距：80px
將按鈕模塊添加到第 1 列
添加副本
我們在第 1 列中需要的下一個也是最後一個模塊是按鈕模塊。 輸入您選擇的一些副本。
結盟
轉到設計選項卡並將按鈕對齊更改為居中。
- 按鈕對齊：居中
按鈕設置
樣式按鈕。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：17px
- 按鈕文字顏色：#000000
- 按鈕背景顏色：#FFFFFF
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：100px
- 按鈕字體： Poppins
- 按鈕字體粗細：粗體
間距
我們還將添加一些自定義邊距和填充值。
- 上邊距：50px
- 下邊距：-40px
- 頂部填充：23px
- 底部填充：23px
- 左填充：70px
- 右填充：70px
盒子陰影
我們將通過給按鈕模塊一個微妙的框陰影來結束它。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0.3)
克隆所有模塊兩次並在剩餘列中放置重複項
完成第 1 列中的所有模塊後，您可以克隆它們兩次並將重複項放置在該行的其餘兩列中。
更改模糊圖標和標題
確保更改每個副本的簡介圖標和標題。
更改文本模塊內容
隨著文本模塊的內容。
更改按鈕 #2
最後但並非最不重要的一點是，打開第 2 列中的按鈕並更改按鈕設置。 一旦你完成了這一步，你就完成了！
- 按鈕文字顏色：#FFFFFF
- 按鈕背景顏色：#8300E9
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的新列選項將列轉換為定價計劃。 您可以自定義定價計劃，而無需接觸任何一行 CSS 代碼！ 本教程僅展示新的列選項如何幫助您將不同的模塊結合到一個漂亮的設計中。 如果您有任何問題或建議，請隨時在下面的評論部分留下它們！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。