使用圓形計數器動畫的圖標在 Divi 中設計獨特的功能部分

大多數網站都需要精心設計的功能部分來展示產品或服務的功能。 因此，在本教程中，我將向您展示如何在 Divi 中創建一個獨特的功能部分。 為此，我們將通過 Divi 的 Circle Counter 模塊獲得一些創意，為您的簡介圖標添加動畫。 通過使用一些自定義間距，我將向您展示如何輕鬆定位您的宣傳語，使其與分隔線背景完美吻合。 最終的設計既乾淨又獨特。 只需稍加改動，它就可以成為您下一個項目的重要補充。

讓我們開始吧！

搶先看

這是設計和 gif 的一些先睹為快，以幫助說明動畫元素。

創建新頁面並部署可視化構建器

要開始，請轉到您的 WordPress 儀表板，然後轉到頁面 > 添加新內容。 然後為您提供頁面標題並單擊以使用 Divi Builder。 然後單擊以使用 Visual Builder。 系統將提示您三個選項。 選擇“從頭開始構建”選項。

您的空白畫布等待著您！

創建特徵部分標題

您的功能部分的頂部標題非常簡單。 獨特的元素是顯示在下方的微妙框陰影，為設計增添了一點深度。

要創建它，請在常規部分插入一列行。

然後向該行添加一個文本模塊並按如下方式更新設置：

內容：

<h1>Our Features</h2>
Everything you need.

文字字體：蒙特塞拉特
文字字體粗細：半粗體
文字文字大小：22px
文字方向：居中
標題字體粗細：超粗
標題文字大小：6vw（桌面）、50px（平板電腦）、30px（智能手機）

現在保存您的設置並跳轉到部分設置並添加一個框陰影，如下所示：

盒子陰影：見截圖
框陰影垂直位置：19px
框陰影模糊強度：80px
框陰影擴散強度：-16px
陰影顏色：rgba(136,150,171,0.13)

保存設置。

很簡單的東西。 現在讓我們進入有趣的部分。

創建主要特徵部分和背景設計

我們需要添加一個新部分來保存我們的功能。 通常，您可以簡單地向上一節添加一個新行，但在這種情況下，我們需要添加一個可在 Section 元素中使用的分隔線背景。

繼續並直接在您剛剛完成的部分下添加一個新部分。 然後向該行添加一個四列佈局。

我們將向這些列添加簡介，但現在讓我們更新我們的部分設置。

對於本節，我們需要給它一個自定義的最大寬度。 這對於將設計保持在較大的瀏覽器尺寸上很重要。 我們還需要添加一個部分分隔線作為背景，與我們的宣傳語的排列相吻合（稍後會詳細介紹）。

轉到部分設置並更新以下內容：

寬度：1080px
截面對齊：居中
分隔線：頂部
分隔線樣式：見截圖
分隔線顏色：rgba(136,150,171,0.07)
分隔高度：52%

保存設置。

為該部分提供 1080 像素的自定義寬度（或最大寬度）基本上是您的行在一個部分中的默認設置方式。 因此，本質上，我們將整個部分設為默認行的大小。

向四列行添加模糊

在這一點上，我們可以繼續並開始將我們的簡介添加到四列中的每一列。 單擊第一列中的灰色圖標以添加您的第一個簡介。 更新框中的內容以包含更少的文本（2 個句子），然後選擇使用圖標而不是圖像（我選擇了圖像圖標）。

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

圖標顏色：#974450
圓圈圖標：是
圓圈顏色：rgba(255,255,255,0.5)
使用圖標字體大小：是
圖標字體大小：48px
文字方向：居中

保存設置。

現在將簡介模塊複製並粘貼到剩餘的每一列中，以便在每一列中都有一個簡介。

如果您願意，此時您可以返回並更新圖標，但您不必這樣做。

添加圓形計數器以重疊模糊圖標

要將動畫添加到我們的模糊圖標中，我們將用具有不同數值的圓形計數器重疊每個圖標。 這將導致圓形動畫隨著每個圖標逐漸增加以顯示進展。 但是，您可以對每個圓形計數器使用您想要的任何數字值。

單擊第一列中模糊模塊下的灰色“添加新模塊”圖標，然後添加計數器模塊。

在開始編輯圓模塊設置之前，請繼續將其拖動到模糊模塊上方。 現在您可以按如下方式更新內容設置：

刪除標題框中的文字
數量：25

然後更新設計選項卡設置如下：

條形背景顏色：#974450（與您的簡介圖標顏色相同）
數字文本顏色：rgba(0,0,0,0)（這是完全透明的，以便隱藏數字）
數字文本大小：0px（去除圓圈內任何不需要的文本空間）
寬度：109px（這是根據將重疊的圖標的大小設置的）
模塊對齊：居中
底部邊距：-102px（這將與圖標完美重疊）

保存設置。

現在您需要做的就是將圓形計數器模塊複製並粘貼到剩餘的每一列中，然後將其拖到每個簡介的頂部。 複製的圓形計數器就位後，將第二個圓形計數器編號更新為 50，將第三個計數器編號更新為 75，將第四個計數器編號更新為 100。動畫完成後的結果應如下所示。

使用行填充來定位圖標以與分隔線重合

此設計的最後一步是將圖標定位為與分隔線背景的弧線重合。 為此，我們需要在行中添加一些自定義填充。 打開行設置並更新以下內容：

使這一行全寬：是
第 2 列自定義填充：9% 頂部（桌面），0% 頂部（平板電腦）
第 3 列自定義填充：9% 頂部（桌面），0% 頂部（平板電腦）

就是這樣！

查看最終結果。

請注意圖標現在如何通過具有不同數值的圓形計數器進行動畫處理。 並且圖標與分隔線背景重合。

功能部分在移動設備上的外觀

以下是該設計在平板電腦和智能手機顯示屏上的外觀。

最後的想法

此功能部分設計的獨特元素輕巧而微妙，這應該使您可以通過一些細微的調整輕鬆地將其合併到自己的佈局中。 如果圓形計數器動畫不適合您，請隨意將它們排除在外，只需使用簡介模塊的圓形圖標即可。 或者，您可以選擇僅使用帶有數字值的圓形計數器，用於創意佈局的特色​​統計。 如果有的話，我希望這會給你一些想法，讓你自己探索。

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

乾杯!