如何在 Divi 中設計圖像和文本的反射

為圖像和文本設計反射是一種經典的設計技術，可用於為網頁內容增添趣味。 而且，Divi 可以直接從 Divi Builder 輕鬆創建這些反射，而無需使用照片編輯器。

在本教程中，我將向您展示如何在 Divi 中設計圖像和文本的反射。 製作反射的關鍵是使用 Divi 的變換比例選項來創建元素的鏡像版本。 之後，您可以添加自定義疊加層，我將向您展示如何使用文本模塊。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的先睹為快。

免費下載文本和圖像反射佈局

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您只需要 Divi。 確保 Divi 主題已安裝並處於活動狀態。 我們將使用前端的 Divi Builder（視覺構建器）從頭開始創建我們的設計。 本教程還需要一些模擬圖像（一個大約 1920 像素 x 600 像素的背景圖像和另一個大約 500 像素 x 350 像素的圖像）。

準備好後，轉到 WordPress 儀表板並導航到頁面 > 添加新。 為您的新頁面命名並在前端部署 Divi Builder。 選擇“從頭開始構建”選項。 現在你準備好了！

在Divi中創建圖像和文本反射背後的基本思想

在 Divi 中創建反射設計背後的基本思想包括三個步驟：

1. 使用您的圖像或文本創建模塊
2. 複製模塊並使用變換比例創建鏡像圖像或文本
3. 使用絕對定位分隔符或文本模塊向鏡像元素添加漸變疊加。

這種設計技術不限於單個模塊。 您實際上可以使用此方法在 Divi 中為整行添加反射，這有助於創建獨特的標題設計。 在本教程的稍後部分，我們將在文本反射設計中的一行中添加反射。 但是現在讓我們從如何創建圖像反射開始。

如何創建圖像反射

要創建圖像反射，讓我們從創建一個具有一列行的新常規部分開始。

然後將圖像模塊添加到該行。

從媒體庫上傳您想要的圖像到圖像模塊。 然後更新以下圖像設置：

最大寬度：600px
模塊對齊：居中
自定義邊距：底部 0px

創建鏡像

要創建反射效果，我們首先需要在圖像正下方創建圖像的鏡像副本。

為此，請複製圖像模塊。 然後更新復製圖像的設置如下：

不透明度：40%
變換比例 X 軸：-100%

變換比例屬性是神奇地垂直和水平翻轉圖像以創建圖像的鏡像版本。

這負責基本的反射設計。 但是，我們可以為底部圖像添加額外的漸變疊加，以獲得更逼真的反射設計。

使用文本模塊添加漸變疊加

要將漸變疊加添加到底部圖像，我們可以使用文本模塊。 我們可以給文本模塊一個絕對位置，使其位於底部圖像的上方。 然後我們可以為文本模塊添加漸變背景。 如果您願意，使用文本模塊（而不是分隔符）將為您提供稍後在反射圖像頂部添加一些內容的獎勵選項。

繼續在底部圖像下創建一個文本模塊。

刪除默認內容，使文本模塊為空。

然後更新文本模塊設置如下：

背景漸變左顏色：rgba(255,255,255,0)
背景漸變右顏色：#ffffff

寬度：100%
高度：50%

然後將以下自定義 CSS 添加到主元素：

position: absolute !important;
top: 50%;

文本模塊的這種絕對定位覆蓋了行下半部分的文本模塊。

讓我們看看到目前為止的設計是什麼樣的。

添加背景顏色

如果您不想要白色背景，您可以嘗試使用其他背景顏色來創建獨特的全角反射設計。

為此，請打開行設置並更新以下內容：

背景顏色：#000000
寬度：100%：
最大寬度：100%；
自定義填充：0px 頂部，0px 底部

現在讓我們看看結果。

將文本添加到文本模塊覆蓋

請記住，由於我們使用文本模塊作為底部圖像的疊加層，因此我們可以根據需要添加一些內容。

為此，請打開文本模塊設置並更新以下內容：

內容：“圖像反射”
文字文字顏色：#ffffff
文字文字大小：30px
文字方向：居中

最終設計

這是圖像反射的最終設計。

在 Divi 中創建文本反射

對於下一個示例，我們將創建一個文本反射設計。 該過程與創建圖像反射的方式非常相似。 但是，對於此示例，我將為整行創建一個反射。 這將允許用於反映文本和背景圖像以獲得漂亮的標題設計。

這是如何做到的。

首先創建一個具有一列行的新常規部分。 然後向該行添加一個文本模塊。

用“反射”一詞更新內容。

然後更新設計設置如下：

文字字體：Oswald
文字字體樣式：TT
文字文字顏色：#333333
文字文字大小：10vw
文本行高：.9em
文字方向：居中
自定義邊距：底部 0px
自定義填充：4vw 頂部

更新行設置

現在我們的文本模塊已經自定義，是時候更新行的設置了。

打開行設置並更新以下內容：

背景圖片：插入背景圖片
天溝寬度：1
寬度：100%
最大寬度：100%
自定義填充：0px 頂部，0px 底部

這是到目前為止的設計。

創建反射文本行

要為此設計創建反射文本，我們將反射整行，以便我們可以在反射中包含背景圖像。

複製行並更新以下內容：

變換縮放 Y 軸：-100%

現在下面的行是上面行的鏡像。 現在我們需要做的就是添加一個疊加層。

使用文本模塊添加漸變疊加

要將漸變疊加添加到我們的底行文本反射，我們可以使用文本模塊，就像我們在上面的第一個圖像反射設計中所做的那樣。 像以前一樣，我們可以給文本模塊一個絕對位置，以便它填充整行並位於具有反射文本的另一個文本模塊的頂部。 然後我們可以為文本模塊疊加添加漸變背景。

繼續並在底行的文本模塊下創建一個新的文本模塊。

打開新的文本模塊設置並刪除內容，使文本模塊為空。

然後按如下方式更新設置：

背景漸變左顏色：#ffffff
背景漸變右顏色：rgba(255,255,255,0.13)
起始位置：38%

寬度：100%
高度：100%

然後將以下自定義 CSS 添加到主元素：

position: absolute !important;
top: 0;

就是這樣！

最後結果

查看最終結果。

這是相同的設計，沒有任何背景圖像。

最後的想法

如果您花時間以正確的方式設計反射，反射看起來會非常酷。 值得慶幸的是，Divi 擁有實現這一目標的工具。 還有其他製作 CSS 反射的方法，但不幸的是，它們往往缺乏跨瀏覽器的支持。 本教程中的設計在所有瀏覽器上看起來都不錯。

我發現反射在頁眉和展示作品集的圖像上看起來很棒。 而且我確信還有許多其他實現。

我期待在評論中收到您的來信。

乾杯!