Ana İçeriğe Geç

Divi'de animasyonlu çekmeceler nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

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. [Önerilen]

Altbilgi çekmeceleri, kullanıcılar tarafından kolayca erişilebilen ek içeriği depoladıkları için herhangi bir web sitesine yararlı eklemelerdir. Altbilgi çekmeceleri, bir düğmeye tıklayarak veya üzerine gelindiğinde açılıp kapatılabilen web içeriği kaplarıdır (Divi bölümü gibi). Premium içerik için biraz zulaya sahip olmak gibi.

Bu eğitimde, Divi'de kayan bir altbilgi çekmecesi tasarlayacağız. Altbilgi çekmecesini genel web sitesi şablonu altbilgi alanına ekleyeceğiz, böylece altbilgi çekmecesine normal altbilgi içeriğiyle site genelinde erişilebilir.

Kullanacağımız işlemle, herhangi bir Divi bölümü (ve içeriği) birkaç dakika içinde bir alt bilgi çekmecesine dönüştürülebilir.

Altbilgi Çekmecesi Şablonunu Divi Sitenize Ekleme

Bu şablonun eklenmesi, Divi sitenizdeki varsayılan web sitesi şablonunun (varsa) yerini alacaktır. Canlı bir sitede hiçbir şeyi karıştırmamak için onu bir test sitesine eklemenizi öneririz.

Sabit altbilgi çekmecesi modelini kendi web sitenize aktarmak için, JSON dosyasına erişmek için indirme zip dosyasını açın.

Ardından WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin.

Ardından sayfanın sağ üst tarafındaki taşınabilirlik simgesine tıklayın.

Taşınabilirlik penceresinde, önceden açtığınız JSON dosyasını seçin ve varsayılan web sitesi şablonunda önceden sahip olmadığınız bir şey olması durumunda, 'İçe aktarmadan önce yedeklemeyi indir' seçeneğini seçin. değiştirmek istemedi.

Ardından İçe Aktar düğmesini tıklayın.

Model divi'yi içe aktar

Son olarak, tema üreticisine değişiklikleri kaydedin ve sabit altbilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.

Divi düzeni değişikliklerini kaydedin

Şimdi öğreticiye geçelim, tamam mı?

Bölüm 1: Global Altbilgi Ekleme

Divi tema oluşturucusu, varsayılan web sitesi şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.

Global bir altbilgi oluşturmak için, WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonunun içindeki "Genel Altbilgi Ekle" alanına tıklayın.

Divi düzenleyici seçimi

Ardından açılır listeden "Genel Altbilgi Oluştur" seçeneğini seçin.

Divi model altbilgisi ekle

Genel altbilgi düzenine önceden tanımlanmış bir düzen ekleme

Bu, Model Yerleşim Düzenleyicisini dağıtacak ve burada, inşa etmeye nasıl başlamak istediğinize dair üç seçenek size hemen sorulacaktır. "Önceden tanımlanmış bir düzen seçin" seçeneğini seçin.

Önceden oluşturulmuş divi modelini seçin

Kitaplıktan Yükle açılır penceresinde, kırtasiye açılış sayfası düzenini bulun. Ardından "Bu düzeni kullan" ı tıklayın.

Bir divi modeli kullanın

Hazır mizanpajdaki istenmeyen içeriği kaldırın

Düzen düzenleyiciye yüklendikten sonra, ayarlar menüsündeki katmanlar simgesine tıklayarak Katmanlar açılır kutusunu genişletin. Ardından, son ikisi dışındaki tüm düzen bölümlerini silin.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Gereksiz bölümü silin

İki bölümü taşıma ve etiketleme

Bölümler kaldırıldıktan sonra, biri "Altbilgi" ve diğeri "Nasıl çalışır" başlıklı iki bölümünüz olmalıdır. "Altbilgi" bölümünü düzenin en üstüne taşıyın.

Divi altbilgisi

Alt bölümdeki ifadeyi "Altlık Çekmecesi" olarak değiştirin. Bu, altlık çekmecemizin içeriği olarak kullanacağımız bölüm olacaktır.

