下載 Divi 的免費多彩飛濺動畫英雄部分

您設計頁面的英雄部分的方式為頁面的其餘部分設定了期望。 如果您正在設計一個慶祝某事的登錄頁面，無論是周年紀念日還是促銷活動，它都絕對有助於將節日氣氛帶入您的設計中。 一種方法是在英雄部分的背景中添加彩色飛濺動畫。 重點仍將放在您提供的書面副本和 CTA 上。 在本教程中，我們將向您展示如何使用 Divi 的內置設置創建漂亮的彩色飛濺動畫部分。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載飛濺動畫英雄部分佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新部分

漸變背景

首先向您正在處理的頁面添加一個新部分。 打開部分設置並應用您選擇的漸變背景。

• 顏色 1：#070a49
• 顏色 2：#6f00f7
• 漸變類型：線性
• 梯度方向：148deg

漿紗

移至該部分的設計選項卡並在尺寸設置中添加最小高度。 這將使我們的部分全屏顯示。

• 最小高度：100vh

間距

接下來我們將刪除所有默認的頂部和底部填充。

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

能見度

為了確保我們的設計中沒有出現水平滾動條，我們將隱藏該部分的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加第 1 行

列結構

部分設置到位後，使用以下列結構添加第一行：

漿紗

在不添加任何模塊的情況下，打開行設置並通過如下修改大小設置允許行接觸節容器的左側和右側：

• 寬度：100%
• 最大寬度：100%

間距

接下來刪除所有默認的頂部和底部填充。

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

主要元素 CSS

為了確保模塊在較小的屏幕尺寸上彼此相鄰，我們將向行的主要元素添加一行 CSS 代碼。

display: flex;

第 1 列動畫

常規行設置到位後，打開第 1 列設置並添加動畫。

• 動畫風格：縮放
• 動畫方向：中心
• 動畫強度：100%

第 2 列動畫

接下來將動畫添加到第二列。

• 動畫風格：縮放
• 動畫方向：中心
• 動畫延遲：250ms
• 動畫強度：100%

第 3 列動畫

我們也在第三列使用動畫。

• 動畫風格：縮放
• 動畫方向：中心
• 動畫延遲：500ms
• 動畫強度：100%

將圖像模塊添加到第 1 列

上傳飛濺圖片

是時候添加模塊了，從第 1 列中的圖像模塊開始。上傳您可以在本教程開頭下載的下載文件夾中找到的飛濺圖像。

漿紗

轉到模塊的設計選項卡並在大小設置中強制全角。

• 強制全角：是

過濾器

然後，使用過濾器設置更改模塊的顏色。

• 色相：303deg
• 飽和度：200%

變換比例

我們也在變換設置中縮放圖像。

• 底部：150%
• 右：150%

垂直運動滾動效果

接下來，轉到高級選項卡並啟用一些垂直運動。

• 啟用垂直運動：是
• 起始偏移：0
• 中間偏移：
  • 桌面：0（50%）
  • 平板電腦：0（70%）
  • 電話：0（85%）
• 結束偏移：2
• 運動效果觸發器：元素底部

水平運動滾動效果

我們也在使用一些水平運動。

• 啟用水平運動：是
• 起始偏移：
  • 桌面：-10
  • 平板和手機：0
• 中間偏移：0
• 結束偏移：4
• 運動效果觸發器：元素底部

放大和縮小滾動效果

隨著放大和縮小效果。

• 啟用向上和向下擴展：是
• 起始比例：100%
• 中等規模：150%
• 結束比例：200%
• 運動效果觸發器：元素底部

克隆圖像模塊兩次並在行的剩餘列中放置重複項

完成第一個圖像模塊後，您可以克隆整個模塊兩次並將重複項放置在行的剩餘列中。

更改第 2 列中的圖像模塊

間距

打開第 2 列中的圖像模塊並在平板電腦和手機上添加一些上邊距。

• 最高利潤率：50%（僅限平板電腦和手機）

過濾器

更改過濾器設置中的色調。

• 色相：55度

更改第 3 列中的圖像模塊

過濾器

然後，打開第三列中的圖像模塊並相應地更改過濾器設置：

• 色相：309度
• 亮度：0%

添加第 2 行

列結構

進入下一行。 使用以下列結構：

位置

打開行設置並在高級選項卡中更改行的位置設置。

• 位置：絕對
• 地點：中心

將文本模塊 #1 添加到列

添加H1內容

是時候添加模塊了，從包含您選擇的一些 H1 內容的文本模塊開始。

H1 文本設置

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

• 標題字體：魔方
• 標題文字顏色：#ffffff
• 標題文字大小：80 像素（桌面）、50 像素（平板電腦）、35 像素（手機）

• 標題文字陰影垂直長度：0.08em
• 標題文字陰影模糊強度：0em
• 標題文字陰影顏色：#1a005b

將文本模塊 #2 添加到列

添加內容

然後，添加另一個具有一些描述內容的文本模塊。

文字設置

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

• 文字字體：Muli
• 文字顏色：#dddddd
• 文字大小：15px（桌面），14px（平板電腦和手機）
• 文本行高：2.1em

• 文字陰影顏色：#1a005b

漿紗

接下來修改模塊的寬度。

• 寬度：60%（桌面），100%（平板電腦和手機）

間距

並通過在不同屏幕尺寸上添加一些頂部和底部邊距來完成模塊設置。

• 最高利潤率：6%（桌面）、10%（平板電腦）、14%（手機）
• 底部邊距：6%（台式機）、10%（平板電腦）、14%（手機）

將按鈕模塊添加到列

添加副本

我們在專欄中需要的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

然後，轉到設計選項卡並按如下所示設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：17px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ea01a6
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px

• 按鈕字體：Rubik
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

在間距設置中也添加一些自定義填充值。

• 頂部填充：20px
• 底部填充：20px
• 左填充：60px
• 右填充：60px

盒子陰影

並通過添加框陰影完成模塊設置。

• 框陰影水平位置：5px
• 框陰影垂直位置：5px
• 陰影顏色：#30005b

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 的內置動畫和滾動效果發揮創意。 更具體地說，我們向您展示瞭如何為您為特殊場合設置的登錄頁面創建彩色飛濺動畫英雄部分。 那個場合可以是但不限於貴公司的周年紀念日或特價銷售。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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