Divi's Theme Builder ile Özel Tam Ekran Global Başlık Nasıl Oluşturulur

Web siteniz için çok fazla yer kaplamayan genel bir başlık oluşturmanın bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Divi's Theme Builder'ı kullanarak nasıl tam ekran genel başlık oluşturacağınızı göstereceğiz. Sayfayı aşağı kaydırırken, gönderinizde/sayfanızda fark edeceğiniz ek iki şey, 1) sol üst köşede tıklanabilir bir hamburger simgesi ve 2) sağ üst köşede bir logo. Bu iki öğe, ziyaretçilerinizi gezinme süreci boyunca takip edecek ve hamburger simgesine tıklandığında, özel bir tam ekran menü açılacak ve ziyaretçilerin web sitenizdeki diğer sayfalara gitmesine olanak tanıyacaktır. Bu tasarımın sonucu son derece duyarlıdır ve 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 Tam Ekran Global Başlık Şablonunu İndirin

Ellerinizi tam ekran genel 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.

1. Divi Theme Builder'a gidin ve Global Header Oluşturmaya Başlayın

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 Ekle'ye tıklayın ve 'Global Başlık Oluştur' seçeneğine tıklayın.

2. Bölüm 1'i Tam Ekran Gezinme'ye ayırın

Bölüm Ayarları

Arka plan rengi

Yaratmaya başlama zamanı! Şablon düzenleyicide görebileceğiniz bölümün ayarlarını açın ve arka plan rengini tamamen şeffaf bir renge değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0)

aralık

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

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

CSS Sınıfı

Bölüme bir CSS sınıfı ekleyerek devam edin. Bu yazının ilerleyen bölümlerinde menüyü tam ekrana çevirmek için bu CSS sınıfına ihtiyacımız olacak.

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

Varsayılan Görünürlük

Ardından görünürlük ayarlarına gidin ve taşmaları gizleyin. Bölümün z indeksini de artırdığınızdan emin olun, bu, bölümün tüm sayfanın ve gönderi içeriğinin en üstünde kalmasını sağlayacaktır.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli
• Z İndeksi: 999999

Fareyle Görünürlük

Z dizinini ekledikten sonra, üzerine gelme seçeneğini etkinleştirin ve aynı z dizininin orada da uygulandığından emin olun.

• Z İndeksi: 999999

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ilk 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
• 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

Sütuna Metin Modülü Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan tek modül bir Metin Modülüdür. İçerik kutusuna seçtiğiniz bir menü sembolü ekleyin. Bu derste '≡' kullanıyoruz.

Metin Ayarları

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

• Metin Yazı Tipi: Abril Fatface
• Metin Rengi: #000000
• Metin Boyutu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Metin Satırı Yüksekliği: 1em

aralık

Daha sonra farklı ekran boyutlarındaki boşluk değerlerini değiştirin.

• Üst Dolgu: 2vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 4vw (Tablet), 7vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 4vw (Tablet), 7vw (Telefon)

CSS kimliği

Bu metin modülü, tam ekran menüsü için bir tetikleyici görevi görecektir. Bu yüzden metin modülüne bir CSS kimliği atamamız gerekecek. Eğitimin ilerleyen bölümlerinde, kodumuzda CSS kimliğini kullanacağız.

• CSS kimliği: menü-açık

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ikinci bir satır ekleyerek devam edin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Boşluk değerlerini de değiştirin.

• Üst Marj: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Sol Dolgu: 19vw
• Sağ Dolgu: 19vw

Sütuna Metin Modülü Ekle

İçerik Ekle

Ardından, sütuna yeni bir Metin Modülü ekleyin. Bu Metin Modülü, ilk menü öğenizi temsil eder.

Link ekle

Bir sonraki modüle uygun bir bağlantı eklediğinizden emin olun.

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

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Rengi: #000000
• Metin Boyutu: 3vw (Masaüstü), 7vw (Tablet), 8vw (Telefon)
• Metin Harf Aralığı: -0.1vw
• Metin Satırı Yüksekliği: 1em

aralık

Daha sonra modülün boşluk ayarlarını değiştirin.

• Üst Marj: 1vw
• Alt Dolgu: 2vw
• Sol Dolgu: 3vw

Sınır

Bir alt kenarlık da ekleyin.

• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #333333

CSS Sınıfı

Ve özel bir CSS sınıfı ekleyerek modülün ayarlarını tamamlayın. Bölümünüze yerleştirdiğiniz her menü öğesine bu CSS sınıfını eklemeniz gerekecek.

Metin Modülünü Üç Kez Klonla

İlk Metin Modülünü tamamladıktan sonra, istediğiniz kadar kopyalayabilirsiniz (menünüzde göstermek istediğiniz menü öğelerine bağlı olarak). Ancak modüllerin ekranınızın yüksekliğini aşmadığından emin olun.

Her Kopyanın İçeriğini ve Bağlantısını Değiştirin

Her kopyanın içeriğini ve bağlantısını değiştirmeniz gerekecektir.

Sosyal Medya Takip Modülü Ekle

Seçtiğiniz Sosyal Ağları Ekleyin

Bu sırada ihtiyacımız olan sonraki ve son modül ise Sosyal Medya Takip Modülü. Görüntülemek istediğiniz tüm sosyal ağları ekleyin.

Bireysel Sosyal Ağ Stillerini Sıfırla

Her sosyal ağın stillerini ayrı ayrı sıfırlayarak devam edin.

Simge Ayarları

Ardından modülün tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #000000
• Özel Simge Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

aralık

Biraz sol dolgu da ekleyin.

• Sol Dolgu: 3vw

CSS Sınıfı

Bir CSS sınıfı ekleyerek modülün ayarlarını tamamlayın.

3. Satır Ekle

Sütun Yapısı

Bu bölümde ihtiyacımız olan son satır aşağıdaki sütun yapısını içerir:

aralık

Tüm varsayılan üst ve alt dolguyu kaldırarak bu satırın kapladığı alanı sınırlayın.

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

Sütuna Kod Modülü Ekle

JQuery ve CSS Kodu Ekle

Ardından, bir Kod Modülü ekleyin ve tam ekran menü işlevini yapmak için biraz CSS ve JQuery kodu ekleyin. Aşağıdaki yazdırma ekranında görebileceğiniz gibi, JQuery kodunu script etiketleri arasına ve CSS kodunu stil etiketleri arasına manuel olarak yerleştirdiğinizden emin olun.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-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. Bölüm 2'yi Sağ Üst Köşe Logosuna Ayırın

Bölüm Ayarları

Arka plan rengi

Bir sonraki bölüme! Bu bölüm sağ üst köşede logoyu içerecektir. Bölüm ayarlarını açın ve arka plan rengini tamamen şeffaf bir renge değiştirin.

• Arka Plan Rengi: rgba(0,0,0,0)

aralık

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

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

Varsayılan Görünürlük

Bölümün z indeksini de artırın.

• Z İndeksi: 99999

Fareyle Görünürlük

z dizininde vurgulu seçeneğini etkinleştirin ve aynı değerin vurgulu üzerinde de geçerli olduğundan emin olun.

• 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

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Satırın varsayılan üst ve alt dolgusunu da kaldırın.

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

Sütuna Resim Modülü Ekle

PNG Logo Resmi Yükle

Bu satır ve bölümde ihtiyacımız olan tek modül bir İmaj Modülüdür. Yarı şeffaf logo görsel dosyanızı yükleyin.

boyutlandırma

Modülün boyutlandırma ayarlarına gidin ve tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

aralık

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

• Üst Dolgu: 2.5vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2.5vw (Masaüstü), 3.5vw (Tablet), 5vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 4vw (Tablet), 7vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 4vw (Tablet), 7vw (Telefon)

4. Ek Bölüm Ayarları

Bölüm 1

boyutlandırma

Her iki bölümü ve içindeki tüm modülleri tamamladıktan sonra, boyutlarını değiştirme zamanı geldi. İlk bölümü açın ve aşağıdaki genişlik ve yükseklik değerlerini uygulayın:

• Genişlik: 8vw (Masaüstü), 11vw (Tablet), 18vw (Telefon)
• Yükseklik: 7vw (Masaüstü), 11vw (Tablet), 18vw (Telefon)

Varsayılan Ana Eleman

Ardından, bölümün gelişmiş sekmesine gidin ve aşağıdaki CSS kod satırlarını ekleyin:

position: fixed;
top: 0;

Ana Elemanın üzerine gelin

Fareyle üzerine gelindiğinde aynı CSS kod satırlarının uygulandığından emin olun.

position: fixed;
top: 0;

Bölüm 2

boyutlandırma

İkinci bölümün ayarlarını açarak devam edin ve farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: 13vw (Masaüstü), 21vw (Tablet), 30vw (Telefon)

Varsayılan Ana Eleman

Ardından, gelişmiş sekmeye gidin ve aşağıdaki CSS kod satırlarını ekleyin:

position: fixed;
right: 0;
top: 0;

Ana Elemanın üzerine gelin

Fareyle üzerine gelindiğinde aynı CSS kod satırlarının uygulandığından emin olun.

position: fixed;
right: 0;
top: 0;

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

Yukarıdaki tüm adımları tamamladıktan sonra genel başlık şablonunu 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 eğitimde, size Divi's Theme Builder'ı kullanarak tam ekran genel başlık oluşturmayı gösterdik. Tasarımımıza iki sabit unsur ekledik; sol üst köşede bir hamburger simgesi ve sağ üst köşede bir logo. Tıklandığında hamburger simgesi, Divi'nin yerleşik öğeleri kullanılarak yapılan tam ekran bir menü açar. Bu tam ekran menüyü istediğiniz gibi tasarlamak için Divi'yi kullanmakta özgürsünüz! Bu öğreticinin başında JSON dosyasını da ücretsiz olarak indirebildiniz. Herhangi bir sorunuz 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.