Divi'de Kayan İtmeli Kenar Çubuğu Nasıl Oluşturulur

Kenar çubukları harika olabilir, ancak aynı zamanda yer israfı da olabilir. Bu nedenle, kayan bir itme kenar çubuğu oluşturmak, kullanıcının dikkatini sayfanın ana içeriğinden uzaklaştırmayan bir kenar çubuğuna sahip olmak isteyenler için mükemmel bir seçenek olabilir. Ayrıca, bu tür bir kenar çubuğu, kullanıcıya kenar çubuğunu istediği zaman görme veya gizleme seçeneği sunar.

Kaydırma itme efekti, kenar çubuğunu görünüm alanına sığdırmak için sayfanın ana içeriğini aynı anda iterken (veya sıkıştırırken) kenar çubuğunun sayfanın sol tarafından içeri kayması bakımından benzersizdir. Kısacası, kenar çubuğunu kaydırır ve sayfayı iter.

Kenar çubuğu oluşturulduktan sonra, menüler ve formlar dahil her tür uygulama için çok yönlü bir araç haline gelir.

Hadi hadi bakalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Ellerinizi bu öğreticiden kayan itmeli kenar çubuğu düzenine koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

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

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Bir sayfaya veya şablona eklemek için yeni bir bölüm eklemeniz ve kitaplıktan bölüm düzenini seçmeniz gerekir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Önceden Yapılmış Bir Düzen Seçin” seçeneğini seçin.
   
4. Etkinlik Düzeni Paketini seçin ve Etkinlik Ana Sayfası düzenini kullanmak için tıklayın.
   

Divi'de Kayan İtmeli Kenar Çubuğu Nasıl Oluşturulur

Sürgülü İtmeli Kenar Çubuğunu oluşturmak için yeni bir normal bölüm kullanmamız gerekecek. Bölümü, kenar çubuğuna yer açmak için sağdaki ana içerik alanına basıldığında (ve sıkıştırıldığında) bir düğmeye tıklandığında açılan sabit bir kenar çubuğu olacak şekilde boyutlandıracak ve konumlandıracağız.

Bölüm Oluşturma

İlk olarak, sayfaya yeni bir normal bölüm ekleyelim.

Ardından, sayfanın üst kısmındaki bölümü taşıyın.

Bölüm Ayarları

Bölüm ayarlarını açın ve sabitlenecek konumu aşağıdaki gibi güncelleyin:

• Pozisyon: Sabit
• Z İndeksi: 9999

Tasarım sekmesi altında, boyutu ve aralığı aşağıdaki gibi güncelleyin:

• Genişlik: 350 piksel (masaüstü ve tablet), %100 (telefon)
• Yükseklik: %100
• Dolgu: 100 piksel üst, 0 piksel alt

Dolgu, sayfanın üst kısmındaki başlığa yer açmak içindir.

Ardından, gelişmiş sekmesi altında bölüme bir CSS Sınıfı verin:

• CSS Sınıfı: et-it-kenar çubuğu

CSS sınıfı yerleştirildikten sonra bölüme bir arka plan rengi verin:

• Arka Plan Rengi: #1a1e36

Daha belirgin bir ayrım oluşturmak için tasarım sekmesine geri dönün ve bir sağ kenarlık ekleyin.

• Sağ Kenar Genişliği: 2px
• Sağ Kenar Rengi: #eeeeee

Bu, kenar çubuğumuz için ana kap olarak hizmet veren bölümle ilgilenir. Şimdi kenar çubuğunu açıp kapatmak için kullanacağımız iki düğmeyi oluşturmaya başlama zamanı.

Kenar Çubuğu Geçiş Düğmelerini Oluşturma

Kenar çubuğunu değiştirmek için kullanılan iki düğme olacaktır. İlk düğme, açıldıktan sonra kenar çubuğunun mobil sürümünü kapatacak bir “X” simgesi olacaktır. “X”, bir tanıtıcı modül kullanılarak oluşturulacaktır. İkincisi, dikey metinle döndürülen ve kesinlikle kenar çubuğuna/bölüme bitişik olarak konumlandırılan bir tanıtıcı modül kullanarak oluşturacağımız ana geçiş düğmesidir.

Hadi hadi bakalım.

Düğmeler için Satır Oluşturma

Bölüm/kenar çubuğu içinde yeni bir tek sütunlu satır oluşturun.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Gelişmiş sekmesi altında, konum seçeneklerini aşağıdaki gibi güncelleyin:

• Pozisyon: Mutlak
• Z İndeksi: 1

“X” Kapat Simgesini Oluşturma

“X” Kapat Simgesini oluşturmak için satıra bir tanıtım yazısı modülü ekleyin. Katmanlar modunu kullanarak yeni bir modül eklemek daha kolay olabilir, çünkü işleri tıklamak biraz zor olacaktır.

İçerik

Ardından bulanıklık ayarlarını açın. İçerik sekmesi altında, başlığı ve gövde içeriğini çıkarın ve tanıtım yazısına X simgesini ekleyin.

• Simgeyi Kullan: EVET
• Simge: x (ekran görüntüsüne bakın)

Tasarım

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #eeeeee
• Resim-Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 40px
• Genişlik: 50 piksel

Ardından, aşağıdaki transform translate özelliğini ekleyerek simgeyi biraz aşağı indirin:

• Çevir X'i Dönüştür : 100 piksel
• Dönüştür Çeviri Y : -10px

ileri

Gelişmiş sekmesi altında, yalnızca telefon ekranında görmemiz için tablet ve masaüstündeki tanıtım yazısını devre dışı bırakın.

• Devre Dışı Bırak: tablet ve masaüstü

Ardından, tanıtım yazısına bir CSS Sınıfı ekleyin ve telefon ekranında kenar çubuğu içeriğinde gezinirken görüntüde kalması için sabit bir konum verin.

