如何使用 Divi 的位置選項創建圖像包

無論您是在尋找圖片庫的全新外觀，還是只是想要一個漂亮的產品圖片展示，本教程都應該有所幫助。 通常，在向 Divi 網站添加圖像時，我們可能會將設計限制為每列一張圖像。 雖然這在傳統上是一種安全且乾淨的設計，但您可能會發現將同一列中的圖像分組可以創建漂亮的圖像束設計，在單列或多列佈局中看起來很棒。

在本教程中，我們將向您展示如何使用 Divi 的內置位置選項來設計 3 個可以以各種方式用於您的網站的創意圖像包。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

圖像包設計 #1

開始建築設計#1

圖像包設計 #2

開始建築設計#2

圖像包設計 #3

開始建築設計#3

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

設計圖像包 #1

對於第一個圖像包設計，我們將在中心圖像的每一側放置兩個（稍微旋轉的）圖像。

首先向常規部分添加一列行。

添加中間圖像

在列內，添加一個圖像模塊。

然後將圖像上傳到模塊。

對於這些圖像，我們將使用 Fitness Coach Layout Pack 中的屏幕截圖。 它們中的每一個都應該是 880 像素 x 1200 像素。

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

• 寬度：50%
• 模塊對齊：居中

添加框陰影如下：

• 盒子陰影：見截圖
• 框陰影垂直位置：0px
• 框陰影模糊強度：38px
• 框陰影傳播強度：5px
• 陰影顏色：rgba(0,0,0,0.2)

然後將 Z 索引設置為 1，使其位於束中的其他圖像之上。

• Z指數：1

添加左圖

要在包中創建左側圖像，請在中間圖像下添加一個新圖像。

使用新圖像更新圖像（確保它們的大小相同以獲得最佳效果）。

在設計選項卡下，按如下方式更新寬度：

• 寬度：30%

然後添加框陰影如下：

• 盒子陰影：見截圖
• 陰影顏色：rgba(0,0,0,0.2)

接下來，在左側中心位置為圖像提供一個絕對位置，使其與左側的中間圖像相鄰。

• 位置：絕對
• 位置：左中

要使圖像稍微旋轉，請按如下方式更新變換旋轉選項：

變換旋轉 Z 軸：-10deg

添加正確的圖像

要創建右側圖像，請打開圖層框，然後復制左側圖像。

標記圖像模塊（左圖、右圖等），以便您以後可以輕鬆識別它們。 然後打開復製圖像的設置，調整位置如下：

• 位置：右中心

然後調整變換旋轉選項如下：

• 變換旋轉 Z 索引：10deg

不要忘記用新的圖像交換重複的圖像。

現在檢查到目前為止的結果。

將圖像包添加到多列

由於圖像位於一列內，因此您可以輕鬆地將此圖像束設計添加到多列佈局中。

要將圖像包添加到多列，請複制包含當前圖像包的行。

在重複行中，複製該列以創建包含圖像包的另一列。 這將在兩列佈局中創建圖像包。

要創建一行包含三個圖像包，請複制兩列行，然後復制複製行中的一列。 這將為您提供三列佈局。

最後結果

這是圖像包 #1 的最終設計。

設計圖像包 #2

下一個設計包含一個包含五個圖像的圖像包 - 一個圖像在中心，四個在列的每個角。

首先，創建一個新的常規部分，其中包含四分之一二分之一列的行。

添加中心圖像

在中間列中，添加一個圖像模塊。

然後將圖像上傳到模塊。 我們使用來自家具店佈局包的圖像（每個 800 像素 x 1200）。

在設計選項卡下，更新以下內容：

• 背景顏色：#f7f3ec

• 寬度：55%
• 模塊對齊：居中

• 邊距：0px
• 填充：頂部 5%，底部 5%，左側 5%，右側 5%

在高級選項卡下，將 Z 索引向上加 1，以確保圖像在 Z 空間中保持在其他圖像之上。

• Z指數：1

添加左上角圖像

要添加左上角的圖像，請在中間列的中心圖像下添加一個新的圖像模塊。

將新圖像上傳到模塊。

然後更新設計設置如下：

• 寬度：40%
• 邊距：0px 底部

列間距

列的高度由中心圖像的高度和我們添加的頂部和底部填充量決定。 因此，為了給我們絕對定位的圖像提供適當的間距，我們需要通過增加頂部和底部填充來增加列的高度。

• 填充（桌面）：頂部 12%，底部 12%
• 填充物（平板電腦）：頂部 24%，底部 24%

接下來，給左上角的圖像一個絕對位置，如下所示：

• 位置：絕對
• 位置：左上角

添加右上角圖像

現在左上角的圖像已就位，複製該圖像以創建右上角的圖像。

（此時，最好為每個圖像添加標籤，以便以後輕鬆識別。）

打開復制（右上）圖像並更新絕對位置位置：

• 位置：右上角

添加左下角圖像

要創建左下角的圖像，請複制右上角的圖像，並根據需要更新標籤。

打開復制（左下）圖像的設置並更新絕對位置位置：

• 位置：左下角

添加右下角圖像

要創建右下角圖像，請複制左下角圖像，並根據需要更新標籤。 然後更新圖像並給它一個新的位置：

• 位置：右下角

添加框陰影設計口音

為了添加一個漂亮的設計口音，我們可以為左上角的圖像添加一個框陰影，如下所示：

