如何在 Divi 中創建自定義照片庫滑塊

我們都知道滑塊非常適合在折疊上方一個方便的位置通過特色服務、產品或頁面來吸引用戶。 一些網站（我認為是攝影師）需要在主頁上展示他們的一個或多個照片庫。 為此使用滑塊可能是一個不錯的選擇。 但是，您可能沒有考慮過像這樣在滑塊中展示您的照片庫。

在本教程中，我將向您展示一種將 Divi 圖像畫廊嵌入到幻燈片中的簡單方法，以在 Divi 中創建一個完全自定義的照片畫廊滑塊。 訣竅是在滑塊的內容區域中創建一個 WordPress 圖片庫。 然後，您只需要確保並選擇使用 Divi Gallery 而不是默認的 WordPress Gallery 樣式的選項。 實施起來超級簡單有趣。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的照片庫滑塊的先睹為快。

免費下載自定義照片庫滑塊佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要進行以下設置：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 大約 6-8 張圖像用於滑塊圖像和照片庫

之後，您將有一個空白畫布開始在 Divi 中構建一些懸停選項卡。

在 Divi 主題選項中啟用 Divi Gallery 選項

Divi 允許您用 Divi Gallery 顯示替換默認的 WordPress Gallery 顯示。 因此，每當您創建一個 WordPress 畫廊並將其嵌入到模塊中時，該畫廊就會像使用 Divi Gallery Module 的畫廊一樣顯示。 這基本上允許您將 Divi 圖像庫添加到 Divi Builder 中的任何模塊。 在我們的例子中，我們將向滑塊模塊添加一個 Divi Gallery。

要更改設置，請導航到 Divi > 主題選項。 然後在“常規”選項卡下，單擊以啟用“Divi Gallery”選項。

就是這樣！ 現在默認的 WordPress Gallery 簡碼將顯示一個 Divi 風格的照片庫。

在 Divi 中創建自定義照片庫滑塊

部分和行

要開始，請繼續創建一個帶有一列行的常規部分。

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

• 寬度：100%（因此滑塊在移動設備上為全角）
• 填充：0px 頂部，0px 底部
• 圓角：20px

構建滑塊內容

接下來，向該行添加一個滑塊模塊。

打開滑塊設置並刪除默認添加的幻燈片之一。 然後單擊幻燈片上的齒輪圖標以打開該幻燈片的幻燈片設置。

然後使用以下內容更新幻燈片內容：

• 標題：我們的畫廊
• 按鈕：查看所有
• 身體：這是我們的畫廊。 一探究竟。

在正文內容區域下，單擊添加媒體按鈕。

在 Media Library 彈出窗口中，選擇左上角的 Create Gallery 選項卡。 然後選擇要用於圖庫的 6 張圖像，然後單擊右下角的“創建新圖庫”按鈕。

這將帶您進入彈出窗口內的編輯類別頁面。 忽略右上角的畫廊設置，因為 Divi Gallery 樣式將覆蓋這些 WordPress Gallery 設置。

然後單擊“插入圖庫”按鈕。

這會在滑塊模塊內容中放置一個圖庫短代碼。 如果您希望圖庫顯示在當前正文之後，請確保將短代碼放在內容之後。

現在，您的滑塊模塊的內容區域中顯示了一個嵌入式 Divi 風格的畫廊。 很酷的東西！

讓我們通過添加主幻燈片圖像來繼續更新我們的幻燈片內容。

現在我們已準備好滑塊內容，請保存幻燈片 1 的設置。

滑塊設置

確保保存單個幻燈片的設置。 然後更新主滑塊的以下設計設置。 這將確保設計更新將影響您將添加的所有單個幻燈片。

圖像邊框和框陰影

• 圖像圓角：20px
• 圖片邊框寬度：40px（桌面），0px（平板）
• 圖像邊框顏色：rgba(0,0,0,0)

• 圖像框陰影：見截圖
• 框陰影水平位置：-170px
• 框陰影垂直位置：-220px
• 框陰影傳播強度：-60px
• 陰影顏色：rgba(255,255,255,0.2)

標題和正文

• 標題字體：Karla
• 標題文字對齊：右
• 標題文字大小：48px
• 標題行高度：1.3em
• 正文文字大小：16px
• 正文字母間距：2px
• 車身線高：2em

按鈕樣式

• 按鈕文字大小：16px
• 按鈕背景顏色：#333333
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：20px
• 按鈕字母間距：2px
• 按鈕字體：Karla
• 按鈕字體粗細：粗體
• 按鈕圖標：見截圖
• 按鈕對齊：右
• 按鈕邊距：-5em 右
• 按鈕填充（桌面）：左 3em，右 5em
• 按鈕填充（電話）：左 2em，右 6em

• 按鈕框陰影：見截圖
• 框陰影垂直位置：0px
• 框陰影傳播強度：20px（桌面），10px（手機）
• 陰影顏色：#ffffff

滑塊填充

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

向幻燈片 1 添加背景漸變

現在我們已經有了滑塊樣式，我們可以為我們的單個幻燈片添加自定義背景漸變。 打開幻燈片 1 的幻燈片設置並更新以下內容：

• 背景漸變左顏色：#6d0066
• 背景漸變右顏色：#000000
• 漸變類型：徑向
• 徑向：左上角

創建幻燈片 2

要創建第二張幻燈片，我們可以使用複製圖標複製幻燈片 1。 然後打開復制的幻燈片（幻燈片 2）設置。

此時您可以根據需要更新新幻燈片的內容。 例如，您可以添加一個新的幻燈片圖像並生成另一個畫廊嵌入短代碼，以向幻燈片添加一個新的照片庫。

然後更新背景漸變如下：

• 背景漸變左顏色：#0c71c3

最後結果

這是最終結果。

這是滑塊在平板電腦和手機上的樣子。

如果您取出幻燈片圖像，則這裡是滑塊，以便僅顯示幻燈片內容和圖庫。

最後的想法

在 Divi 的滑塊模塊中嵌入 divi 畫廊的能力為創建一些漂亮的照片畫廊滑塊提供了機會，只需很少的努力。 希望本教程會給您一些靈感，以創建一些漂亮的照片庫滑塊。

有關此 divi 畫廊嵌入技術的更多信息（包括設計嵌入 divi 畫廊的提示），請查看有關如何將 Divi 畫廊嵌入到切換中的帖子。

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

乾杯!