使用 Divi 在令人驚嘆的畫廊網格中標記圖像角

正在尋找一種獨特而美麗的方式在您網站的畫廊中顯示圖像？ 如果是這樣，我們相信你會喜歡這篇文章。 我們將向您展示如何使用文本模塊切斷圖像角落，作為在所有屏幕尺寸上保持 100% 響應的漂亮設計的一部分。 這是在保持出色設計的同時為圖像添加編號標籤的好方法。 您還可以免費下載設計示例的 JSON 文件。

讓我們開始吧！

預覽

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

免費下載畫廊部分佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建

添加新部分

間距

您需要做的第一件事是向您正在處理的頁面添加一個新部分。 打開部分設置並刪除所有默認的頂部和底部填充。

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

添加新行

列結構

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

背景顏色

接下來添加白色背景色。

• 背景顏色：#ffffff

漿紗

繼續調整大小設置，並通過應用以下設置刪除列、行和節之間的所有空間：

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

間距

繼續刪除所有默認的頂部和底部填充。

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

第 1、2、3 和 4 列主要元素

現在，為了確保所有屏幕尺寸都保持 4 列結構，我們將通過將以下 CSS 代碼行分別添加到每個列主要元素來確保每一列保持其 25% 的寬度：

width: 25% !important;

將圖像模塊添加到第 1 列

上傳 1:1 圖片

是時候開始添加模塊了！ 將新的圖像模塊添加到第一列並上傳您選擇的方形圖像（或使用您可以在本文開頭下載的壓縮文件夾中找到的圖像）。

燈箱

接下來在鏈接設置中啟用燈箱選項。

• 在燈箱中打開：是

漿紗

為了確保圖像在所有屏幕尺寸上都保持響應，我們還將啟用“強制全寬”選項。

• 強制全角：是

默認過濾器

我們也在改變亮度。

• 亮度：50%

懸停過濾器

我們將在懸停時將其恢復為“100%”。

• 亮度：100%

默認 Z 索引

轉到可見性設置並確保 Z 索引在其默認狀態下保持“0”。

• Z 指數：0

懸停 Z 索引

但是，在懸停時，我們希望它與我們將在接下來的步驟中添加的編號標籤文本模塊重疊。 為此，我們將增加懸停 Z 索引值。

• Z指數：100

在剩餘列中克隆圖像模塊 3 次和位置

完成第 1 列中的圖像模塊後，您可以將其克隆 3 次。 將重複項放在該行的其餘三列中。

更改圖像

更改副本中的圖像。

將頂部邊距添加到第 2 列中的圖像模塊

並在第二列中為圖像模塊添加一個上邊距。

• 最高利潤率：24.7vw

在圖像模塊 #1 下方添加文本模塊

添加內容

我們在第 1 列中需要的下一個模塊是文本模塊。 向內容框中添加一個數字。

背景顏色

接下來更改背景顏色。 此顏色需要與您分配給該行的任何背景顏色相匹配。

• 背景顏色：#ffffff

文字設置

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

• 文字字體：Lora
• 文本對齊：右
• 文字顏色：#000000
• 文字大小：3vw
• 文本行高：3vw

漿紗

我們還縮小了模塊的寬度。

• 寬度：7vw

間距

接下來在間距設置中為模塊創建一些空間。

• 頂部填充：0.5vw
• 底部填充：2.5vw
• 右填充：0.9vw

Z索引

並增加 Z 指數。

• Z指數：99

克隆文本模塊 3 次

完成文本模塊的一般步驟後，您可以將其克隆 3 次。

定位

相應地定位重複項：

自定義文本模塊

文本模塊 #1

負最高保證金

是時候根據它們的位置開始定制不同的文本模塊了！ 打開第 1 列中的文本模塊並添加一些負上邊距。

• 最高利潤率：-5.9vw

盒子陰影

我們還使用以下設置添加框陰影：

• 框陰影水平位置：7vw
• 框陰影垂直位置：5.9vw
• 框陰影傳播強度：0px
• 陰影顏色：rgba(35,50,255,0.94)

文本模塊 #2

更改編號

繼續打開第二列中的文本模塊並更改數字。

文本對齊

還要修改文本對齊方式。

• 文本對齊方式：左

模塊對齊

並在大小設置中更改模塊對齊方式。

• 模塊對齊：右

間距

轉到間距設置並添加一些負上邊距。 將填充添加到左側而不是右側。

• 上邊距：-6vw
• 左填充：0.9vw

盒子陰影

通過添加框陰影完成文本模塊設計。

• 框陰影水平位置：7vw
• 框陰影垂直位置：-6vw
• 框陰影傳播強度：0px
• 陰影顏色：#ededed

文本模塊 #3

更改編號

轉到第 3 列中的文本模塊！ 更改內容框中的數字。

負最高保證金

轉到設計選項卡並添加一些負上邊距。

• 上邊距：-6vw

盒子陰影

也使用框陰影。

• 框陰影水平位置：-7vw
• 框陰影垂直位置：-6vw
• 框陰影傳播強度：0px
• 陰影顏色：#ff2323

文本模塊 #4

更改編號

進入下一個也是最後一個文本模塊。 也在這裡更改數字。

文本對齊

然後，更改文本對齊方式。

• 文本對齊方式：左

模塊對齊

也在大小設置中修改模塊對齊方式。

• 模塊對齊：右

更改間距

接下來修改間距設置。

• 最高利潤率：24.7vw
• 底部邊距：-6vw
• 左填充：0.9vw

盒子陰影

並通過添加具有以下設置的框陰影來完成文本模塊設計：

• 框陰影水平位置：-7vw
• 框陰影垂直位置：-5.9vw
• 框陰影傳播強度：0px
• 陰影顏色：#000000

克隆整行

完成該行後，您可以根據需要將其克隆多少次，具體取決於要顯示的圖像數量。

更改編號和圖像

確保更改所有圖像和數字並完成！

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何創建一個帶有標記圖像角的漂亮畫廊。 這是一種以美觀的方式展示您的圖像的獨特方式。 您還可以在本教程開頭下載 JSON 文件。 如果您有任何問題或建議，請務必在下方評論區留言！

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