• 盒子陰影：見截圖
• 框陰影水平位置：-170px
• 框陰影垂直位置：170px
• 陰影顏色：RGBA(36,57,74,0.07)

在右上角的圖像中添加一個免費的框陰影設計口音，如下所示：

• 盒子陰影：見截圖
• 框陰影水平位置：170px
• 框陰影垂直位置：170px
• 陰影顏色：RGBA(36,57,74,0.07)

將文本添加到左列

要在設計中添加一些文本，請在左欄中添加一個新的文本模塊。

內容

然後使用以下內容更新內容：

<h2>Image Bundle</h2>

文字設計

在設計選項卡下，更新以下內容：

• 標題 2 字體：蒙特塞拉特
• 標題 2 字體樣式：TT
• 標題 2 文本對齊方式：右
• 標題 2 文本顏色：#24394a
• 標題 2 文字大小：34px
• 標題 2 字母間距：4px
• 標題 2 行高：1.3em

左列填充

要稍微降低文本，請打開左列的設置，並更新以下填充：

• 填充：剩餘 20%

將文本添加到右列

要創建右列文本，請複制左列中的文本模塊，然後將其粘貼到右列中。 然後打開文本設置並更新以下內容：

• 標題 2 文本對齊方式：左

右列填充

就像我們對左列所做的一樣，將以下填充添加到右列（第 3 列）以關閉文本模塊。

• 填充：33% 頂部

部分背景

要完成設計，請打開部分設置並添加以下背景顏色：

• 背景顏色：#f7f3ec

這是到目前為止的結果。

將圖像包添加到多列

要將這個圖像包添加到多列，複製該行，然後刪除重複行中的左右列，只留下帶有圖像包的列。

使用多選，選擇左上角的圖像和右上角的圖像。 打開設置，取出box-shadow。

然後復制該列一兩次以創建包含圖像包的多列。

如果您要為圖像包創建三列佈局，請打開每列的列設置並按如下方式更新填充：

• 填充：頂部 8%，底部 8%

最後結果

這是最終結果。

這是在手機上。

圖像包設計 #3

對於最後一個圖像包設計，我們將通過微妙的 3D 旋轉並排放置 5 個圖像，以便為子主題或佈局包等內容創建漂亮的顯示效果。

添加行

首先，將一列行添加到常規部分。

添加中間圖像

在行內，添加一個圖像模塊。

然後將圖像上傳到圖像模塊。 我們使用的是來自我們用於設計 #1 的 Fitness Coach Layout Pack 的相同 880px x 1200px 屏幕截圖。

在設計選項卡下，更新大小選項如下：

• 寬度：30%
• 模塊對齊：居中

然後給圖像一個微妙的框陰影：

• 盒子陰影：見截圖
• 框陰影垂直位置：-12px
• 框陰影模糊強度：28px
• 陰影顏色：rgba(0,0,0,0.11)

接下來，通過將其設置為 0px 來取出默認的底部邊距。

• 邊距：0px 底部

要確保圖像在重疊時保持在其他圖像之上，請調整 Z 索引。

• Z指數：2

添加列透視

在我們將其餘的圖像添加到圖像包之前，我們需要將自定義 CSS 添加到列中，當使用變換選項旋轉圖像時，它將為圖像添加透視圖。 這將創建逼真的 3D 效果。

添加左中圖像

現在我們已經有了我們的視角，我們可以開始添加其他圖像。

要創建左中圖像，請複制中間圖像。

根據需要更新圖層框中的圖像標籤，然後使用新圖像更新復製圖像模塊。

打開圖像的設置並更新絕對位置位置和 Z 索引，如下所示：

• 位置：左下角
• Z指數：1

然後添加以下變換選項來定位和旋轉圖像。

• 變換平移 X 軸：75%
• 變換旋轉 X 軸：30 度

添加左圖

要創建左側圖像，請複制我們剛剛創建的中間左側圖像。

打開新圖像的設置並更新寬度：

• 寬度：20%

然後調整transform translate選項如下：

• 變換平移 X 軸：0px

然後調整 Z 索引，使圖像保持在左中間圖像的後面。

• Z 指數：0

添加中右圖像

接下來，我們將向圖像包中添加右中圖像。

要創建圖像，請打開圖層彈出窗口。 然後復制左中圖像，將復制的圖像拖到左圖像下方，然後相應地標記它（即“右中圖像”）。

打開中間右圖的設置，改變絕對位置位置如下：

• 位置：右下角

然後調整變換選項如下：

• 變換平移 X 軸：-75%
• 變換旋轉 X 軸：-30deg

添加右圖

要創建正確的圖像（最後一個），我們可以復制左圖像。 然後將復制的圖像拖到中間的右圖下方，並將其標記為“右圖”。

打開右側圖片設置，更新絕對位置位置如下：

• 位置：右下角

接下來，調整變換旋轉。

• 變換旋轉 X 軸：-30deg

查看到目前為止的結果。

這是添加到多列的相同圖像包。

最後的想法

一旦我們了解了 Divi 的絕對位置選項的工作原理，我們就可以使用它來創建一些非常棒的圖像包設計。 這些圖像包最好的部分是它們存在於單個列中，因此它們在多列上看起來很棒，並且在移動設備上也能完美縮放。

我希望這會給你一些靈感，為你的下一個項目創建驚人的圖像顯示。

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

乾杯!