Divi'nin yerleşik dönüştürme seçeneklerinin, bir 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ı olduğu kanıtlanmıştır. Üstelik, etkileyici fareyle üzerine gelme efektleri için öğeleri fareyle üzerine gelme durumuna çevirmeyi bile seçebilirsiniz. Bu yüzden bugün size bu animasyonları tek bir tıklama ile nasıl yerleştireceğinizi göstereceğiz.

Bu yöntem, jQuery'nin kullanılmasını gerektirir. Bu teknikle ilgili harika olan şey, Divi'nin yerleşik tasarım ayarlarını kullanarak dönüştürme özelliklerini biçimlendirebilmeniz ve ardından bir fare tıklamasıyla bu dönüştürme özelliklerini açabilmeniz (veya kapatabilmeniz). Bu, öğeleri fareyle üzerine gelme yerine bir tıklamayla hareket ettirerek gizli içeriği ortaya çıkarmak için bir dizi benzersiz olasılık açacaktır. Ayrıca CSS hakkında çok şey bilme ihtiyacını azaltmaya da 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şturucudaki tasarıma devam edin. "Sıfırdan oluştur" 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, dönüştürme özelliğini devre dışı bırakır (geçersiz kılar) ve dönüştürme özelliği stili ona zaten 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

Ardından Divi> Tema seçenekleri> Entegrasyon'a gidin ve aşağıdaki jQuery komut dosyasını blogunuzun başına ekleyin:

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 örneğine bağlı kalacağız. Ardından, arkasına fazladan bir yazı ekleyeceğiz, böylece en üstteki habere her tıkladığınızda, üstte oturan fazladan tanıtım içeriğini ortaya çıkarmak için yoldan çekilir. belge.

Önde ve arkada Blurb modülleri oluşturma

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

Divi özetini değiştirDüzen metninin içeriğini yalnızca bir başlık içerecek şekilde güncelleyin (varsayılan gövde içeriğini kaldırın) ve bir sunum 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.

2 hisseleri
hisse2
cıvıltı
Enregistrer