Divi Başlığınızı Scroll'da Başka Bir Başlıkla Nasıl Değiştirirsiniz?

Başlığınız kaçınılmaz olarak web sitenizin en önemli unsurlarından biri olmaya devam ediyor. Ziyaretçilerinizin gezinme sürecini etkiler ve aradıklarını bir kalp atışında bulmalarını sağlar. Şimdi, kaydırmada Divi başlığınızı başka bir başlıkla değiştirmenin bir yolunu arıyorsanız, bu yazının tadını çıkaracaksınız. Divi'nin tema oluşturucusu, yerleşik öğeleri ve bazı ek kodları ile tam olarak nasıl başaracağınızı göstereceğiz. Ayrıca, sayfanızın üst kısmında başlık için otomatik olarak oluşturulmuş bir yer tutucu alanı olduğundan emin oluyoruz. 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

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

Ellerinizi ücretsiz takas Divi başlık şablonuna 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 Theme Builder'a gidin ve Global Header Oluşturmaya Başlayın

Divi Theme Builder'a gidin

WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya giderek başlayın ve 'Global Başlık Ekle'yi tıklayın.

Genel Başlık Oluştur

Ardından, şablon düzenleyiciye yönlendirilmek için 'Global Başlık Oluştur'a tıklayın.

2. Aynı Bölümde Her İki Başlığı Oluşturun

Bölümü Değiştir

boyutlandırma

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Kesit ayarlarını açın ve kesit genişliğinin '%100' olduğundan emin olun.

• Genişlik: %100

aralık

Ardından, boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Kutu Gölge

Ayrıca ince bir kutu gölgesi kullanıyoruz.

• Kutu Gölgesi Dikey Konumu: 15px
• Gölge Rengi: rgba(0,0,0,0.06)

Konum

Son olarak, gelişmiş sekmesindeki konum ayarlarını kullanarak bölümün sayfamızın üst ortasına yapışmasını sağlayacağız.

• Pozisyon: Sabit
• Yer: Üst Merkez

1. Satır Başlığı Ekle

Sütun Yapısı

Oluşturacağımız her iki başlık da aynı bölümün parçası olacak. Her başlık için ayrı bir satır kullanacağız. Aşağıdaki sütun yapısını kullanarak ilk satır başlığını ekleyin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından, boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Ana Eleman

Satırın ana öğesine iki satır CSS kodu ekleyerek satır ayarlarını tamamlayın. Bu CSS kodu, tüm sütun içeriğini hizalamamıza yardımcı olacaktır.

display: flex;
align-items: center;

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

Fotoğraf yükleniyor

Sütun 1'deki Resim Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir logo yükleyin.

hizalama

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

• Görüntü Hizalama: Merkez

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

Seçim Menüsü

İkinci sütunda ihtiyacımız olan tek modül bir Menü Modülüdür. İstediğiniz bir menü seçin.

Arka Plan Rengini Kaldır

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

Düzen

Tasarım sekmesine gidin ve düzeni buna göre değiştirin:

• Stil: Merkezli

Menü Metin Ayarları

Ardından, menü metin ayarlarında bazı değişiklikler yapın.

• Menü Yazı Tipi: Roboto
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Metin Rengi: #ffffff (Masaüstü), #000000 (Tablet ve Telefon)
• Menü Metin Boyutu: 18px

Açılır Menü Metin Ayarları

Ardından, açılır menü metin ayarlarındaki açılır menü satırı rengini değiştireceğiz.

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

Simge Ayarları

Ayrıca hamburger menü simgesi rengini de değiştiriyoruz.

• Hamburger Menü Simge Rengi: #ffffff

aralık

Daha küçük ekran boyutlarına bazı özel sol ve sağ dolgular ekleyerek modül ayarlarını tamamlayın.

• Sol Dolgu: 30 piksel (Yalnızca Tablet ve Telefon)
• Sağ Dolgu: 30 piksel (Yalnızca Tablet ve Telefon)

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

Seçtiğiniz Sosyal Ağları Ekleyin

Son sütunda ihtiyacımız olan tek modül Sosyal Medya Takip Modülü. Seçtiğiniz sosyal ağları ekleyin.

Bireysel Sosyal Ağ Arka Plan Rengi

Ardından, her bir sosyal ağı ayrı ayrı açın ve arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #FFFFFF

hizalama

Modülün genel ayarlarına geri dönün ve modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

