Global başlığınızı oluştururken göz önünde bulundurmanız gereken pek çok şey vardır. Başlığınıza koyduğunuz öğeler, ziyaretçi kolayca gezinmek için. Birçok web tasarımcısı, insanların internette gezinmek için harcadıkları zamanı azaltmak için sabit bir üst başlığı tercih eder. ziyaretçi diğer sayfalara veya yayınlara anında erişmek için. Bu gerçekten kullanışlıdır, ancak sabit bir başlık oluştururken görüntü alanınızın yüksekliğinin büyük bir kısmı ziyaretçi meşgul, bu da daha azına izin veriyor içindekiler bir kerede görüntülemek için. Bu fedakarlığı yapmaya hazır değilseniz, bunu yapmak zorunda olmadığınızı bilin. Ziyaretçileriniz yukarı kaydırdıklarında genel başlığınızın ortaya çıkmasına ve aşağı kaydırdıklarında gizlenmesine izin vererek sabit bir başlığın avantajlarından yararlanabilirsiniz. Bugün Divi'nin Tema Oluşturucusunu kullanarak genel başlığınızı gizleme ve ortaya çıkarma konusunda size rehberlik edeceğiz.

anket

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

1. Divi Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin

Divi Tema Oluşturucu'ya giderek başlayın.

Global bir başlık oluşturmaya başlayın

Burada "Genel üstbilgi ekle" yi tıklayın ve "Genel üstbilgi oluştur" u seçin.

2. Genel bir 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 gidin ve sonraki bölümünüze% 100 genişlik atayın.

• Genişlik:% 100

aralık

Ayrıca özel üst ve alt dolgu ekleyin.

• Üst dolgu: 2vw
• Alt doldurma: 2vw

Gölge kutusu

Ayrıca bölümümüze ince bir gölge uygulayacağız.

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

CSS Kimliği

Bu öğreticide daha sonra, kaydırma efektinin oluşması için bazı özel koda ihtiyacımız olacak. Buna hazırlanmak için bölüme bir CSS ID ekliyoruz.

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

Ana eleman

Ayrıca, ana bölüm öğesine iki satır CSS kodu ekleyerek bölümü sabit bir başlık yapacağız.

position: fixed;top: 0;

Z Endeksi

Şimdi bölümümüzün sayfanın üst kısmında göründüğünden emin olmak için veya içindekiler Gönderinin görünürlük ayarlarında z-endeksini de artıracağız.

• Z Endeksi: 99999

Yeni bir satır ekle

Sütun yapısı

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

boyutlandırma

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

• Özel bir oluk genişliği kullanın: Evet
• Oluk genişliği: 1
• Sütun yüksekliklerini eşitle: Evet
• Genişlik:% 100
• Maksimum genişlik:% 100

aralık

Ayrıca varsayılan üst ve alt dolguların tümünü kaldırın.

• Üst dolgu: 0 piksel
• Alt doldurma: 0px

Ana eleman

ortala içindekiler Satırın ana elemanına iki satır CSS kodu ekleyerek sütunların daha küçük ekran boyutlarında yan yana kalmasını sağlayın.

display: flex;align-items: center;

Sosyal medya izleme modülünü 2. sütuna ekleyin

Sosyal ağlar ekleyin

1. sütundaki sosyal medya izleme modülünden başlayarak modüller eklemenin zamanı geldi. Göstermek istediğiniz sosyal ağları ekleyin.

Bireysel sosyal medya stillerini sıfırlama

Her sosyal ağın stillerini ayrı bir düzeye sıfırlayarak devam edin.

Bireysel bir sosyal ağ alanı ekleyin

Ayrıca her sosyal ağ için ayarları ayrı ayrı açmanız ve boşluk ayarlarına alt dolgusu eklemeniz gerekecektir.

• Alt doldurma: 0.5vw

hizalanma

Her sosyal ağa tek tek alt dolguyu ekledikten sonra, modunuzun genel ayarlarına geri dönün. Tasarım sekmesine geçin ve modül hizalamasını değiştirin.

