如何使用 Divi 向下滑動顯示您畫廊圖片的標題和說明

如果您正在構建一個圖像在設計中發揮核心作用的網站，您可能希望在某個時候包含一個畫廊。 這就是 Divi Gallery 模塊的用武之地。它允許您直接從媒體庫中選擇圖像並以有組織的結構顯示它們。 默認情況下，您也可以動態顯示每個圖像的標題和說明。 但是，如果您希望限制設計中顯示的文本數量，您可能希望在懸停圖像時向下滑動顯示圖像的標題和說明。 在本教程中，我們將向您展示如何做到這一點。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

https://youtu.be/p6Bh7wz3HMc

訂閱我們的 YouTube 頻道

1. 上傳帶有標題和說明的圖片

前往媒體庫

本教程的第一部分重點介紹在媒體庫中添加帶有標題和說明的圖像。 要到達那裡，請導航到您的WordPress 儀表板 > 媒體 > 庫。

上傳圖片

在那裡，上傳要包含在圖庫中的圖像。

添加標題和說明

您需要為每張圖片分別添加標題和說明。 為了獲得最佳結果，請嘗試為每個圖像保持相似的文本長度。

2. 用 Divi 創造設計

創建新頁面或打開現有頁面

上傳圖像後，就可以在 Divi 中構建設計了。 創建一個新頁面或打開一個新頁面並在頂部啟用 Visual Builder。

添加第 1 節

背景顏色

向您的頁面添加新版塊並打開版塊設置。 應用以下背景顏色：

• 背景顏色：#ededed

添加第 1 行

列結構

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

間距

尚未添加模塊，打開行設置，轉到設計選項卡並應用以下頂部和底部邊距：

• 最高利潤率：5%
• 底邊距：5%

將文本模塊添加到第 1 列

添加 H2 內容

是時候添加模塊了，從第 1 列中包含一些 H2 內容的文本模塊開始。

H2 文本設置

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

• 標題 2 字體：蒙特塞拉特
• 標題 2 文字大小：
  • 桌面：62px
  • 平板電腦：48px
  • 電話：32px
• 標題 2 行高：1.3em

漿紗

也修改模塊在不同屏幕尺寸上的最大寬度。

• 最大寬度：
  • 桌面：500px
  • 平板電腦：400px
  • 電話：250px

將分頻器模塊添加到第 1 列

能見度

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

• 顯示分隔線：是

線

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

• 線條顏色：#ffc000

漿紗

也修改模塊的大小設置。

• 分隔線重量：5px
• 最大寬度：100px
• 高度：5px

將文本模塊添加到第 2 列

添加內容

在第 2 列中，我們唯一需要的模塊是帶有一些描述內容的文本模塊。

文字設置

更改模塊的文本設置如下：

• 文字字體：Lato
• 文本行高：2.2em

間距

也應用一些上邊距。

• 上邊距：50px

添加第 2 節

在前一個下面添加另一個部分。

漸變背景

打開部分設置並應用漸變背景。

• 顏色 1：#ededed
• 顏色 2：#ffffff
• 漸變類型：線性
• 起始位置：20%
• 結束位置：20%

間距

轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。

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

添加第 1 行

列結構

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

背景顏色

尚未添加模塊，打開行設置並應用背景顏色。

• 背景顏色：#f4f4f4

漿紗

接下來轉到行的大小設置並應用以下更改：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：90%
• 最大寬度：1580px

間距

我們也在自定義填充值。

• 頂部填充：150px
• 底部填充：0px
• 左填充：5%
• 右填充：5%

將圖庫模塊添加到列

選擇上傳的圖片

是時候使用圖庫模塊添加圖像了！ 在本教程的第一部分中選擇您上傳到媒體庫的圖像。

元素

懸停效果僅在桌面上有意義。 在較小的屏幕尺寸上，沒有懸停，而觸摸會觸發燈箱效果。 出於這個原因，我們只在桌面上顯示標題和說明，我們在較小的屏幕尺寸上禁用它們。 我們還禁用了​​分頁。 您可以在元素設置中找到這些選項。

• 顯示標題和說明
  • 台式機：是
  • 平板電腦和手機：否
• 顯示分頁：否

佈局

轉到模塊的設計選項卡，然後更改佈局。

• 佈局：網格
• 縮略圖方向：縱向

覆蓋

我們也在修改覆蓋設置。

• 疊加圖標顏色：#ffffff
• 疊加背景顏色：rgba(0,0,0,0.25)

文字設置

接下來，我們將在文本設置中更改文本顏色。

• 文字顏色：淺

標題文字設置

然後，我們將設置標題文本的樣式。

• 標題標題級別：H3
• 標題字體：蒙特塞拉特
• 標題文字大小：20px

字幕文本設置

我們也在更改標題文本設置。

• 字幕字體：Lato
• 標題文字顏色：#efefef
• 標題字母間距：0.5px
• 字幕行高度：1.9em

畫廊項目 CSS

然後，我們將轉到高級選項卡。 在那裡，我們將以下 CSS 代碼行添加到畫廊項目標題 CSS 框：

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

畫廊項目標題 CSS

我們將在畫廊項目標題 CSS 框中使用這些代碼行：

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. 應用顯示效果

將 CSS ID 添加到圖庫模塊

現在我們的設計已經到位，我們可以專注於一些必要的步驟來創建顯示效果。 我們要做的第一件事是向我們的畫廊模塊添加一個 CSS ID。

• CSS ID：divi-gallery

在圖庫模塊下方添加代碼模塊

然後，我們將在 Gallery Module 下方添加一個 Code Module。

添加樣式標籤

為了創建效果，我們將使用一些 CSS 代碼。 為了為該代碼準備我們的代碼模塊，我們將在代碼框中放置一些樣式標籤。

在樣式標籤之間插入 CSS 代碼

我們將在樣式標籤之間複製粘貼以下 CSS 代碼行：

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

就是這樣！ 保存頁面設置並退出 Visual Builder 以查看將鼠標懸停在圖庫項目之一時的結果。

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的內置圖庫模塊發揮創意。 更具體地說，我們向您展示瞭如何在將圖像懸停在桌面上時向下滑動顯示圖像的標題和說明。 這有助於您保持視覺設計，而不會一次顯示太多文本。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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