Divi'nin Tema Oluşturucusu ile Kaydırırken Genel Başlığınızın Boyutunu Nasıl Küçültebilirsiniz?

Sabit bir genel başlık tasarlarken, ziyaretçileriniz kayarken başlığın yüksekliğini küçültmek isteyebilirsiniz. Genel başlığın ziyaretçilerinizin görüntü alanı yüksekliğinde kapladığı alanı azaltmaya yardımcı olur. Bu eğitimde, bu süreçte size rehberlik edeceğiz. Menüyü oluşturarak başlayacağız ve ardından efekti tetiklemek için bazı JQuery ve CSS kodları ekleyeceğ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!

Youtube Kanalımıza Abone Olun

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

Ardından, 'Global Başlık Oluştur'a tıklayın ve 'Global Başlık Oluştur' seçeneğini seçin.

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

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bölümü açın ve arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #FFFFFF

boyutlandırma

Modülün tasarım sekmesine gidin ve genişliği değiştirin.

• Genişlik: %100

aralık

Bölümün üst ve alt dolgusunu da değiştirin.

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

Kutu Gölge

Ve sonraki bölüme ince bir kutu gölgesi ekleyerek sayfa içeriğini genel başlıktan ayırın.

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

CSS kimliği

Ardından, bölüme bir CSS kimliği ekleyin. Eğiticinin ilerleyen bölümlerinde, kaydırmada küçülen genel başlık efekti oluşturmak için bu CSS kimliğini kullanacağız.

• CSS Kimliği: bölüm dolgusu

Ana Eleman

Gelişmiş sekmesine geçin, Özel CSS ayarlarına gidin ve bölümün ana öğesine iki satır CSS kodu ekleyerek bölümü sabitleyin.

position: fixed;
top: 0;

Z İndeksi

Bölümün tüm sayfaların ve gönderi içeriğinin en üstünde kalmasını sağlamak için bölümün z dizinini de artıracağız.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

Sütun ayarlarını tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırmayı buna göre değiştirin:

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

aralık

Sonraki satırın varsayılan üst ve alt dolgusunu kaldırın.

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

CSS kimliği

Ardından, gelişmiş sekmeye gidin ve satıra bir CSS kimliği ekleyin. Küçültme efektinin çalışması için bu CSS kimliğine daha sonra öğreticide ihtiyacımız olacak.

• CSS kimliği: satır genişliği

Ana Eleman

Son olarak, daha küçük ekran boyutlarında tüm sütunların yan yana kalmasını sağlamak ve tüm sütun içeriğini ortalamak için satırın ana öğesine iki satır CSS kodu ekleyeceğiz.

display: flex;
align-items: center;

Sütun 1'e Görüntü Modülü Ekle

Logo Yükle

Sütun 1'deki Görüntü Modülü ile başlayarak modül ekleme zamanı. Saydam bir arka plana sahip bir logo yükleyin.

boyutlandırma

Daha sonra modülün genişliğini değiştirin.

• Genişlik: 5vw (Masaüstü), 9vw (Tablet), 13vw (Telefon)

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

Seçim Menüsü

İkinci sütuna geçin ve bir Menü Modülü ekleyin. İstediğiniz bir menü seçin.

Arka Plan Rengini Kaldır

Ardından modülün arka plan rengini kaldırın.

Düzen

Modülün tasarım sekmesine gidin ve düzeni de değiştirin.

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

Menü Metni

Ardından menü metin ayarlarını açın ve bazı değişiklikler yapın.

• Menü Yazı Tipi: Rubik
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

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

Açılır menü ayarlarını da değiştirin.

• Açılır Menü Arka Plan Rengi: #ffffff
• Açılır Menü Satır Rengi: #2970fa

Simgeler

Ve simgeler ayarlarında hamburger menü simge rengini değiştirerek modülün ayarlarını tamamlayın.

• Hamburger Menü Simgesi Rengi: #2970fa

Sütun 3'e Düğme Modülü Ekle

Kopya Ekle

Bir sonraki ve son sütuna. Seçtiğiniz bir kopya ile bir Düğme Modülü ekleyin.

hizalama

Daha sonra modülün hizalamasını değiştirin.

• Düğme Hizalama: Sağ

Düğme Ayarları

Düğmeyi buna göre şekillendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 1.5vw (Tablet), 2vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #2970fa
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Rubik
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 0.8vw (Masaüstü), 1.8vw (Tablet), 2.5vw (Telefon)
• Alt Dolgu: 0.8vw (Masaüstü), 1.8vw (Tablet), 2.5vw (Telefon)
• Sol Dolgu: 1.5vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Sağ Doldurma: 1.5vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)

Kutu Gölge

İnce bir kutu gölgesi ekleyerek modülün ayarlarını tamamlayın.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 30 piksel
• Gölge Rengi: rgba(41,112,250,0.2)

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

JQuery ve CSS Kodu Ekle

Bu öğreticinin sonraki ve son kısmı, bölümümüze ve satırımıza atadığımız iki CSS kimliğini kullanarak küçültme etkisini ele alır. Aşağıdaki JQuery ve CSS kodu satırlarıyla 2. sütuna bir Kod Modülü ekleyin. JQuery kodunu script etiketleri arasına ve CSS kodunu stil etiketleri arasına koyduğunuzdan emin olun.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

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

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

Kodu ekledikten sonra, genel başlıkta yaptığınız tüm değişiklikleri kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ö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, Divi's Theme Builder'ı kullanarak nasıl küçülen bir global başlık oluşturacağınızı gösterdik. Küçülen başlıklar, ziyaretçinizin görüntü alanı yüksekliğinde yerden tasarruf etmenin harika bir yoludur. Tasarımı sıfırdan yeniden yarattık ve küçülme etkisini tetiklemek için bazı özel özel kodlar ekledik. 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.