如何在滾動上扇出圖像以在 Divi 中宣傳圖片庫

知道如何使用 Divi 的滾動效果扇出圖像可能是一個微妙而令人印象深刻的設計元素，有助於在登錄頁面上宣傳圖片庫。 這個想法是在用戶向下滾動頁面時通過展開像撲克牌一樣的圖像來吸引用戶。

在本教程中，我們將創建一個乾淨的部分佈局，用於宣傳包含一系列在滾動時散開的圖像的圖庫。 您可以在此設計中使用您想要的任何圖像，這將是對任何登錄頁面的一個很好的補充。

搶先看

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

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

單擊導入按鈕。

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

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

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

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

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

第 1 部分：創建佈局和模擬內容

對於本教程的第一部分，我們將使用兩列行構建部分佈局，該行在左列中有一個標題和一個按鈕。 在第二部分，我們將扇出圖像添加到右列。

部分設置

在向佈局添加任何內容之前，請按如下方式更新默認部分的設置：

• 填充物：10vw 頂部，10vw 底部
• 水平溢出：隱藏
• 垂直溢出：隱藏

添加行

接下來，添加一個具有三分之二和三分之一列結構的新行。

行設置

然後使用自定義背景圖像更新行設置。 我正在使用文具店登陸頁面預製佈局中的一個。 之後更新以下內容：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：左上角
• 最大寬度：900px

添加文本模塊以創建標題

行準備好後，將新的文本模塊添加到第 1 列以創建標題。

文字內容

將以下 H1 Heading 添加到正文內容：

<h1>Our Gallery</h1>

文字設置

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

• 標題字體：Bellefair
• 標題文本對齊（平板電腦和手機）：右
• 標題文字大小：150px（桌面和平板電腦），110px（手機）

添加按鈕

在文本模塊下，添加一個新的按鈕模塊。

按鈕文字

使用“查看圖庫”更新按鈕文本。

按鈕設置

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

• 對齊方式（平板電腦和手機）：右
• 按鈕文字大小：14px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#121212
• 按鈕邊框寬度：0px
• 按鈕字母間距：3px
• 按鈕字體：蒙特塞拉特
• 按鈕字體樣式：TT
• 邊距：7vw 頂部

第 2 部分：使用扇出滾動效果創建圖像

在本教程的第二部分，我們將創建具有扇出滾動效果的圖像。 我們將從中間的圖像開始。 我正在使用 Fashion Gallery Page Premade Layout 中的圖像。 為了一致的設計，它們應該都是相同的尺寸。 我使用的是 400 像素 x 600 像素。

創建中間圖像

在右欄中添加一個新的圖像模塊。

然後將圖像上傳到模塊。

圖像設置

更新移動顯示的最大寬度和邊距，如下所示：

• 最大寬度（平板電腦和手機）：200px
• 邊距（平板電腦和手機）：左 0px

創建右中圖像

要創建第二個圖像（或右中圖像），請複制第一個圖像模塊。

圖像設置

然後打開復製圖像模塊的設置並更新以下內容：

位置

• 位置：絕對

變換原點

• 變換原點：底部中心

滾動效果

在水平運動下，更新以下內容：

• 啟用水平運動：是
• 起始偏移：0（20%）
• 中間偏移：0.5（50%）
• 結束偏移：0.5（100%）

在旋轉下，更新以下內容：

• 啟用旋轉：是
• 起始旋轉：0 度（在 20% 時）
• 中間旋轉：20 度（50% 時）
• 結束旋轉：20 度（100%）

創建正確的圖像

要創建將扇出到最右側的第三張圖像，請複制我們創建的第二張圖像。

更新滾動效果

在水平運動下，更新以下內容：

• 中間偏移：1
• 結束偏移：1

在旋轉下，更新以下內容：

• 中間旋轉：40度
• 結束旋轉：40 度

如果您沒有註意到，我們實際上是將每個圖像的水平偏移量增加 0.5 度，將旋轉偏移量增加 20 度。 這將在圖像之間創建相等的間距。 並且因為滾動效果動畫是基於底部中心的變換原點，它會給人一種圖像像撲克牌一樣散開的印象。

在圖層框中標記圖像

在創建最後兩個圖像之前，讓我們更新當前圖像的標籤，以免混淆。

創建左中圖像

要創建左中圖像，我們可以復制右中圖像。

然後將其拖動到中間圖像上方到列的頂部。

您也可以更新該圖像標籤。

更新滾動效果

打開左中圖像的設置並更新以下滾動效果：

在水平運動下…

• 中間偏移：-0.5
• 結束偏移：-0.5

注意：我們所做的只是將偏移值更改為負數。

在旋轉…

• 中間旋轉：-20 度
• 結束旋轉：-20 度

創建左圖

最後，讓我們通過複製右側圖像並將其拖動到列的最頂部來創建最終的左側圖像。

您也可以更新標籤。

更新滾動效果

打開左側圖像的設置並更新滾動效果：

在水平運動下：

• 中間偏移：-1
• 結束偏移：-1

在旋轉…

• 中間旋轉：-40 度
• 結束旋轉：-40 度

第 1 列 Z 索引

現在列中的圖像將與列 1 中的內容重疊。要更改此設置，請打開列 1 的設置並更新 z 索引，如下所示：

• Z指數：10

添加新圖像和過濾器

現在，我們需要做的就是用新的/不同的圖像更新每個圖像。

要獲得獨特的效果，請將以下濾鏡添加到除右側圖像之外的所有圖像（使用多選）。

• 飽和度：20%
• 不透明度：85%

結果

這是到目前為止的結果……

旋轉列

為了稍微改變設計，我們可以通過旋轉父列來旋轉圖像集合。

為此，請打開第 2 列的設置並添加以下轉換選項：

• 變換旋轉 Z 軸：40 度

最後結果

這是最終結果。

桌面

藥片

電話

最後的想法

在本教程中，我們學習瞭如何使用 Divi 的滾動效果扇出圖像，但您不必止步於此！ 您可以輕鬆地使用相同的技術來扇出任何模塊集合（我認為是簡介）。 我用每個圖像的滾動效果限制了偏移距離，因此設計並不是真正實用的（即，您無法真正完整地看到每個圖像）。 但是，如果需要，您可以增加偏移量以使圖像更加可見。

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

乾杯!