如何使用 Divi 創建動畫邊框重疊以突出顯示內容

正在尋找一種獨特的方式將頁面的特定部分置於聚光燈下？ 繼續閱讀！ 今天，我們將向您展示如何創建動畫邊框重疊以突出顯示頁面上的內容。 我們將在 App Developer Layout Pack 的登錄頁面上創建三個不同的動畫邊框重疊，但您可以將此技術用於您正在構建的任何類型的網站。 它肯定會幫助您為頁面添加額外的維度。 我們希望本教程也能激發您創建自己的替代動畫邊框重疊。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下所有三個示例的結果。 您也可以在較小的屏幕尺寸上獲得類似的結果。

示例#1

示例#2

示例#3

訂閱我們的 YouTube 頻道

使用 App Developer Layout Pack 的登陸頁面創建新頁面

您需要做的第一件事是使用 App Developer Layout Pack 的登錄頁面創建一個新頁面。

克隆英雄部分

我們的前兩個示例是在英雄部分創建的。 如果您想重新創建兩個示例，建議您克隆 hero 部分，以便您可以繼續複製以重新創建第二個示例。

重新創建示例 #1

向英雄部分添加新行

列結構

讓我們開始重新創建第一個示例！ 使用以下列結構在專業部分添加一個新行：

添加文本模塊

將內容框留空

將新的文本模塊添加到該行並確保將內容框留空。 我們將該模塊用於其內置設計選項，而不是顯示書面內容。

間距

轉到文本模塊的間距設置，並通過添加自定義頂部和底部填充為模塊提供一個形狀。 通過添加一些負上邊距，在此模塊和之前的模塊之間創建重疊。

• 上邊距：-480px
• 頂部填充：223px
• 底部填充：223px

邊界

然後，轉到模塊的邊框設置並添加您選擇的邊框。

• 邊框寬度：9px
• 邊框顏色：#0ae2ff
• 邊框樣式：開始

盒子陰影

也添加一個框陰影。

• 框陰影模糊強度：1px
• 框陰影傳播強度：15px
• 陰影顏色：rgba(10,226,255,0.59)

動畫片

並使用動畫設置使內容流行。

• 動畫風格：翻轉
• 動畫重複：一次
• 動畫方向：右
• 動畫持續時間：1500ms
• 動畫延遲：1500ms
• 動畫強度：500%

重新創建示例 #2

將新行添加到復制英雄部分

進入第二個例子！ 使用以下列結構向重複的英雄部分添加一個新行：

添加文本模塊 #1

將內容框留空

我們再次使用空的文本模塊。

間距

轉到間距設置並使用自定義頂部和底部填充為模塊指定一個形狀。 通過添加一些負上邊距使其與之前的模塊重疊。

• 上邊距：-480px
• 頂部填充：223px
• 底部填充：223px

邊界

繼續向文本模塊添加邊框。

• 邊框寬度：9px
• 邊框顏色：#0ae2ff
• 邊框樣式：雙

動畫片

並使用動畫設置來創建滾動效果。

• 動畫風格：滾動
• 動畫重複：一次
• 動畫方向：中心
• 動畫持續時間：4500ms
• 動畫延遲：1500ms
• 動畫強度：100%
• 動畫開始不透明度：100%

克隆文本模塊

完成第一個文本模塊的修改後，繼續並克隆它。

更改間距

打開副本的設置並更改間距設置中的上邊距值。

• 上邊距：-495px

更改邊框

還要修改邊框顏色。

• 邊框顏色：#ededed

更改動畫

並修改動畫設置以實現您在本文預覽中看到的結果。

• 動畫重複：循環
• 動畫持續時間：5000ms
• 動畫延遲：2000ms

重新創建示例 #3

更改第 2 列中圖像模塊的間距

繼續下一個也是最後一個例子！ 導航到頁面上的 process 部分，並向包含中間大插圖的 Image Module 添加一些頂部填充。

• 上邊距：70px（桌面），0px（平板和手機）

為現有文本模塊添加背景顏色

繼續為第一列和第三列中的每個文本模塊添加白色背景色。

• 背景顏色：#ffffff

將文本模塊添加到第 1 列

將內容框留空

我們現在可以開始添加第一個動畫邊框重疊！ 將新的文本模塊添加到第一列（請參閱打印屏幕）並確保將內容框留空。

間距

接下來轉到文本模塊的間距設置，並使用自定義邊距和填充值創建形狀和重疊。

• 上邊距：-230px
• 左邊距：80px
• 右邊距：100px
• 頂部填充：120px
• 底部填充：120px

邊界

接下來添加邊框。

• 邊框寬度：13px
• 邊框顏色：#bcf5f3
• 邊框樣式：雙

動畫片

繼續添加您選擇的動畫，以幫助您突出顯示您共享的內容。

• 動畫風格：折疊
• 動畫重複：一次
• 動畫方向：右
• 動畫強度：100%

Z索引

為了確保邊框出現在內容下方，我們將對包含邊框設置的文本模塊的 Z 索引使用負值。

• Z 指數：-1

克隆文本模塊並放置在第 1 列的末尾

完成創建和修改文本模塊後，繼續並克隆它。 將副本放在第一列的末尾。

更改邊框

更改邊框顏色。

• 邊框顏色：#ffc0ec

更改動畫

並添加動畫延遲。

• 動畫延遲：1000ms

將文本模塊添加到第 3 列

將內容框留空

繼續將文本模塊添加到第三列（參見打印屏幕），並確保將內容框留空。

間距

轉到間距設置並使用自定義邊距和填充值創建形狀和重疊。

• 上邊距：-230px
• 左邊距：100px
• 右邊距：-80px
• 頂部填充：120px
• 底部填充：120px

邊界

接下來添加您選擇的邊框。

• 邊框寬度：13px
• 邊框顏色：#7479ff
• 邊框樣式：雙

動畫片

以及包含比前兩個文本模塊更高的動畫延遲的動畫。

• 動畫風格：折疊
• 動畫重複：一次
• 動畫方向：左
• 動畫延遲：2000ms
• 動畫強度：100%

Z索引

使用負 Z 索引確保模塊顯示在內容下方。

• Z 指數：-1

克隆文本模塊並放置在第 3 列的末尾

完成添加和修改文本模塊後，克隆它並將副本放在第三行的末尾。

更改邊框

更改副本的邊框顏色。

• 邊框顏色：#b3d1ff

更改動畫

添加一些額外的動畫延遲，你就完成了！

• 動畫延遲：3000ms

預覽

現在我們已經完成了所有步驟，讓我們最後看看我們在本教程中重新創建的所有三個示例的結果。

示例#1

示例#2

示例 #3

最後的想法

在這篇文章中，我們向您展示瞭如何使用動畫邊框重疊將您的內容置於聚光燈下。 這是一種很好的技巧，可以將注意力吸引到頁面的特定部分並以優雅的方式進行。 您可以將此技術用於您正在構建的任何類型的網站。 如果您有任何問題或建議，請務必在下方評論區留言！