Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

Les options de transformation intégrées de Divi se sont révélées être un outil de conception extrêmement utile, vous permettant de redimensionner, faire pivoter, incliner ou positionner n’importe quel élément d’une page avec facilité. Et vous pouvez même choisir de transformer des éléments en état de survol pour obtenir des effets de survol impresisonnants. Nous allons donc aujourd’hui, vous montrez comment déployer ces animations en un clic.

Cette méthode nécessite l’utilisation de jQuery. L’atout majeur de cette technique est que vous pouvez utiliser les paramètres de conception intégrés de Divi pour attribuer un style aux propriétés de transformation, puis activer (ou désactiver) ces propriétés de transformation d’un clic de souris. Cela ouvrira une tonne de possibilités uniques pour révéler du contenu caché en déplaçant des éléments sur un clic plutôt que sur le survol. Et cela aide également à réduire le besoin de connaître beaucoup de CSS.

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.

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.

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; }

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

Cela désactivera (remplacera) la propriété de transformation et l'empêchera d’activer initialement même si le style de la propriété de transformation lui a déjà été ajouté.

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

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');
    }); 
});

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.

Ş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.

Dü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.

Ardı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%

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.

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:

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

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

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;

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

% 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

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

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)

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; }

Ö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');
    }); 
});

Son sonucu görelim.

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

%d bu sayfayı beğendi blogcular: