如何使用 Divi 延遲創建重疊動畫

已發表: 2019-04-12

您網站成功的很大一部分取決於您是否能夠給訪問者留下深刻印象。不僅與您的產品或服務有關，還與您的溝通方式以及您的網站設計得如何。因為讓我們面對現實，網站往往是第一印象。與任何其他類型的第一印像類似，您希望它留下良好的回味。

現在，如果您正在尋找一種獨特的方式將您的某些內容置於聚光燈下，那麼創建微妙的重疊動畫可能正是您所需要的。這些微妙的重疊動畫有點像您的訪客的幻燈片。他們不必滾動或單擊任何內容，內容只是以優雅的方式顯示。

讓我們開始吧！

預覽

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

桌面

重疊動畫

移動的

重疊動畫

方法

我們將開始以垂直順序添加我們需要的所有設計元素，沒有重疊
當我們添加所有設計元素時，我們還將添加具有特定動畫延遲的自定義動畫
這些動畫延遲只有在您完成本教程的最後一部分後才有意義，該部分側重於重疊
本教程的一個重要部分是使用與該部分具有相同背景顏色的形狀分隔模塊來使行內容延遲“消失”
一旦您了解了使該方法起作用所需的不同步驟，您就可以將此技術應用於您正在處理的任何類型的設計

讓我們開始創作吧！

添加新部分

背景顏色

首先創建一個新頁面或打開一個現有頁面，然後向其中添加一個常規部分。打開部分設置並添加背景。

背景顏色：#f3f3ec

重疊動畫

添加第 1 行

列結構

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

重疊動畫

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。我們這樣做的原因是為了擺脫所有默認的像素間距。在接下來的步驟中，我們將使用視口單元添加我們需要的所有空間。

使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：1

重疊動畫

將文本模塊添加到列

添加 H2 內容

讓我們開始添加模塊吧！我們需要的第一個模塊是帶有一些 H2 內容的文本模塊。請記住，此模塊將在幾秒鐘後“消失”，因此您希望使其簡短、相關且易於記憶。

重疊動畫

H2 文本設置

然後，轉到設計選項卡並修改 H2 文本設置。

標題 2 字體：Poppins
標題 2 文本顏色：#333333
標題 2 文字大小：5vw

重疊動畫

間距

在間距設置中使用一些左右填充創建您想要的空間。

左填充：15vw
右填充：39vw

重疊動畫

將分隔模塊添加到列

能見度

進入下一個模塊，它是一個分隔模塊。我們正在使用此模塊使文本模塊“消失”。為此，我們需要四樣東西；背景顏色（與部分顏色相同，因此您不會注意到它），足夠的填充（以確保您可以重疊上一個模塊中的所有內容），垂直重疊（覆蓋整個模塊）區域）和動畫延遲（讓第一個模塊有時間在接管之前發光）。添加分隔線模塊後，請確保禁用“顯示分隔線”選項。