Divi Eklentisi Vurgusu: Ultimate Divi Builder Eklentileri

Yayınlanan: 2019-04-13

Divi Builder Eklentileri, ileri teknoloji web siteleri tarafından kullanılan birçok jQuery betiğini Divi Builder'a ekleyen üçüncü taraf bir eklentidir. Basitçe istediğiniz komut dosyalarını değiştirin ve CSS sınıflarını Divi Builder modüllerine ekleyin. Kullanımı kolaydır ve birçok özellik ve animasyon içerir.

Ultimate Divi Builder Eklentiler Menüsü

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Ultimate Divi Builder Eklentileri adlı pano menüsüne yeni bir menü öğesi eklendi. Buna tıklamak, sol pencerede birçok özelliğin bulunduğu bir ekran açar. Bunlardan herhangi birine tıklamak, sağ pencerede bir geçiş ve bilgi gösterir. Sağ pencere ayrıca bazı efektler için CSS sınıfları içerir ve bunların nasıl kullanılacağını gösterir. Diğerleri, renkler, görüntü boyutları, süreler vb. gibi daha fazla özellik ve seçenek için birden fazla geçiş içerir. Bunların tümü varsayılan olarak devre dışıdır.

Mor renkle gösterilen özellikler etkinleştirilirken gri renkte gösterilenler devre dışı bırakılır. Yukarıdaki örnekte, özellik bir CSS sınıfının yanı sıra diğer seçenekleri de içermektedir. Belirli bir özelliği nasıl kullanacağınızla ilgili ihtiyacınız olan tüm bilgiler, üzerine tıkladığınızda sağ pencerede gösterilir.

Özellikler şunları içerir:

  • Özel Kaydırma çubuğu
  • DoSlide Yatay
  • Görünüme Geç
  • Metin çevirme
  • Aşağı Kaydırırken Divi Tema Başlığını Gizle
  • jQuery Sayfa Çevirme Dikey Kaydırma
  • jQuery Sayfa Çevirme Yatay Kaydırma
  • jQuery Kaydırma akışı
  • jQuery ScrollFX
  • jQuery KaydırmaTetikleyici
  • jQuery Bitiş Sayfası Kutusu
  • Kaydırma Etkisi Sırasında Başlık Yükleniyor1
  • Kaydırma Efekti Sırasında Başlık Yükleniyor2
  • Kaydırma Efekti Sırasında Başlık Yükleniyor3
  • Kaydırma Efekti 4 Sırasında Başlık Yükleniyor
  • Açıklayıcı Animasyon
  • ScrollMagic Duyarlı Süresi
  • ScrollReveal
  • StickyStack: jQuery İstifleme Etkisi
  • Windows kaydırma
  • Süper Basit Metin Döndürücü/Ticker
  • vay canlandırma

Ultimate Divi Builder Eklenti Örnekleri

Divi mizanpajlarıyla birlikte kullanıldığında özelliklerin birkaç örneğini burada bulabilirsiniz.

Özel Kaydırma çubuğu

Özel Kaydırma Çubuğu, içeriğinize kaydırma çubukları yerleştirmenizi sağlar. 8 farklı etkisi vardır. CSS sınıfını, efekti kullanmak istediğiniz bölümün, satırın veya modülün CSS Sınıfı alanına yapıştırın. Bunda, Esports düzenindeki metin modülünün içeriğine özel bir kaydırma çubuğu efekti ekledim.

Artık aynı alanda daha fazla içerik görmek için kaydırma yapabilmem için üzerine gelindiğinde bir kaydırma çubuğu görünüyor. Bu etki 1. Canlı sitede farklı bir tasarımı var. Öne çıkması için arka planı aydınlattım.

Bu efekt 3. Slaytın üstüne ve altına oklar ekler.

Efekt 5, tutamacı bir çizgiden noktaya değiştirir ve okların stilini değiştirir.

Metin çevirme

