Divi ile Yukarı Kaydırırken Genel Başlığınızı Gösterme ve Aşağı Kaydırma Sırasında Gizleme

Genel başlığınızı oluştururken dikkate almanız gereken birçok şey vardır. Başlığınıza yerleştirdiğiniz öğelerin, ziyaretçilerinizin kolayca gezinmesine yardımcı olması gerekir. İnsanların gezinmek için harcadıkları zamanı azaltmak için, birçok web tasarımcısı, ziyaretçilerin diğer sayfalara veya gönderilere hemen gitmesine izin veren sabit bir üst başlık seçer. Bu gerçekten kullanışlıdır, ancak sabit bir başlık oluştururken, ziyaretçilerinizin görüntü alanı yüksekliğinin büyük bir kısmı alınır ve aynı anda daha az içeriğin gösterilmesine izin verilir. Bu fedakarlığı yapmaya istekli değilseniz, bunu yapmak zorunda olmadığınızı bilin. Genel başlığınızın, ziyaretçileriniz yukarı kaydırırken ortaya çıkmasına ve aşağı kaydırırken onu gizlemesine izin vererek sabit bir başlığın avantajlarından yararlanabilirsiniz. Bugün, Divi's Theme Builder'ı kullanarak global başlığınızı gizleme ve açığa çıkarma konusunda size rehberlik edeceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el 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!

1. Divi Tema Oluşturucu'ya gidin ve Yeni Şablon Ekle

Divi Theme Builder'a gidin

Divi Theme Builder'a giderek başlayın.

Global Başlık Oluşturmaya Başlayın

Orada, 'Global Başlık Ekle'yi tıklayın ve 'Global Başlık Oluştur'u seçin.

2. Global Başlık Oluşturmaya Başlayın

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Tasarım sekmesine geçin ve sonraki bölümünüze %100 genişlik atayın.

• Genişlik: %100

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw

Kutu Gölge

Bölümümüze de ince bir kutu gölgesi uygulayacağız.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.08)

CSS kimliği

Bu öğreticinin ilerleyen bölümlerinde, kaydırma efektinin gerçekleşmesi için bazı özel kodlara ihtiyacımız olacak. Buna hazırlanmak için bölüme bir CSS kimliği ekliyoruz.

• CSS Kimliği: genel başlık bölümü

Ana Eleman

Ayrıca bölümün ana elemanına iki satır CSS kodu ekleyerek bölümü sabit bir başlığa dönüştüreceğiz.

position: fixed;
top: 0;

Z İndeksi

Şimdi, bölümümüzün tüm sayfaların veya gönderi içeriğinin üstünde göründüğünden emin olmak için görünürlük ayarlarındaki z dizinini de artıracağız.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

Tüm bölüm ayarlarını tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Ana Eleman

Sütun içeriğini ortalayın ve satırın ana öğesine iki satır CSS kodu ekleyerek sütunların daha küçük ekran boyutlarında yan yana kalmasına izin verin.

display: flex;
align-items: center;

2. Sütun'a Sosyal Medya Takip Modülü Ekleyin

Sosyal Ağlar Ekle

1. sütundaki Sosyal Medya Takip Modülü ile başlayarak modül ekleme zamanı. Gösterilmesini istediğiniz sosyal ağları ekleyin.

Bireysel Sosyal Ağ Stillerini Sıfırla

Her sosyal ağın stillerini bireysel düzeyde sıfırlayarak devam edin.

Bireysel Sosyal Ağ Aralığı Ekle

Her sosyal ağın ayarlarını da ayrı ayrı açmanız ve boşluk ayarlarına bir alt dolgu eklemeniz gerekir.

• Alt Dolgu: 0.5vw

hizalama

Alt dolguyu her bir sosyal ağa ayrı ayrı ekledikten sonra, genel modül ayarlarınıza geri dönün. Tasarım sekmesine gidin ve modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

Varsayılan Simge Ayarları

Simge ayarlarından simge rengini de değiştirin.

• Simge Rengi: #000000

Fareyle Üzerine Gelme Simgesi Ayarları

Ve fareyle üzerine gelindiğinde simge rengini değiştirin.

• Simge Rengi: #c2ab92

Sınır

Kenarlık ayarlarında bir alt kenarlık ekleyerek modülün ayarlarını tamamlayın.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #000000

Sütun 2'ye Menü Modülü Ekle

Seçim Menüsü

Bir sonraki sütuna! Bir Menü Modülü ekleyin ve istediğiniz bir menüyü seçin.

Logo Yükle

Sonraki modüle bir logo yükleyin.

Arka Plan Rengini Kaldır

Ve arka plan rengini kaldırın.

Düzen

Ardından tasarım sekmesine gidin ve aşağıdaki ayarların düzen için geçerli olduğundan emin olun:

• Stil: Merkezli
• Açılır Menü Yönü: Aşağıya

Varsayılan Menü Metni

Menü metin ayarlarını aşağıdaki gibi değiştirerek devam edin:

• Aktif Bağlantı Rengi: #c2ab92
• Menü Yazı Tipi: Karabatak Garamond
• Metin Rengi: #000000
• Menü Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

Menü Metnini Gezin

Fareyle üzerine gelindiğinde menü metnini değiştirin.

• Menü Metin Rengi: #c2ab92

Aşağıya doğru açılan menü

Ardından, açılır menü ayarlarında açılır menü çizgisi rengini değiştirin.

• Açılır Menü Satır Rengi: #000000

Simgeler

Simge ayarlarında hamburger menü simgesi rengini de değiştiriyoruz.

• Hamburger Menü Simgesi Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarında logo maksimum genişliğini farklı ekran boyutlarında değiştirerek devam edin.

• Maksimum Logo Genişliği: 5vw (Masaüstü), 10vw (Tablet), 13vw (Telefon)

Menü Bağlantısı CSS'si

Ve modülün gelişmiş sekmesindeki menü bağlantısına iki satır CSS kodu ekleyerek modülün ayarlarını tamamlayın.

padding-bottom: 1vw;
border-bottom: 1px solid #000;

Sütun 3'e Metin Modülü Ekle

Kopya Ekle

Son modüle! Orada ihtiyacımız olan tek modül bir Metin Modülü.

Link ekle

Bu modül bir CTA görevi görecektir. Seçtiğiniz bir bağlantı ekleyin.

• Modül Bağlantı URL'si: #

Varsayılan Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Karabatak Garamond
• Metin Rengi: #000000
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

Fareyle Üzerine Gelme Metin Ayarları

Fareyle üzerine gelindiğinde metin rengini değiştirin.

• Metin Rengi: #c2ab92

boyutlandırma

Modülün boyutlandırma ayarlarını farklı ekran boyutlarında değiştirerek devam edin.

• Genişlik: 12vw (Masaüstü), 18vw (Tablet), 22vw (Telefon)
• Modül Hizalaması: Merkez

aralık

Ve boşluk ayarlarına biraz alt dolgu ekleyin.

• Alt Dolgu: 0.5vw

Sınır

Bir alt kenarlık ekleyerek modülün ayarlarını tamamlayın.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #000000

2. Sütun'a Kod Modülü Ekle

JQuery ve CSS Kodu Ekle

Sıradaki tüm modülleri şekillendirdikten sonra, ortaya çıkarma/gizleme efektini gerçekleştirme zamanı. Bunu yapmak için, 2. sütuna yerleştireceğimiz bir Kod Modülüne bazı özel kodlar eklememiz gerekecek. CSS kimliğini bölümünüze eklediğinizden emin olun. Aşağıdaki yazdırma ekranında gösterildiği gibi JQuery kodunu komut dosyası etiketleri arasına ve CSS kodunu stil etiketleri arasına yerleştirin.

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Genel başlığı tamamladıktan sonra, tüm değişiklikleri kaydedin ve sonucu web sitenizde görüntüleyin!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, genel başlığınızı yukarı kaydırırken nasıl görüneceğini ve aşağı kaydırırken nasıl gizleyeceğinizi gösterdik. Bu, ziyaretçilerinizin görüntü alanı yüksekliklerinin bir kısmını almadan kolayca gezinmelerine yardımcı olmanın popüler ve etkili bir yoludur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.