如何使用 Divi 的轉換選項精美地堆疊投資組合項目

新的 Divi 轉換選項為創建具有視覺吸引力的網頁設計打開了許多新的大門。 在從頭開始設計網站時，它使我們更接近不需要任何圖像編輯軟件。 我們可以將它轉換成我們想要的樣子，同時仍然擁有 100% 響應式設計。

在這篇文章中，我們將使用新的轉換選項來精美地堆疊投資組合項目。 例如，這是展示以前製作的網站的好方法。 我們還將確保圖像保持原樣，無論訪問者使用何種屏幕尺寸。 我們希望本教程能激發您在根據需要自定義網站時利用 Divi 的新轉換選項發揮創意。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸下的結果。

讓我們開始重建吧！

添加新部分

漸變背景

首先向您的頁面添加一個新部分。 打開部分設置並為其添加漸變背景。

• 顏色 1：#f4f4f4
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：30%
• 結束位置：30%

間距

然後，轉到設計選項卡並修改間距設置中的自定義填充值。

• 頂部填充：0px（桌面）、18vw（平板電腦）、40vw（手機）
• 底部填充：0px（桌面）、18vw（平板電腦）、40vw（手機）

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並更改大小設置。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

然後，轉到間距設置並刪除頂部和底部的默認填充。

• 頂部填充：0px
• 底部填充：0px

展示

我們還確保兩列在較小的屏幕尺寸上彼此相鄰。 為此，我們需要向行的主要元素添加一行 CSS 代碼。

display: flex;

將圖像模塊 #1 添加到第 1 列

上傳圖片

我們現在可以開始添加不同的模塊了！ 為了能夠遵循本教程，請繼續將以下打印屏幕保存到您的計算機：

將打印屏幕上傳到第一列中的圖像模塊。

漿紗

然後，轉到設計選項卡並啟用“強制全角”選項。 完成後，圖像將佔據該列的整個寬度。

• 強制全角：是

間距

為了縮小圖像的大小，我們將添加一些自定義的左右邊距。 您會注意到，無論屏幕大小如何，我們都使用視口單元來確保圖像的大小保持不變。

• 最高利潤率：-10vw
• 左填充：11vw
• 右填充：11vw

邊界

接下來在邊框設置中的每個角上添加“2vw”。

盒子陰影

伴隨著一個盒子陰影。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

轉換 翻譯

現在我們可以開始轉換圖像了！ 將以下值添加到轉換選項的轉換轉換選項卡：

• 底部：-26vw
• 右：-2vw

您在此處添加的值取決於圖像的寬度和高度，因此如果您使用不同的圖像，則必須相應地修改這些值。 確保您使用視口單位以確保圖像的位置在所有屏幕尺寸上保持相同。

變換旋轉

移至變換旋轉選項卡並相應地旋轉圖像：

• 左：24度
• 中心：46度
• 右：-7度

翻譯歪斜

最後但並非最不重要的一點是，使用以下值啟用平移傾斜：

• 底部：-4deg
• 右：24度

將圖像模塊 #2 添加到第 1 列

上傳圖片

進入下一個圖像模塊！ 將以下打印屏幕保存到您的計算機或使用您選擇的另一個打印屏幕：

繼續將打印屏幕上傳到第 1 列中的第二個圖像模塊。

漿紗

然後，轉到大小設置並啟用“強制全角”選項。

• 強制全角：是

間距

我們通過在間距設置中使用一些自定義邊距值來縮小圖像的大小並使其與前一個圖像重疊。

• 最高邊距：-81vw（台式機），-50vw（平板電腦和手機）
• 左邊距：11vw
• 右邊距：11vw

邊界

接下來，我們將在邊框設置中的每個角上添加“2vw”。

盒子陰影

我們也將添加一個框陰影。 請注意我們如何為第二個投資組合項目圖像使用較暗的框陰影。 這將幫助您在投資組合項目之間創建更多深度。

• 框陰影模糊強度：150px
• 陰影顏色：rgba(0,0,0,0.6)

轉換 翻譯

然後，轉到轉換設置並修改轉換轉換值：

• 底部：-8vw
• 右：0px

同樣，這些值實際上取決於您希望如何定位打印屏幕以及打印屏幕的尺寸。 圖像越小，您就越需要使用更大的負值將其向左推。

變換旋轉

轉到變換旋轉選項卡並使用所有三個值。

• 左：24度
• 中心：46度
• 右：-7度

翻譯歪斜

最後但並非最不重要的是，修改平移偏斜值：

• 底部：-4deg
• 右：24度

將圖像模塊 #3 添加到第 1 列

上傳圖片

轉到第 1 列中我們需要的下一個也是最後一個圖像模塊。 將以下打印屏幕保存到您的計算機或使用您選擇的任何其他打印屏幕：

將您保存的打印屏幕添加到新的圖像模塊。

漿紗

然後，轉到大小設置並啟用“強制全角”選項。

• 強制全角：是

間距

接下來轉到間距設置並相應地修改邊距值：

• 上邊距：-107vw
• 左邊距：19vw
• 右邊距：19vw

邊界

繼續向圖像模塊的每個角添加“2vw”。

盒子陰影

接下來添加一個框陰影。 同樣，我們使用了比之前兩個圖像模塊中使用的陰影顏色更強的陰影顏色。

• 框陰影模糊強度：200px
• 陰影顏色：rgba(0,0,0,0.82)

轉換 翻譯

然後，轉到轉換設置並修改轉換轉換值：

• 底部：-42vw
• 右：11vw

變換旋轉

轉到變換旋轉選項卡並在那裡進行一些更改。

• 左：24度
• 中心：46度
• 右：-7度

翻譯歪斜

最後但並非最不重要的是，修改平移偏斜值。

• 底部：-4deg
• 右：24度

將標題文本模塊添加到第 2 列

添加 H2 副本

進入第二列！ 添加帶有您選擇的一些 H2 內容的文本模塊。

H2 文本設置

接下來轉到 H2 文本設置並進行一些更改。

• 標題 2 字體：Roboto
• 標題 2 字體粗細：細
• 標題 2 文本對齊方式：左
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：5vw（桌面）、6vw（平板電腦）、7vw（手機）
• 標題 2 字母間距：-1px

間距

繼續在間距設置中添加一些自定義邊距值。

• 上邊距：35vw（桌面）、10vw（平板電腦）、0vw（手機）
• 左邊距：-4vw
• 右邊距：4vw

將分隔模塊添加到第 2 列

能見度

我們在第 2 列中需要的下一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改分隔線顏色。

• 顏色：#8193fa

漿紗

也修改大小設置。

• 分隔線重量：8px
• 寬度：28%

間距

並添加一些自定義邊距值。

• 最高利潤率：1vw
• 左邊距：-4vw
• 右邊距：4vw

將描述文本模塊添加到第 2 列

添加內容

我們在第 2 列中需要的下一個模塊是另一個文本模塊。 添加一些您選擇的段落內容。

文字設置

然後，轉到文本設置並進行一些更改。

• 文字字體：Open Sans
• 文字大小：0.6vw（桌面）、1.2vw（平板電腦）、1.8vw（手機）
• 文本行高：3.1em（桌面）、2.7em（平板電腦）、2.6em（手機）
• 文本方向：左

間距

接下來添加一些自定義邊距值。

• 最高利潤率：1vw
• 左邊距：-4vw
• 右邊距：4vw

將按鈕模塊添加到第 2 列

添加副本

我們需要完成設計的下一個也是最後一個模塊是按鈕模塊。 添加一些選擇副本。

按鈕設置

然後，轉到設計選項卡並修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 顏色 1：#5627ba
• 顏色 2：#8fb5fc
• 梯度方向：122deg
• 按鈕邊框寬度：0px
• 字體粗細：超粗
• 字體樣式：大寫

間距

也更改自定義邊距和填充值。

• 上邊距：2vw（桌面）、3vw（平板電腦）、5vw（手機）
• 下邊距：6vw（平板電腦），8vw（手機）
• 左邊距：-4vw
• 右邊距：4vw
• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）
• 右填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）

盒子陰影

最後但並非最不重要的一點，添加一個微妙的框陰影，你就完成了！

• 框陰影模糊強度：40px
• 陰影顏色：rgba(0,0,0,0.3)

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新轉換選項發揮創意。 更具體地說，我們堆疊了投資組合項目以創建美觀且具有視覺吸引力的設計。 我們還確保圖像在所有屏幕尺寸上看起來都很棒。 如果您有任何問題或建議，請務必在下方評論區留言！