Divi'de Kayan Altbilgi Çekmecesi Nasıl Tasarlanır

Altbilgi çekmeceleri, kullanıcılar tarafından kolayca erişilebilen ek içeriği depoladıkları için herhangi bir web sitesine faydalı eklemelerdir. Altbilgi çekmeceleri, bir düğmeye tıklanarak 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 küçük bir saklanma yeri olması gibi.

Bu derste, Divi'de kayan bir altbilgi çekmecesi tasarlayacağız. Altbilgi çekmecesini, normal altbilgi içeriğiyle birlikte site genelinde erişilebilir olması için web sitesi şablonunun Genel Altbilgi Alanına ekleyeceğiz.

Kullanacağımız işlem ile herhangi bir Divi bölümü (ve içeriği) dakikalar içinde altbilgi çekmecesine dönüştürülebilir.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız sabit alt bilgi çekmecesine hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Divi Sitenize Altbilgi Çekmecesi Şablonu Nasıl Eklenir

UYARI!: Bu şablonu eklemek, Divi sitenizdeki varsayılan web sitesi şablonunu (varsa) geçersiz kılar. Canlı bir sitede hiçbir şeyi karıştırmamak için bunu bir test sitesine eklemenizi öneririz.

Sabit alt bilgi çekmecesi şablonunu kendi web sitenize aktarmak için JSON dosyasına erişmek için indirilen zip dosyasını açın.

Ardından WordPress Dashboard'a gidin ve Divi > Theme Builder'a gidin.

Ardından sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.

Taşınabilirlik açılır penceresinin içinde, az önce açtığınız JSON dosyasını seçin ve daha önce varsayılan web sitesi şablonunda geçersiz kılmak istemediğiniz bir şey olması durumunda, “İçe aktarmadan önce yedeği indir” seçeneğini seçin.

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

Son olarak, Tema Oluşturucu değişikliklerini kaydedin ve sabit alt bilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.

Şimdi öğreticiye geçelim, olur mu?

Bölüm 1: Genel Altbilgi Ekleme

Divi'nin Tema Oluşturucusu, Varsayılan Web Sitesi Şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.

Genel bir alt bilgi oluşturmak için WordPress Kontrol Paneli'ne gidin ve Divi > Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonu içindeki "Genel Altbilgi Ekle" alanını tıklayın.

Ardından açılır menüden “Global Altbilgi Oluştur” seçeneğini seçin.

Genel Altbilgi Düzenine Hazır Düzen Ekle

Bu, Oluşturmaya nasıl başlamak istediğinize ilişkin üç seçeneğin hemen sorulacağı Şablon Düzen Düzenleyicisini dağıtacaktır. “Hazır Düzen Seçin” seçeneğini seçin.

Kitaplıktan Yükle açılır penceresinden, Kırtasiye Mağazası Açılış Sayfası düzenini bulun. Ardından "Bu Düzeni Kullan" ı tıklayın.

İstenmeyen İçeriği Hazır Düzenden Silin

Düzen düzenleyiciye yüklendikten sonra, ayarlar menüsünden katmanlar simgesine tıklayarak Katmanlar açılır kutusunu açın. Ardından, son ikisi hariç mizanpajdaki tüm bölümleri silin.

İki Bölümü Taşı ve Etiketle

Bölümler silindikten sonra, biri "Altbilgi" ve diğeri "Nasıl Çalışır" etiketli iki bölümünüz olmalıdır. "Altbilgi" bölümünü düzenin en üstüne taşıyın.

Alt bölümün Etiketini “Alt Bilgi Çekmecesi” olarak değiştirin. Bu, altbilgi çekmece içeriğimiz olarak kullanacağımız bölüm olacaktır.

Bölüm 2: Sabit Altbilgi Çekmecesi Oluşturma

Artık bölümlerden birini altbilgimiz, diğerini altbilgi çekmecesi olarak belirlediğimize göre, sabit altbilgi çekmecemizi oluşturmaya başlayabiliriz. Altbilgi çekmecesini değiştirmek için kullanacağımız tanıtım yazısı simgesini oluşturmaya başlayalım.

Alt Bilgi Çekmecesi Düğmesini Oluşturma

Yeni Satır Ekle

Alt “Alt Bilgi Çekmecesi” bölümünün içine yeni bir tek sütunlu satır ekleyin.

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

Satır Dolgusu

Modül eklemeden önce satır ayarlarını açın ve padding'i aşağıdaki gibi güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt

Bölüm Dolgusu

Ardından “Alt Bilgi Çekmecesi” bölümünün ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

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

İşte nasıl yapılacağı.

Bulanıklık Modülü Ekle