Divi altbilgi etiketini değiştir

Bölüm 2: Sabit altbilgi çekmecesini oluşturma

Bölümlerden birini altbilgi ve diğerini altbilgi çekmecesi olarak belirlediğimize göre, artık sabit altlık çekmecemizi oluşturmaya hazırız. Altbilgi çekmecesini değiştirmek için kullanacağımız blurb simgesini oluşturarak başlayalım.

Altbilgi çekmecesi düğmesinin oluşturulması

Yeni bir satır ekle

Alt altbilgi bölümünde, bir sütuna yeni bir satır ekleyin.

sabit ayak çekmece

Yeni satırı "Çekmece Düğmesi" olarak etiketleyin çünkü bu, çekmeceyi açıp kapatmak için kullanılan düğmeyi içerecek satırdır. Ardından çizgiyi bölümün üstüne taşıyın.

Seçim düzeni divi

Satır dolgu

Bir modül eklemeden önce, satır ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Confiuration divi aralığı

Bölüm dolgusu

Ardından "Altbilgi çekmecesi" bölümündeki ayarları açın ve dolguyu aşağıdaki gibi güncelleyin:

Divi bölüm aralığı yapılandırması

Altbilgi çekmecesini değiştiren tıklanabilir düğmeyi oluşturmak için, simgeli bir tanıtım modülü kullanacağız. Ve, Blurb kapsülü kabının kare şeklini daire simgesiyle birleştirerek ona benzersiz bir su damlası şekli vereceğiz.

İşte böyle.

Bir Bulanıklaştırma modülü ekleme

Bölümün üst kısmındaki "Çekmece düğmesi" satırına bir sunum metin modülü ekleyin.

Altbilgi çekmecesi divi
Bulanık içerik / simge

Ardından, varsayılan başlığı ve gövde içeriğini kaldırın ve sol üst köşeyi işaret eden ok simgesini seçin (ekran görüntüsüne bakın). Kısmen döndürülmüş simgeyi kullanıyoruz çünkü onu daha sonra döndüreceğiz.

Simge altbilgi çekmecesi divi'yi seçin
Bulanık Tasarım

Ardından sunum metnini aşağıdaki gibi verin:

  • Arka Plan Rengi: # 081540
Divi arka planını değiştir

Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:

  • Simge rengi: #eeeeee
  • Daire simgesi: EVET
  • Daire rengi: # 081540
  • Simge yazı tipi boyutunu kullan: EVET
  • Simge yazı tipi boyutu: 17 piksel
Blurb divi düğmesini özelleştirin
Sunum metni boyutu

Şimdi modüle aşağıdaki gibi bir yükseklik ve genişlik verin:

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Genişlik: 30px
  • Yükseklik: 30px

Bu, su damlası şeklini oluşturmak için daire simgesinin metin kabına taşmasına neden olur.

Divi düğme tasarımını düzenleyin
Bulanık Konum

Ardından, sunum metnine bölümün üst ortasında mutlak bir konum verin.

  • Pozisyon: Mutlak
  • Yer: Top Center
Divi düğme konumunu değiştir
Bulanık dönüşüm ayarları

Şimdi, bulutu / simgeyi yukarı döndürmek ve bölüm kabının hemen üstüne konumlandırmak için dönüştürme seçeneklerini kullanabiliriz. Şimdi, tarayıcı penceresinin altındaki bölümü gizlediğimizde, simge görünür / tıklanabilir kalacaktır.

Aşağıdaki öğeleri güncelleyin:

  • Çevir X eksenini dönüştür: -50%
  • Y ekseni çevirisini dönüştür:% -250
  • Z ekseni dönüşünü dönüştürün: -45 derece

Ardından varsayılan simge animasyonunu kaldırın:

  • Resim / Simge Animasyonu: Animasyon Yok
Divi'ye dön düğmesi

Çekmeceyi değiştirmek için JQuery kullanacağız, bu nedenle metni / simgeyi kodda daha sonra kullanacağımız bir CSS sınıfıyla tıklanabilir bir öğe olarak hedeflememiz gerekiyor. Aşağıdaki CSS sınıfını ekleyin:

  • CSS sınıfı: hedef çekmece
