Başlığınızı Otomatik Olarak Her Sayfanın İlk Bölmesinin Altına Yerleştirme

Divi Theme Builder çıktığından beri, bir başlığın nasıl oluşturulacağı ve farklı ihtiyaçlarınızı karşılayacak şekilde nasıl özelleştirileceği konusunda öğreticiler paylaşıyoruz. Bugünkü eğitimde, her sayfanın ilk Divi bölümünün altına otomatik olarak özel bir başlığı nasıl yerleştireceğinizi göstererek bu yolculuğa devam edeceğiz. Bu yaklaşım, ziyaretçilerin önce sayfalarınızın kahraman bölümünü görmelerine ve ardından menüye ve tüm öğelerine erişmelerine olanak tanır. Özel başlık için kullandığımız stil Bistro Layout Pack ile eşleşiyor, özel sayfa şablonunu 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 Özel Başlık Şablonunu İndirin

Ellerinizi ücretsiz özel 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 Tema Oluşturucuya Git ve Yeni Sayfa Şablonu Ekle

Divi Tema Oluşturucu'ya Git ve Yeni Şablon Ekle

Divi Tema Oluşturucu'ya giderek başlayın ve yeni bir şablon ekleyin.

Kullanmak

Bu yeni şablonu tüm sayfalarda kullanın.

• Kullanım Yeri: Tüm Sayfalar

2. Özel Başlık Tasarımı Oluşturmaya Başlayın

Sayfa şablonunun içinde özel bir başlık oluşturarak devam edin.

Bölüm Ayarları

Arka plan rengi

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

• Arka Plan Rengi: #FFFFFF

aralık

Sonraki bölümün varsayılan üst ve alt dolgusunu kaldırın.

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

Sınır

Bir üst ve alt kenarlık da ekleyin.

• Üst ve Alt Kenar Genişliği: 1px
• Üst ve Alt Kenar Rengi: #002d4c

CSS kimliği

Ve bir CSS kimliği ekleyin. Eğitimin ilerleyen bölümlerinde, bölümü her sayfanın ilk bölümünün altına yerleştirmek için bu CSS kimliğini kullanacağız.

• CSS kimliği: özel başlık

Z İndeksi

Son olarak, tüm sayfa içeriğinin üstünde görünmesini sağlamak için bölümün z dizinini artıracağız.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

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 tüm bölümün genişliğini almasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• 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

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

display: flex;
align-items: center;

Sütun 1

aralık

Sütun 1 ayarlarını açarak devam edin ve boşluk ayarlarına biraz üst ve alt dolgu ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px

Sınır

Sütuna da bir sağ kenarlık ekleyin.

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #002d4c

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

Logo Yükle

Modül eklemeye başlama zamanı! 1. sütunda bir Görüntü Modülüne ihtiyacımız olacak. Logonuzu yükleyin.

hizalama

Modülün tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Modülün genişliğini farklı ekran boyutlarında da değiştirin.

• Genişlik: 4vw (Masaüstü), 7vw (Tablet), 12vw (Telefon)

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

Seçim Menüsü

İkinci sütunda, bir Menü Modülüne ihtiyacımız olacak. İstediğiniz bir menü seçin.

Düzen

Modülün tasarım sekmesine gidin ve yerleşim ayarlarını aşağıdaki gibi değiştirin:

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

Menü Metni

Menü metin ayarlarını da değiştirin.

• Menü Yazı Tipi: Kabin
• Menü Metin Rengi: #77848d
• Menü Metin Boyutu: 16px (Masaüstü), 15px (Tablet), 14px (Telefon)
• Menü Satır Yüksekliği: 1.8em

Açılır Metin

Ardından, açılır metin ayarlarında bazı renkleri değiştirin.

• Açılır Menü Arka Plan Rengi: #ffffff
• Açılır Menü Satır Rengi: #002d4c

Simgeler

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

• Hamburger Menü Simgesi Rengi: #002d4c

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

Kopya Ekle

Bir sonraki ve son sütuna. Orada bir Düğme Modülüne ihtiyacımız olacak. Seçtiğiniz bir kopyayı ekleyin.

hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarında düğmeyi şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 13px
• Düğme Metin Rengi: #002d4c
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 2px
• Düğme Kenar Rengi: #ffffff (Varsayılan), #d1d1d1 (Vurgulu)
• Düğme Sınır Yarıçapı: 0px

• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Kabin
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ardından, farklı ekran boyutlarına bazı özel dolgular ekleyin.

• Üst Dolgu: 16px
• Alt Dolgu: 16px
• Sol Dolgu: 24 piksel (Masaüstü ve Tablet), 13 piksel (Telefon)
• Sağ Doldurma: 24px (Masaüstü ve Tablet), 13px (Telefon)

Kutu Gölge

Bir kutu gölgesi ekleyerek modülün ayarlarını tamamlayın.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 2px (Varsayılan), 6px (Vurgulu)
• Gölge Rengi: #002d4c
• Kutu Gölge Konumu: İç Gölge

3. JQuery Kullanarak Her Sayfanın İlk Bölümünden Sonra Başlığı Otomatik Olarak Yerleştirin

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

Şimdi, menüyü otomatik olarak her sayfanın ilk bölümünün altına yerleştirmek için biraz JQuery koduna ihtiyacımız olacak. Bu kodu özel başlığımıza eklemek için 2. sütuna bir Kod Modülü ekleyin.

JQuery Kodu Ekle

Efekti uygulamak için aşağıdaki yazdırma ekranında görebileceğiniz gibi , komut dosyası etiketleri arasına aşağıdaki JQuery kodu satırlarını Kod Modülüne ekleyin :

jQuery(işlev($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

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

Ve tüm tema oluşturucu değişikliklerini kaydederek ve sonucu sayfalarınızda görüntüleyerek özel başlığı tamamlayın!

Ö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 oluşturduğunuz özel başlığı her sayfanın ilk Divi bölümünden sonra otomatik olarak nasıl yerleştireceğinizi gösterdik. Özel başlığı yalnızca bir kez oluşturmanız, JQuery kodunu eklemeniz gerekir ve özel başlık otomatik olarak yeniden konumlandırılır. Bu, menünün normal üst sayfa konumunu değiştirmenin ve kahraman bölümünüzün ilk önce parlamasına izin vermenin harika bir yoludur. Şablonu ücretsiz olarak da 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.