Simge Ayarları

Simge rengini de değiştirin.

• Simge Rengi: #0042c9

Sınır

Ve bir miktar sınır yarıçapı ekleyerek modül ayarlarını tamamlayın.

• Tüm Köşeler: 100 piksel

2. Satır Başlığı Ekle

Sütun Yapısı

İkinci başlığa! Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Ö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

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Ana Eleman

Ardından, satırın ana öğesinde iki satır CSS kodu kullanarak tüm sütun içeriğini hizalayın.

display: flex;
align-items: center;

Sütun 3 Arka Plan Rengi

Ve 3. sütun ayarlarını açarak ve bir arka plan rengi kullanarak satır ayarlarını tamamlayın.

• Arka Plan Rengi: #0042c9

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

Fotoğraf yükleniyor

1. sütunda ihtiyacımız olan tek modül bir Görüntü Modülüdür. Seçtiğiniz bir logo yükleyin.

hizalama

Daha sonra modülün görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

Klon Menü Modülü ve 2. Satır Başlığının 2. Sütundaki Yeri

Önceki satırda kullanılan Menü Modülünü klonlayın ve kopyayı ikinci satırın orta sütununa yerleştirin.

Menü Metni Ayarlarını Değiştir

Yinelenen Menü Modülünü açın ve menü metin rengini değiştirin.

• Menü Metin Rengi: #0042c9

Açılır Menü Metin Ayarlarını Değiştir

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

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

Simge Ayarlarını Değiştir

Hamburger menü ikon rengini değiştirerek Menü Modülü ayarlarını tamamlayın.

• Hamburger Menü Simgesi Rengi: #0042c9

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

Kopya Ekle

Satırın son sütununda ihtiyacımız olan tek modül bir Düğme Modülü. Seçtiğiniz bir kopyayı girin.

hizalama

Sonraki düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px (Masaüstü), 18px (Tablet), 15px (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Roboto
• Düğme Yazı Ağırlığı: Kalın

aralık

Ve farklı ekran boyutlarına bazı özel dolgular ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: 33px (Masaüstü), 35px (Tablet), 38px (Telefon)
• Alt Dolgu: 33px (Masaüstü), 35px (Tablet), 38px (Telefon)

2. CSS Sınıfları Ekleyin

Bölüm

Tüm modülleri ekledikten ve stilini belirledikten sonra, JQuery kodumuzun içinde kullanacağımız CSS sınıflarını eklemenin zamanı geldi. İlk olarak bölüm ayarlarını açın ve aşağıdaki CSS sınıfını kullanın:

• CSS Sınıfı: başlık bölümü

Satır Başlığı #1

Ardından, ilk satır başlığını açın ve aşağıdaki CSS sınıfını kullanın:

• CSS Sınıfı: başlık-1

Satır Başlığı #2

İkinci satırı da açın. Bunun için aşağıdaki CSS sınıfını kullanın:

• CSS Sınıfı: başlık-2

3. JQuery ve CSS Kodu Ekleyin

İlk Satırın Üçüncü Sütuna Kod Modülü Ekle

Tüm CSS sınıfları yerleştirildikten sonra kodu eklemenin zamanı geldi. Bölümünüzün içinde istediğiniz yere yeni bir Kod Modülü ekleyin. İlk satırın üçüncü sütununa yerleştiriyoruz.

JQuery Kodu Ekle (Kod Etiketleri Arasında)

Ardından, aşağıdaki yazdırma ekranında görebileceğiniz gibi, komut dosyası etiketleri arasına aşağıdaki CSS kodu satırlarını ekleyin :

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

CSS Kodu Ekle (Stil Etiketleri Arasında)

Aşağıdaki CSS kodunu da stil etiketleri arasına ekleyin:

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

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

Bu noktada yapılacak tek şey, tüm tema oluşturucu değişikliklerini kaydetmek ve sonucu web sitenizde görüntülemek!

Ö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'nin tema oluşturucusunu, Divi öğelerini ve bazı ek JQuery ve CSS kodunu kullanarak Divi başlığınızı kaydırmada başka bir başlıkla nasıl değiştireceğinizi gösterdik. Ayrıca, sayfa kapsayıcısının üst kısmında, sabit başlığın sayfa içeriğiyle çakışmasını önleyen bir miktar alanı otomatik olarak oluşturduk. Swap Divi başlık şablonu 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.