Yerleşik dönüştürme seçenekleri Divi sayfadaki herhangi bir öğeyi kolaylıkla yeniden boyutlandırmanıza, döndürmenize, eğmenize veya konumlandırmanıza olanak tanıyan son derece kullanışlı bir tasarım aracı olduklarını kanıtladılar. Ayrıca, harika vurgulu efektler için öğeleri vurgulu duruma dönüştürmeyi bile seçebilirsiniz. Bugün size bu animasyonları tek bir tıklamayla nasıl dağıtacağınızı göstereceğiz.

Bu yöntem, jQuery kullanımını gerektirir. Bu tekniğin en güzel yanı, yerleşik tasarım parametrelerini kullanabilmenizdir. Divi Dönüşüm özelliklerine stil vermek için, ardından bu dönüşüm özelliklerini bir fare tıklamasıyla etkinleştirin (veya devre dışı bırakın). Bu, ortaya çıkarmak için bir sürü benzersiz olasılığın önünü açacaktır. içindekiler öğeleri fareyle üzerine gelmek yerine tıklamayla hareket ettirerek gizlenir. Ayrıca çok fazla CSS bilme ihtiyacını da azaltmaya yardımcı olur.

Başlayalım.

Başlamak için neye ihtiyacınız var?

Bu eğitim için ihtiyacınız olan tek şey Divi. Başlamak için WordPress kontrol panelinize gidin. Yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve ön plandaki Divi oluşturucuda tasarım yapmaya devam edin. “Sıfırdan inşa et” seçeneğini seçin. Artık gitmeye hazırsınız!

Temel fikir açıkladı

Bu eğitimde çok fazla ayrıntıya girmeden önce, bu tekniğin nasıl çalıştığını birkaç kelimeyle anlatacağım.

Divi'de bir öğeyi (bölüm, çizgi veya modül) her özelleştirdiğinizde, arka planda bu öğeye özel CSS eklersiniz. Örneğin, Divi'nin yerleşik ayarlarını kullanarak, bir blurb modülüne bir dönüştürme rotasyonu özelliği ekleyebilirsiniz, böylece modülü Z ekseni boyunca 20 derece döndürür.

Blurb divi ayarları

Ancak sahne arkasında, bu metin modülüne eklenen ve şuna benzeyen özel bir CSS oluşturursunuz:

.et_pb_text_0 {transform: rotateZ (20deg); }

Yeterince basit. Diyelim ki aynı vurgulu dönüştürme seçeneğini eklemek istediniz. Divi Builder'ın ayarlarında üzerine gelme durumu için dönüştürme özelliğini uygulamanız yeterlidir.

Divi vurgulu animasyon

Kod sahne arkasındaki gibi görünecek:

.et_pb_text_0: hover {transform: rotateZ (20deg); }

Ancak, dönüşüm özelliğini tıklamayla dağıtmak istiyorsanız, işler biraz farklı işlemelidir. Öğede (veya metin modülünde) tıklama olayını tetiklemek için bir javascript kodu girmeniz gerekecektir.

Mevcut örneğimizle temel hedefimiz, tıklama ile "transform: rotateZ (20deg)" dönüştürme özelliğini açıp kapatmaktır. Bunu yapmanın kolay bir yolu, "transformer: yok!" Özelliğine sahip özel bir CSS sınıfı oluşturmaktır. Sayfa (veya harici stil sayfası) ayarlarında önemli ”. Böyle bir şeye benzeyecekti.

.toggle-transform-animation {dönüşümü: yok! önemli; }

Divi sayfasının parametreleri

Bu CSS yerinde olduğunda. Dönüşüm özelliğimizi olan blurb modül öğesine CSS sınıfını "toggle-transform-animation" ekleyebiliriz.

Parametrelerin özeti

Bu, transform özelliğini devre dışı bırakır (geçersiz kılar) ve transform özelliğinin stili zaten buna eklenmiş olsa bile başlangıçta etkinleştirilmesini engeller.

Artık tek yapmanız gereken, öğeye tıkladığınızda bu özel CSS sınıfını etkinleştirmektir (eklemek ve kaldırmak). Böylece, elemana her tıkladığımızda, sınıf silinecek ve dönüşüm özellikleri (Divi ile eklediğiniz özellikler) konuşlandırılacaktır.

İşte bunun nasıl yapılacağına dair basit bir örnek. İlk olarak, "transform_target" adlı blurb modülüne başka bir CSS sınıfı ekleyin.

Tıklamada Divi Dönüşümü Özellikleri

Daha sonra Divi > Tema Seçenekleri > Entegrasyon'a gidin ve aşağıdaki jQuery betiğini başlığa ekleyin. blogunuzun:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Divi entegrasyon bölümü ekle

Bu kadar ! Şimdi, sunum modülüne her tıkladığınızda, Divi'de sunuya eklediğiniz dönüştürme özelliği etkinleştirilecek veya devre dışı bırakılacaktır.

Animasyon çekimi

Şimdi bir örnek oluşturalım, böylece bunun kendi projeleriniz için ne kadar yararlı olabileceğini görebilirsiniz.

Dönüşüm özellikleri nasıl değiştirilir Divi'deki içeriği görüntülemek için tıklayın

Bu örnek için yukarıda kullanılan basit bir tanıtım yazısı örneğine sadık kalacağız. Daha sonra, bunun arkasına ek tanıtım yazısı ekleyeceğiz, böylece üstteki tanıtım yazısına her tıkladığınızda, önünüzden çekilecek ve içindekiler belgenin arkasında duran ek tanıtıcı yazı.

Önde ve arkada Blurb modülleri oluşturma

Ardından, 1 sütununa bir sunum modülü ekleyin.

Divi özetini değiştirGüncelleme içindekiler tanıtım yazısını yalnızca bir başlık içerecek şekilde kullanın (varsayılan gövde içeriğini kaldırın), ardından tanıtım yazısı simgesi ekleyin.

Divi özet modülünü özelleştirinArdından tasarım parametrelerini aşağıdaki gibi güncelleyin:

Arka plan rengi: #4c5866
Simge Rengi: #ffffff
Metnin yönü: merkez
Metin rengi
: Hafif Özel Marj: En altta 0px
Özel dolgu: Üstte 15%, altta 15%, solda 10%, sağda 10%

Divi modülü aralığını değiştirin

Daha sonra bu modüle geri döneceğiz, ancak şimdilik, ek içerikli bir "dönüş" modülü olarak hizmet edecek ikinci Blurb modülümüzü oluşturmamız gerekiyor.

Bunu yapmak için, az önce oluşturduğunuz sunum modülünü çoğaltın.

Yinelenen divi özet modülü

Ardından, ikinci modülde, sunum simgesini (ve varsayılan görüntüyü) kaldırın ve gövde içeriğini modüle geri ekleyin. Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:

Arka plan rengi: rgba (76,88,102,0.3)
Metin rengi: Siyah
Özel dolgu:% 20 üst

Divi yazı tipini ve arka planını değiştirin

Modülü Özetten önce konumlandırın

Artık iki görselimiz şekillendirildiğine göre, ön (üst) tanıtımımıza geri dönmeli ve onu arka (alt) tanıtım yazımızın üzerine yerleştirmeliyiz. Bunu yapmak için, ona% 100 yükseklikte ve% 100 genişlikte mutlak bir konum vereceğiz.

İlk olarak, üst / ön sunum modülü ayarlarını açın ve aşağıdakileri güncelleyin:

yükseklik:% 100;
genişlik:% 100;

Tıklamada Divi Dönüşümü Özellikleri

Ardından ana öğeye aşağıdaki özel CSS kodunu ekleyin:

pozisyon: mutlak! önemli; geçiş: tüm .5;

Ardından z dizinini aşağıdaki gibi güncelleyin:

Z dizini: 2000

Css divi modülünü özelleştirin

% 100 yükseklik ve genişlik ve z indeksi ile birlikte mutlak konum, blurb modülünün arkasındaki blurb modülünün üstünde kalmasını sağlar. Geçiş özelliği aslında bir sonraki tıklamada devreye alacağımız dönüşüm seçeneklerinin geçiş süresidir. Ve "imleç: işaretçi", öğenin kullanıcı tarafından tıklanabilir görünmesi için imleci değiştirmektir.

Ön bulanıklığa dönüştürme seçenekleri ve özel sınıflar ekleme

Şimdi dönüştürme özelliklerimizi ön kısma eklemenin zamanı geldi. Daha sonra jQuery'mizin bu özellikleri tıklamayla değiştirmesi için gerekli olan özel CSS sınıflarını ekleyeceğiz.

Ön bulanık tasarım parametreleri altında aşağıdaki dönüşüm özelliklerini ekleyin:

X ve y dönüşüm ölçeği:% 20

Divi dönüşümü

Orijini dönüştür: üst orta

Değişiklik dönüşümü divi

Bu noktada gördüğünüz dönüşüm tasarımının tıklamayla tetikleneceğini unutmayın. İstenilen tasarımı elde etmek için sadece Divi oluşturucudan yararlanıyoruz. Bu durumda, ön yazı büzülür ve tıklanabilir bir simge gibi üst kısmında ortalanır.

İşiniz bittiğinde, jQuery ile ön bulanıklığı hedeflemek için gereken iki CSS sınıfını aşağıdaki gibi ekleyin:

CSS sınıfı: toggle-transform-animation transform_target

(Her sınıf adını bir boşlukla ayırdığınızdan emin olun)

Tıklamada Divi Dönüşümü Özellikleri

Ardından, dönüştürme özelliklerini jQuery ile etkinleştirmek ve devre dışı bırakmak için kullanılacak aşağıdaki özel CSS kod pasajını ekleyin.

.toggle-transform-animation {transform: none! önemli; }

Divi sayfa ayarlarıÖnceden eklenen bulanıklaştırma dönüştürme özelliklerinin, bu sınıfa uygulandığı için devre dışı bırakıldığını fark edeceksiniz.

Şimdi Divi> Tema seçenekleri> Entegrasyon'a gidin ve aşağıdaki jQuery komut dosyasını blogun başına ekleyin:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Divi entegrasyon bölümü ekle

Son sonucu görelim.

Animasyon divi modülü tanıtım yazısı

Daha da etkileyici tasarımlar yaratmak için bu örneği kullanabilirsiniz. Görüşlerinizi yorumlar bölümünde paylaşmaktan çekinmeyin.