Bir divi seçici tanımlayın

Altbilgi çekmecesi bölüm ayarları

Şimdi çeviri dönüştürme seçeneğini kullanarak "Altlık Çekmecesi" bölümünü gizleyeceğiz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

  • Y eksenini çevirme dönüşümü:% 100

Buradaki dönüşümü kullanmanın güzelliği, yüzde değerlerinin öğenin gerçek boyutuna dayalı olmasıdır. Böylece, Y ekseni üzerindeki% 100, doğrudan bölümün yüksekliğine göre olacaktır (herhangi bir zamanda neyse, nomatter). Başka bir deyişle, eleman kendi yüksekliği kadar tam mesafe aşağı hareket ettirilecektir.

Bölüm divi dönüştür

“Footer Drawer”ı tekrar görüntüye getirmek için, bölüme yeni eklediğimiz dönüşüm çevirisini tersine çevirmemiz gerekecek. Bunu yapmak için, öğeyi bir CSS sınıfıyla hedeflememiz ve simgeye tıklayarak çeviri dönüşümünü devre dışı bırakmamız gerekecek (tüm bölümü orijinal konumuna geri getirin).

Altbilgi çekmecesi bölümüne bir CSS sınıfı ekleme

Gelişmiş sekmesinin altında, aşağıdaki CSS sınıfını ekleyin:

  • CSS sınıfı: has-dönüşümü
Add sınıfında dönüşüm divi var

Altbilgi çekmecesi bölümü Sabit konum

Son adım için, altlık çekmecesini tarayıcı penceresinin altında (simgesiyle birlikte) kayacak şekilde sabitlememiz gerekir.

"Altbilgi Çekmecesi" bölümünün konumunu aşağıdaki gibi güncelleyin:

  • Pozisyon: sabit
  • Yer: sol alt
  • Z Endeksi: 13
Divi köşesindeki konumu değiştir

Mobil içeriği kapat

Hem tablete hem de telefona sığacak sınırlı miktarda altlık çekmecesi içeriğiniz olacağından (sınırlı ekran yüksekliği nedeniyle), gerekli olmayan öğeleri ekrandan devre dışı bırakmanız / gizlemeniz gerekecektir. Bu örnekte, kesit düzeninin orta satırını gizleyeceğiz.

Bölümü mobil cihazda gizle

"Altlık Çekmecesi" bölümünde ikinci satırdan son satıra kadar ayarları açın. Gelişmiş sekmesinin altında, telefon ve tablette hattı kapatmak için görünürlük seçeneğini güncelleyin.

Görünürlük divi bölümünü kontrol edin

Özel kod ekleme

Altbilgi çekmecesine tıklama ve geçiş işlevini eklemek için sayfaya özel CSS ve JQuery eklememiz gerekir. Bunu yapmak için, düğme için kullanılan Blurb modülünün altında yeni bir kod modülü oluşturun.

Modül kodu ekleyin

Sonra kod alanına aşağıdaki kodu yapıştırın:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Divi kod modülü ekle

Değişiklikleri kaydet

Düzenleyiciden çıkmadan önce düzeni kaydetmeyi unutmayın.

Divi değişikliklerini kaydedin

Ayrıca tema üreticisine değişiklikleri kaydedin.

Değişiklikleri Kaydet

Nihai sonuç

Artık sonucu görmek için web sitenizdeki herhangi bir sayfaya gidebiliriz.

Son düşünceler

Kayan altlık çekmecesinin içeriği eğlenceli ve erişilebilir bir şekilde tanıtmanıza yardımcı olacağını umuyoruz. Herhangi bir çekmece gibi, aklınıza gelebilecek hemen hemen her şeyle doldurabilirsiniz.

Diğer Kaynaklar

İşte Divi'nin dahili özellikleriyle daha fazlasını başarmanıza yardımcı olabilecek öğreticilerin bir listesi.

Çeviri: Zarif Temalar

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer