使用 Divi 將轉換後的陰影添加到您的副本中

使用 Divi 的新轉換選項，您可以創建漂亮的網頁設計，同時實時查看所有轉換設置。 通過將不同的模塊相互組合，您可以獲得一些獨特且無縫的效果，這將有助於提升您正在處理的部分的外觀和感覺。 在這篇特別的文章中，我們將專注於僅使用 Divi 的內置選項為您的副本創建轉換後的陰影。 您也可以免費下載示例 JSON 文件。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載變形陰影英雄部分佈局

要了解免費轉換的陰影英雄部分佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

訂閱我們的 YouTube 頻道

讓我們開始重新創建英雄部分

添加新部分

間距

您需要做的第一件事是向新頁面或現有頁面添加新的常規部分。 打開部分設置並刪除所有默認的頂部和底部填充。

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

溢出

移至高級選項卡並確保部分溢出被隱藏。 在這篇文章的後面，我們將使用一些轉換選項，隱藏溢出將確保沒有超出部分容器的內容。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並通過應用以下設置讓行佔據整個屏幕寬度：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：100%
• 最大寬度：100%

間距

繼續進行間距設置，刪除默認的底部填充並在行的左側和右側添加一些自定義空間。

• 底部填充：0px
• 左填充：4vw
• 右填充：4vw

將文本模塊 #1 添加到第 1 列

添加內容

是時候開始添加不同的模塊了，從文本模塊開始。 輸入您選擇的副本。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Playfair Display
• 文本對齊：右
• 文字顏色：#ffffff
• 文字大小：11vw
• 文本行高：1em

• 文字陰影垂直長度：0.02em
• 文字陰影模糊強度：0.16em
• 文字陰影顏色：rgba(0,0,0,0.44)

克隆文本模塊 #1

更改內容

完成第一個文本模塊後，您可以克隆它並更改副本的副本。

在文本模塊 #1 上方添加新的文本模塊

添加內容

進入下一個模塊，這是另一個文本模塊。 這一次，我們將模塊放置在列的頂部。 在接下來的步驟中，我們將這個文本模塊轉換為下一個模塊的轉換文本陰影。 確保您使用相同的副本。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Playfair Display
• 文字字體粗細：粗體
• 文本對齊：右
• 文字顏色：rgba(94,150,187,0.28)
• 文字大小：11vw
• 文字字母間距：4.5px
• 文本行高：1em

轉換 翻譯

是時候轉換模塊以使其看起來像下一個模塊轉換後的文本陰影了！ 轉到間距設置並修改變換平移值。

• 右：13.9vw
• 底部：-2.1vw

變換旋轉

也旋轉模塊。

• 中心：291度

變換歪斜

並增加底部偏斜值。

• 底部：30度

克隆轉換後的文本模塊並放置在文本模塊 #2 上方

更改內容

完成創建轉換後的文本陰影模塊後，您可以克隆它並將其放置在列中的第三個文本模塊上方。 確保您更改了副本。

更改文本設置

移至設計選項卡並更改文本顏色。

• 文字顏色：#f3e4df

添加間距

為了彌補由轉換後的文本陰影模塊創建的額外空間，我們將添加一些負上邊距。

• 上邊距：-12vw

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

添加內容

我們在第 1 列中需要的下一個模塊是另一個文本模塊。 輸入您選擇的描述。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Open Sans
• 文本對齊：右
• 文本行高：2.3em

漿紗

在大小設置中更改不同屏幕尺寸的模塊寬度。

• 寬度：53%（桌面）、70%（平板）、90%（手機）
• 模塊對齊：右

將按鈕模塊添加到第 1 列

添加副本

轉到第 1 列中的下一個也是最後一個模塊，即按鈕模塊。 輸入您選擇的一些副本。

結盟

移至設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：右

按鈕設置

還要修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20px
• 按鈕背景顏色：#5e96bb
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：50px
• 按鈕字體：Playfair Display

間距

並使用間距設置來完成按鈕的樣式。

• 最高利潤率：2vw
• 底邊距：3vw
• 頂部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

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

上傳 1:1 圖片

進入第二列！ 在這裡，我們需要兩個圖像模塊。 從第一個圖像模塊開始，上傳一張 1:1 比例的圖像。 這意味著寬度和高度都需要具有相同的像素值。 確保您的圖像是正方形將有助於在接下來的步驟中將其變成圓形。

漿紗

轉到圖像模塊的大小設置並啟用“強制全寬”選項。

• 強制全角：是

間距

我們還增加了一些上邊距。

• 最高利潤率：2vw

邊界

要將圖像模塊轉換為圓形，我們將在每個角上添加“50vw”。 使用非常高的值有助於我們在不同的屏幕尺寸上保持圓形。

盒子陰影

最後但並非最不重要的是，我們還將使用以下設置向圖像模塊添加框陰影：

• 框陰影水平位置：-300px
• 框陰影垂直位置：-300px
• 陰影顏色：rgba(94,150,187,0.28)

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

上傳 1:1 圖片

轉到第 2 列中的第二個圖像模塊。我們再次確保我們上傳的圖像具有 1:1 的比例。

漿紗

移至設計選項卡並更改寬度。

• 寬度：62%

邊界

也將“50vw”添加到此圖像模塊的每個角落。

盒子陰影

我們還將添加一個自定義框陰影。

• 框陰影水平位置：-200px
• 框陰影垂直位置：150px
• 陰影顏色：#d4c1bd

轉換 翻譯

最後但並非最不重要的一點是，使用轉換轉換選項更改圖像模塊的位置，您就完成了！

• 右：-13vw
• 底部：19vw

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創造性地使用重複的文本模塊來創建轉換後的文本陰影。 這是一種將您的副本置於聚光燈下並從另一個角度使用 Divi 的內置選項的有趣方式。 我們希望您喜歡本教程，如果您有任何問題或建議，請務必在下面的評論部分發表評論！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。