• CSS Sınıfı: et-slayt-it-kapat
• Pozisyon: Sabit
• Konum: Sağ Üst

Bu, “X” Simgesini Kapat düğmesiyle ilgilenir.

Ana Kenar Çubuğu Geçiş Düğmesini Oluşturma

Ana Kenar Çubuğu Geçiş Düğmesini oluşturmak için mevcut "X" simgesinin altına bir tanıtım yazısı modülü ekleyin.

İçerik

Başlığı güncelleyin ve aşağı ok simgesini kullanmak için tıklayın.

• Başlık: Etkinlik Bilgileri
• Simgeyi Kullan: EVET
• Simge: aşağı ok (ekran görüntüsüne bakın)

Ardından, tanıtım yazısına bir arka plan rengi ekleyin.

• arka plan rengi: #eeeeee

Tasarım

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #1a1e36
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 25px
• Başlık Yazı Tipi: Üst Geçit
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Rengi: #1a1e36
• Başlık Harf Aralığı: 2px
• Başlık Satırı Yüksekliği: 1.2em
• Dolgu: 0,6em üst, 1em sol, 1em sağ
• Yuvarlatılmış Köşeler: Alt iki köşede 5 piksel

Tanımlamayı bölümün dışına yerleştirmek ve döndürmek için dönüştürme seçeneklerini aşağıdaki gibi kullanın:

• Dönüştür Çeviri Y : 100 piksel
• Dönüştür Döndür Z: -90deg
• Kökeni Dönüştür: sağ üst

ileri

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

• CSS Sınıfı: et-slayt-push-toggle
• Pozisyon: Mutlak
• Konum: Sağ Merkez

Kod Modülü ile Özel Kod Ekleme

İki düğme tamamlandıktan sonra, kenar çubuğu için ihtiyacımız olan kaydırmalı itme işlevini sağlayacak özel kodu eklemeye hazırız.

Kodu eklemek için önce aynı sütuna bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod modülüne yapıştırın.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Kenar Çubuğu İçerik Satırını Oluşturma

Oluşturduğumuz ilk satır, kenar çubuğunun işlevini yapan düğmeler ve kod içindi. Bu sonraki satır, kenar çubuğu içeriği için olacaktır.

Kenar çubuğu içerik satırını oluşturmak için kenar çubuğu/bölümdeki ilk satırın altına yeni bir tek sütunlu satır ekleyin.

Satır Ayarları

Yeni satırın ayarlarını açın ve aşağıdakileri güncelleyin:

• Genişlik: %100
• Yükseklik: %100
• Dolgu: %5 üst, %5 alt, %5 sol, %5 sağ

Gelişmiş sekmesi altında, taşma seçeneklerini aşağıdaki gibi güncelleyin:

• Yatay Taşma: kaydırma (masaüstü ve tablet), otomatik (telefon)
• Dikey Taşma: kaydırma (masaüstü ve tablet), otomatik (telefon)

Kenar Çubuğunu İçerik/Modüllerle Doldurma

Artık kenar çubuğunuz hazır olduğuna göre, tek yapmanız gereken kenar çubuğundaki ikinci satıra gerektiği gibi herhangi bir modül eklemek. Bu örnek için, olay ana sayfası düzeninden modülleri kopyalayıp satırın sütununa yapıştırıyorum.

Son sonuç

Canlı sayfadaki nihai sonucu kontrol edin.

Bir Sayfa Şablonuna Kayan İtmeli Kenar Çubuğunu Ekleme

Bu kenar çubuğunu varsayılan olarak tüm sayfalarınızda kullanmak isterseniz, Divi Tema Oluşturucu'yu kullanarak kenar çubuğunu/bölümü bir sayfa şablonuna eklemeniz gerekir.

Bölüm Düzenini Divi Kitaplığına Kaydet

Bunu yapmak için önce kenar çubuğunu oluşturmak için kullanılan bölümü Divi Kitaplığına kaydedin. Bunu, katmanlar modunda kenar çubuğundaki üç noktaya tıklayarak düzen adını ekleyip kitaplığa kaydederek yapabilirsiniz.

Yeni Sayfa Şablonu Oluşturun

Ardından, tema oluşturucuya gidin ve yeni bir şablon oluşturun ve bu şablonu tüm sayfalara atayın.

Sayfa Şablonuna Kayan Kenar Çubuğunu Ekleme

Ardından, sayfa şablonunu düzenlemek için tıklayın.

Şablon düzeni düzenleyicisinin içine yeni bir tam genişlikli bölüm ekleyin.

Ardından bölüme bir Tam Genişlikli Gönderi İçeriği modülü ekleyin.

Sonraki için tıklayın. tam genişlik bölümünün üzerinde yeni bir bölüm oluşturun. Ardından Kitaplıktan Ekle sekmesine tıklayın ve kitaplıktan Kayan İtmeli Kenar Çubuğu bölüm düzenini seçin.

Bittiğinde, kenar çubuğunu düzenleyebilirsiniz, ancak gövde düzeni düzenleyicisini kullanmanız gerekir.

Tema Oluşturucu Ayarlarını Kaydet

Değişiklikleri tema oluşturucuya kaydettiğinizden emin olun.

Artık tüm sayfalarınız kenar çubuğuna sahip olacak.

Son düşünceler

Sürgülü itme kenar çubuğu, her iki dünyanın da en iyisini arayanlarınız için mükemmel bir seçenektir - sayfanın ana içeriğinden uzaklaşmadan (veya dikkatini dağıtmadan) ön planda kalan bir kenar çubuğu. Kayıt formları, e-posta tercihleri, menüler ve çok daha fazlası gibi her türlü şey için kullanmaktan çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!