• Modülün hizalanması: orta

Varsayılan simge ayarları

Ayrıca simge ayarlarında simge rengini değiştirin.

• Simge Rengi: # 000000

Fareyle üzerine gelme simgesi ayarları

Ve fareyle üzerine gelme simgesinin rengini değiştirin.

• Simge Rengi: # c2ab92

Sınır

Kenarlık parametrelerine alt kenarlık ekleyerek modül parametrelerini tamamlayın.

• Alt kenar genişliği: 1 piksel
• Alt kenarlık rengi: # 000000

Sütun 2'ye menü modülü ekleme

Menüyü seçin

Bir sonraki sütuna geçelim! Bir menü modülü ekleyin ve istediğiniz bir menüyü seçin.

Logoyu indir

Ardından modüle bir logo yükleyin.

Arka plan rengini kaldır

Ve arka plan rengini kaldırın.

hüküm

Ardından Tasarım sekmesine geçin ve aşağıdaki ayarların yerleşim için geçerli olduğundan emin olun:

• Stil: Ortalanmış
• Açılır menünün yönü: aşağı

Varsayılan menü metni

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

• Etkin bağlantı rengi: # c2ab92
• Menü yazı tipi: Cormorant Garamond
• Metin rengi: # 000000
• Menü metni boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)

Fareyle üzerine gelindiğinde menü metni

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

• Menü metni rengi: # c2ab92

Açılır menü

Ardından, açılır menü ayarlarındaki açılır menü satırının rengini değiştirin.

• Açılır menü satırının rengi: # 000000

simgeler

Ayrıca ikon ayarlarında hamburger menü ikonunun rengini de değiştiriyoruz.

• Hamburger menü simgesi rengi: # 000000

boyutlandırma

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

• Maksimum logo genişliği: 5vw (masa), 10vw (tablet), 13vw (telefon)

CSS Bağlantı Menüsü

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

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

3 sütununa bir metin modülü ekleyin

Bir kopya ekle

Son modüle geçelim! İhtiyacımız olan tek modül bir metin modülü.

Bir link ekle

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

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

Varsayılan metin ayarları

Modül tasarımı sekmesine geçin 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 gelindiğinde metin ayarları

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

• Metin rengi: # c2ab92

boyutlandırma

Farklı ekran boyutlarında modül boyutlandırma parametrelerini değiştirerek devam edin.

• Genişlik: 12vw (masaüstü), 18vw (tablet), 22vw (telefon)
• Modülün hizalanması: orta

aralık

Ve aralık ayarlarına biraz alt dolgu ekleyin.

• Alt doldurma: 0.5vw

Sınır

Alt kenarlık ekleyerek modül parametrelerini tamamlayın.

• Alt kenar genişliği: 1 piksel
• Alt kenarlık rengi: # 000000

2 sütununa bir kod modülü ekleyin

JQuery ve CSS kodunu ekleyin

Satırdaki tüm modları ş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 özel kod eklememiz gerekecek. Bu kod, başlığınızı veya modülleri nasıl tasarlarsanız tasarlayın, eklediğiniz herhangi bir bölümde çalışacaktır. kullanmakta olduğunuz için CSS kimliğini bölümünüze eklediğinizden emin olun. JQuery kodunu komut dosyası etiketleri arasına ve CSS kodunu aşağıdaki yazdırma ekranında gösterildiği gibi stil etiketleri arasına yerleştirin.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

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

3. Jeneratör değişikliklerini kaydedin ve sonucu görüntüleyin

Genel başlığı tamamladıktan sonra, tüm değişiklikleri kaydedin ve sonucu sayfanızda görüntüleyin. Site Web!

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Son düşünceler

Bu makalede, Global 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 pencere yüksekliklerinin bir kısmını almadan kolayca gezinmelerine yardımcı olmanın popüler ve etkili bir yoludur. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.