Bölümün üst kısmındaki “Çekmece Düğmesi” satırına bir tanıtım yazısı modülü ekleyin.

Bulanık İçerik/Simge

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

bulanık tasarım

Ardından, tanıtım yazısına aşağıdaki gibi bir arka plan verin:

• Arka Plan Rengi: #081540

Ardından tasarım ayarlarını 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: 17px

Bulanık Boyutu

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

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

Bu, su damlası şeklini oluşturmak için daire simgesinin tanıtım yazısı kabından taşmasına neden olur.

Bulanık Konumu

Ardından, tanıtım yazısına bölümün üst ortasında mutlak bir konum verin.

• Pozisyon: Mutlak
• Yer: Üst Merkez

Bulanıklık Dönüştürme Ayarları

Şimdi, tanıtım yazısı/simgeyi dik döndürmek ve onu bölüm kabının hemen üstüne yerleştirmek 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ğıdakileri güncelleyin:

• Dönüştürme X Eksenini Çevir: -%50
• Y Eksenini Dönüştür: -250
• Dönüştür Döndür Z Ekseni: -45deg

Ardından varsayılan simge animasyonunu çıkarın:

• Resim/Simge Animasyonu: Animasyon Yok

Çekmeceyi değiştirmek için JQuery kullanacağız, bu yüzden daha sonra kodda kullanacağımız bir CSS sınıfı ile tıklanabilir öğe olarak tanıtım yazısı/simgesini hedeflememiz gerekiyor. Aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: çekmece hedefi

Alt Bilgi Çekmecesi Bölüm Ayarları

Şimdi transform translate seçeneğini kullanarak “Footer Drawer” bölümünü gizleyeceğiz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Y Eksenini Dönüştür: %100

Burada transform translate kullanmanın güzelliği, yüzde değerlerinin öğenin gerçek boyutuna dayanmasıdır. Yani Y eksenindeki %100, doğrudan bölümün yüksekliğine göre olacaktır (herhangi bir anda ne olursa olsun). Başka bir deyişle, eleman tam olarak kendi yüksekliği kadar aşağı doğru hareket ettirilecektir.

“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ı ile hedeflememiz ve simgeye tıklarken dönüşüm çevirisini kapatmamız gerekecek (tam bölümü orijinal konumuna geri getirin).

Altbilgi Çekmecesi Bölümüne CSS Sınıfı Ekle

Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: has-transform

Alt Bilgi Çekmece Bölümü Sabit Konum

Son adım için, altbilgi çekmecesini (simgeyle birlikte) tarayıcı penceresinin altında yüzecek şekilde sabitlemeliyiz.

“Alt Bilgi Çekmecesi” bölümünün konumunu aşağıdaki gibi güncelleyin:

• Pozisyon: Sabit
• Konum: Sol Alt
• Z İndeksi: 13

Mobil için İçeriği Devre Dışı Bırakma

Tablet ve telefona sığacak sınırlı miktarda alt bilgi çekmecesi içeriğine sahip olacağınızdan (ekranların sınırlı yüksekliği nedeniyle), gerekli olmayan öğelerin görüntülenmesini devre dışı bırakmanız/gizlemeniz gerekecektir. Bu örnekte, bölüm düzeninin orta sırasını gizleyeceğiz.

“Alt Bilgi Çekmecesi” bölümünde ikinciden son satıra kadar olan ayarları açın. Gelişmiş sekmesi altında, telefon ve tablette satırı devre dışı bırakmak için görünürlük seçeneğini güncelleyin.

Özel Kodu Ekleme

Altbilgi çekmecesine tıkla ve değiştir işlevini eklemek için sayfaya bazı özel CSS ve JQuery eklememiz gerekiyor. Bunu yapmak için, düğme için kullanılan tanıtım modülünün altında yeni bir kod modülü oluşturun.

Ardından aşağıdaki kodu kod kutusuna yapıştırın:

<style>
  .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;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.drawer-target').click(function(){
      $(this).toggleClass('toggle-icon-animation');      
      $('.has-transform').toggleClass('toggle-drawer-animation');   
    });    
  });
})( jQuery );   
</script>

Değişiklikleri Kaydet

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

Tema Oluşturucu'daki Değişiklikleri de kaydedin.

Son sonuç

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

Ve işte mobilde.

Global Altbilgi'nin, sabit altbilgi çekmecesinin yanı sıra sayfanın alt kısmında da doğru yerde olduğuna dikkat edin.

Son düşünceler

Umarız kayan alt bilgi çekmecesi, içeriği eğlenceli ve erişilebilir bir şekilde tanıtmanıza yardımcı olur. Herhangi bir çekmece gibi, aklınıza gelebilecek hemen hemen her şeyle doldurabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!