Flipping Text, tıkırtılı bir giriş animasyonu oluşturan bir metin yazma efektidir. 5 etkisi vardır. Bu örnek için Paralegal düzenine Flipping Text ekledim. Bu, ilk Flipping Text yazma efektidir. Her seferinde bir harf yazar. Kullanabileceğiniz birkaç farklı sınıf var. Her biri farklı bir hızda yazıyor.

jQuery ScrollFlow

jQuery Scroll Flow, satırlara veya modüllere kaydırma animasyonları ekler. 5 animasyonu vardır. Bunu Paralegal düzeninde bir satıra ekledim, böylece tüm modülleri birlikte etkiler. Ayrıca, zaten orada olan içeriğin geri kalanına sığması için yerinde kayması için satırdaki modüllerden yalnızca birine ekleyebilirsiniz.

Satıra ilerlediğimde içerik gösterilmeye başlıyor. Normalden daha küçüktür ve opaklık, arka planın görünmesine izin verecek kadar düşük olarak ayarlanmıştır.

Biraz daha kaydırmak, içeriğin boyutunu ve opaklığı, tam genişliği ve opaklığıyla ortaya çıkana kadar artırır. Yukarı kaydırdıkça tekrar azalıyor. Bu, aynı konumlarda kalır, ancak birkaç başka sınıfı vardır, böylece boyutunu ve opaklığını ayarlarken sağdan, soldan veya yukarı veya aşağı kaydırmasını sağlayabilirsiniz.

jQuery ScrollFX

jQuery ScrollFX, metni ölçekler ve arka plan opaklığını değiştirir. Scrollfx sınıfı bölüme eklenir. Bu bölümdeki modüller, onlara kaydırdığınızda ve ekrandayken normal şekilde gösterilir.

Bunları kaydırdıkça, bölümün içeriği küçülür ve opaklık azalır.

jQuery Kaydırma Tetikleyicisi

jQuery kaydırma tetikleyicisi, sayfa kaydırmada bir modülü kaydırır. Kaydırma tetikleyici sınıfını bölüme ekleyin. Bu, Tatil Yeri düzenidir. Sınıf eklendiğinde arka plan görüntüsü otomatik olarak yana taşınır.

Resimler, düğmeler, metin vb. dahil olmak üzere tüm içerik, o bölüme geldiğinizde yerine kayar.

Ve sonra her şey yerine oturduğunda yerleşir.

jQuery Bitiş Sayfası Kutusu

jQuery End Page Box, ekranın altında kalan bir kutu yerleştirir. Bir bölümün sonunda bir metin modülüne kod eklenerek oluşturulur.

Bu, ekranın altında görünen bir kutu ekler ve her bölüm için belirttiğiniz farklı içeriği gösterecek şekilde değişir.

İşte bir sonraki bölüm. Kutu, bölümlerin her biri için farklı yönlerden veya farklı animasyonlarla dışarı ve içeri doğru kayar.

Kaydırırken Başlık Yükleniyor

Kaydırma Sırasında Üstbilgiyi Yükleme, menüye bir sayfanın ne kadarını gördüğünüzü gösteren bir çubuk ekler. Bir CSS sınıfı gerektirmez. Kaydırma çubuğunun rengini özelleştirebilirsiniz. Seçilebilecek dört stil var.

Bu efekt 1. Ekranın üst kısmına kayan bir çizgi ekler. Siz kaydırdıkça boyutu artar ve ziyaretçinin sayfanın ne kadarını gördüğünü gösterir.

Bu efekt 2. Çok daha geniş bir çubuk görüntüler.

Bu efekt 3'tür. Siz kaydırdıkça dikey olarak büyür ve logonun yüksekliğini alır. Çok büyümüyor ama yine de kaydırma efektini gösteriyor.

Efekt 4, logonun genişliğini alır.

açıklayıcı

Revealator, bölümlere, satırlara veya modüllere kaydırmayla tetiklenen animasyonlar ekler. 40'a yakın seçenek var. Fırın düzeninde bir tanıtım yazısı ekliyorum. Tanımlayıcı, kapsayıcı ekranda tamamen görünene kadar eksik.

