Divi 插件亮點：終極 Divi Builder 插件
已發表: 2019-04-13Divi Builder Addons 是一個第三方插件，在Divi Builder中添加了很多高端網站使用的jQuery腳本。 只需切換您想要的腳本並將 CSS 類添加到 Divi Builder 模塊。 它易於使用，包括許多功能和動畫。
Ultimate Divi Builder 插件菜單
正常上傳並激活插件。 儀表板菜單中添加了一個名為 Ultimate Divi Builder Addons 的新菜單項。 單擊此按鈕會在左側窗口中打開一個包含許多功能的屏幕。 單擊其中任何一個會在右側窗口中顯示切換和信息。 右側窗口還包括一些效果的 CSS 類並展示如何使用它們。 其他包括用於更多功能和選項（如顏色、圖像大小、持續時間等）的多個切換。默認情況下，它們都處於禁用狀態。
顯示為紫色的功能處於啟用狀態，而顯示為灰色的功能則處於禁用狀態。 在上面的示例中，該功能包括其他選項以及 CSS 類。 單擊某個特定功能所需的所有信息都會顯示在右側窗口中。
功能包括：
- 自定義滾動條
- DoSlide 水平
- 淡入視野
- 翻轉文本
- 向下滾動時隱藏 Divi 主題標題
- jQuery 翻頁垂直滾動
- jQuery Pageflipping 水平滾動
- jQuery 滾動流
- jQuery 滾動效果
- jQuery 滾動觸發器
- jQuery 結束頁面框
- 滾動 Effect1 時加載標題
- 滾動 Effect2 時加載標題
- 滾動 Effect3 時加載標題
- 滾動 Effect4 時加載標題
- 啟示者動畫
- ScrollMagic 響應持續時間
- 滾動顯示
- StickyStack：jQuery 堆疊效果
- 滾動窗口
- 超級簡單的文本旋轉器/自動收報機
- 哇動畫
Ultimate Divi Builder 插件示例
以下是與 Divi 佈局一起使用時的一些功能示例。
自定義滾動條
自定義滾動條可讓您在內容上放置滾動條。 它有8種不同的效果。 將 CSS 類粘貼到要使用效果的部分、行或模塊的 CSS 類字段中。 在這個中，我在 Esports 佈局中為文本模塊的內容添加了自定義滾動條效果。
現在懸停時會出現滾動條，因此我可以滾動以查看同一空間中的更多內容。 這是效果1。它在現場網站上有不同的設計。 我已經照亮了背景，所以它脫穎而出。
這是效果 3。它在幻燈片的頂部和底部添加了箭頭。
效果 5 將手柄從線更改為點並更改箭頭的樣式。
翻轉文本
翻轉文本是一種文本輸入效果，可創建滴答作響的介紹動畫。 它有5種效果。 對於此示例，我將翻轉文本添加到律師助理佈局。 這是第一個翻轉文本打字效果。 它一次鍵入一個字母。 您可以使用多種不同的類。 每一種都以不同的速度打字。
jQuery 滾動流
jQuery Scroll Flow 向行或模塊添加滾動動畫。 它有5個動畫。 我已將此添加到律師助理佈局的一行中，以便它同時影響所有模塊。 您還可以將它添加到行中的一個模塊中，以便它滑動到位以適應已經存在的其餘內容。
當我滾動到該行時，內容開始顯示。 它比正常情況小，並且不透明度設置得足夠低以允許背景顯示出來。
再滾動一點會增加內容的大小和不透明度，直到它以全寬和不透明度顯示出來。 當我向上滾動時，它再次減少。 這個保持在相同的位置，但它有幾個其他類，因此您可以在調整其大小和不透明度的同時使其從右側、左側或上下滑動。
jQuery 滾動效果
jQuery ScrollFX 縮放文本並更改背景不透明度。 scrollfx 類已添加到該部分。 此部分中的模塊在您滾動到它們以及它們在屏幕上時正常顯示。
當您滾動瀏覽它們時，該部分的內容會縮小，並且它們的不透明度也會降低。
jQuery 滾動觸發器
jQuery 滾動觸發器在頁面滾動時滑動模塊。 將滾動觸發器類添加到該部分。 這是度假村的佈局。 添加類時，背景圖像會自動移到一邊。
當您到達該部分時，所有內容（包括圖像、按鈕、文本等）都會滑動到位。
然後一旦一切就緒，它就會安定下來。
jQuery 結束頁面框
jQuery End Page Box 在屏幕底部放置一個框。 它是通過將代碼添加到節末尾的文本模塊來創建的。
這會添加一個出現在屏幕底部的框，並更改為顯示您為每個部分指定的不同內容。
這是下一節。 盒子從不同的方向滑出和滑入，或者每個部分都有不同的動畫。
滾動時加載標題
Loading Header While Scrolling 向菜單添加一個欄，顯示您已經看過多少頁面。 它不需要 CSS 類。 您可以自定義滾動條的顏色。 有四種款式可供選擇。
這是效果 1。它在屏幕頂部添加了一條滾動線。 當您滾動時，它的大小會增加，顯示訪問者看到了多少頁面。
這是效果 2。它顯示一個更寬的條。
這是效果 3。當您滾動時，它會垂直增長，佔據徽標的高度。 它不會變得很大，但它仍然顯示滾動效果。
效果 4 佔用徽標的寬度。
啟示者
Revealator 將滾動觸發的動畫添加到部分、行或模塊。 它有近 40 個選項。 我正在添加麵包店佈局中的簡介。 在它的容器在屏幕上完全可見之前，blurb 會丟失。
它根據您選擇的類在屏幕上動畫。 這個有很多動畫選項，包括淡入淡出、向左旋轉、向右旋轉、向左滑動、向右滑動、向上滑動、向下滑動、放大和縮小。
滾動魔術部分濕巾
Scroll Magic Section Wipes 創建一個動畫，在您滾動時將內容擦除到屏幕上。 我認為這是所有效果中我最喜歡的。 它已添加到該部分。
一旦該部分完全顯示在屏幕上，它就會凍結在原地，下一部分會滾動到它上面。 您可以將它添加到盡可能多的部分，為整個頁面創建一個有趣的滾動方法。 如果您希望每個部分都重疊，那麼您會對 StickyStack 功能感興趣。
滾動顯示
Scroll Reveal 在滾動時顯示模塊。 從 17 種不同的動畫中進行選擇。 您可以將其添加到部分、行或模塊。 底部的部分在滾動時朝著讀者縮放。
這是效果1f。 當您滾動到該行時，該行會旋轉到位。
StickyStack：jQuery 堆疊效果
StickyStack：jQuery Stacking Effect 在面板到達視口頂部時堆疊面板。 換句話說，當您滾動時，每個部分都會在屏幕上凍結，而下一部分會滾動以重疊它。 結果在滾動上看起來很棒。 這是風險管理佈局。
這是同一頁面的另一部分。 重疊部分完美地工作。
超級簡單的文本旋轉器/自動收報機
Super Simple Text Rotator/Ticker 可讓您向文本添加標記並旋轉多個單詞。 它有5種動畫風格。 這個在簡單和可定制這兩個詞之間旋轉。
在這裡，它被旋轉以顯示第二個單詞。 兩個詞都淡入淡出。
Ultimate Divi Builder 插件價格
Ultimate Divi Builder Addons 為 59 美元，可在無限網站上使用，包括終身更新。 更新通常會添加新功能。 您可以免費試用一個演示，看看您是否喜歡它。
- 您可以從 DiviBuilderAddons.com 購買 Ultimate Divi Builder Addons。
結束的想法
Ultimate Divi Builder Addons 提供了很多功能，可以節省大量開發功能和動畫的時間。 所包含的功能數量以及它們的易用性給我留下了深刻的印象。
如果不用大的 GIF 填充這篇文章，有些更難以展示。 例如，Wow Animation 有 75 個動畫可供選擇，您可以更改延遲、持續時間、距離和重複次數。
該插件確實要求您能夠輕鬆地將 CSS 類粘貼到部分、行或模塊中。 幸運的是，這很容易做到，Divi 文檔中有大量關於粘貼 CSS 類的信息。
如果您對向 Divi 添加大量功能和動畫的簡單方法感興趣，Ultimate Divi Builder Addons 值得一試。
我們希望聽到您的意見。 您是否嘗試過 Ultimate Divi Builder 插件？ 請在評論中告訴我們您對此的看法。
精選圖片來自 GoodStudio/shutterstock.com