Seçtiğiniz sınıfa göre ekrana canlandırır. Bu, solma, sola döndürme, sağa döndürme, sola kaydırma, sağa kaydırma, yukarı kaydırma, aşağı kaydırma, yakınlaştırma ve uzaklaştırma gibi birçok animasyon seçeneğine sahiptir.

Sihirli Bölüm Mendillerini Kaydır

Scroll Magic Chapter Wipes, siz kaydırdıkça içeriği ekrana silen bir animasyon oluşturur. Sanırım tüm efektler arasında en sevdiğim bu. Bölüme eklenmiştir.

Bu bölüm ekranda tam olarak gösterildiğinde yerinde donar ve bir sonraki bölüm üzerinde kayar. Tüm sayfa için ilginç bir kaydırma yöntemi oluşturmak için bunu birçok bölüme ekleyebilirsiniz. Her bölümün üst üste gelmesini istiyorsanız, StickyStack özelliğiyle ilgileneceksiniz.

Kaydır Göster

Scroll Reveal, kaydırmadaki modülleri ortaya çıkarır. 17 farklı animasyon arasından seçim yapın. Bölümlere, satırlara veya modüllere ekleyebilirsiniz. Alt kısımdaki bölüm, kaydırma sırasında okuyucuya doğru yakınlaşıyor.

Bu etki 1f'dir. Siz kaydırdıkça satır yerine döner.

StickyStack: jQuery İstifleme Etkisi

StickyStack: jQuery Stacking Effect, panelleri bir görünümün tepesine ulaştıklarında istifler. Başka bir deyişle, siz kaydırdıkça her bölüm ekranda donar ve sonraki bölüm üst üste gelecek şekilde kayar. Sonuç kaydırmada harika görünüyor. Bu, Risk Yönetimi düzenidir.

İşte aynı sayfanın başka bir bölümü. Örtüşen kısımlar mükemmel çalışıyor.

Süper Basit Metin Döndürücü/Ticker

Super Simple Text Rotator/Ticker, metne işaretleme eklemenize ve birkaç kelimeyi döndürmenize olanak tanır. 5 animasyon stili vardır. Bu, Basit ve Özelleştirilebilir sözcükleri arasında dönüyor.

Burada, ikinci kelimeyi görüntülemek için döndürülür. Her iki kelime de solup gidiyor.

Ultimate Divi Builder Eklentileri Fiyatı

Ultimate Divi Builder Eklentileri, sınırsız web sitelerinde kullanım için 59 ABD dolarıdır ve ömür boyu güncellemeler içerir. Güncellemeler genellikle yeni özellikler ekler. Beğenip beğenmediğinizi görmek için ücretsiz bir demo deneyebilirsiniz.

  • Ultimate Divi Builder Eklentilerini DiviBuilderAddons.com'dan satın alabilirsiniz.

Biten Düşünceler

Ultimate Divi Builder Eklentilerinin sunabileceği çok şey vardır ve özellik ve animasyon geliştirmede çok zaman kazandırabilir. Dahil edilen özelliklerin sayısından ve kullanımlarının ne kadar kolay olduğundan çok etkilendim.

Bu makaleyi büyük GIF'lerle doldurmadan bazılarını göstermek daha zordur. Örneğin, Wow Animation'ın seçebileceğiniz 75 animasyonu vardır ve gecikmeyi, süreyi, mesafeyi ve tekrarlama sayısını değiştirebilirsiniz.

Eklenti, bir CSS sınıfını bir bölüme, satıra veya modüle yapıştırma konusunda rahat olmanızı gerektirir. Neyse ki, bunu yapmak kolaydır ve Divi belgelerinde CSS sınıflarına yapıştırma hakkında birçok bilgi vardır.

Divi'ye birçok özellik ve animasyon eklemenin kolay bir yolu ile ilgileniyorsanız, Ultimate Divi Builder Eklentileri göz atmaya değer.

Senden duymak istiyoruz. Ultimate Divi Builder Eklentilerini denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

GoodStudio / Shutterstock.com aracılığıyla Öne Çıkan Görsel