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

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

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

Özel Başlık Tasarımını ÜCRETSİZ İndirin

Ücretsiz özel global başlık tasarımına 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.

Youtube Kanalımıza Abone Olun

1. Birincil Menünüzü Ayarlayın

WordPress web sitenizin görünüm ayarlarında menünüzü oluşturarak başlayın.

2. Tema Oluşturucu Seçeneklerine gidin

Ardından Divi'nin Tema Seçeneklerinde Tema Oluşturucu'ya gidin. Bir kez orada, boş bir varsayılan web sitesi şablonu göreceksiniz.

3. Genel Başlık Ekle ve Oluştur

Varsayılan web sitesi şablonu, özel genel üst bilginizi, genel gövdenizi ve genel alt bilginizi oluşturmaya başlayabileceğiniz yerdir. 'Global Başlık Ekle'yi tıklayın ve işleme başlamak için 'Global Başlık Oluştur'u tıklayarak devam edin.

Bölüm Ayarları

boyutlandırma

Sayfada görebileceğiniz bölümü açın, tasarım sekmesine geçin ve farklı ekran boyutlarında genişliği değiştirin.

• Genişlik: %100
• Maksimum Genişlik: 1280 piksel (Masaüstü), %100 (Tablet ve Telefon)

aralık

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

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

Sınır

Sonraki bölümün sol ve sağ alt köşelerine biraz kenarlık yarıçapı ekleyin.

• Sol Alt: 50px
• Sağ Alt: 50px

Kutu Gölge

Ayrıca ince bir kutu gölgesi ekliyoruz.

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

görünürlük

Ardından, gelişmiş sekmeye gidin ve taşmaları gizleyin. Z dizinini de artırın, bu, bölümün tüm sayfa içeriğinin üstünde kalmasını sağlamaya yardımcı olacaktır.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür
• Z İndeksi: 99999

4. Yeni Satırı Başlığa Ayırın

Genel bölüm ayarlarını tamamladığımıza göre artık satır eklemeye başlayabiliriz. Toplamda iki satıra ihtiyacımız olacak; biri başlığa ayrılmış, diğeri ise menü öğelerinin gösterilmesine izin veriyor. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek başlıkla başlayacağız:

Satır Ayarları

Arka plan rengi

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

• Arka Plan Rengi: #38383f

boyutlandırma

Sonraki satırın boyutlandırma ayarlarını değiştirin.

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

Görüntülemek

Satırın ana öğesine tek bir CSS kodu satırı ekleyerek, daha küçük ekran boyutlarında da sütunların yan yana göründüğünden emin olun.

display: flex;

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

Logo Yükle

Satır ayarlarını tamamladıktan sonra modül eklemeye başlama zamanı. 1. sütuna bir Resim Modülü ekleyin ve logonuzu yükleyin.

hizalama

Tasarım sekmesine gidin ve sol görüntü hizalamasını kullandığınızdan emin olun.

• Görüntü Hizalama: Sol

boyutlandırma

Modülün genişliğini de değiştirin.

• Genişlik: 100 piksel

aralık

Ve farklı ekran boyutlarına bazı özel kenar boşlukları değerleri ekleyin.

• Üst Kenar Boşluğu: 5px
• Sol Kenar Boşluğu: 50px (Masaüstü), 20px (Tablet ve Telefon)

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

Sosyal Ağlar Ekle

İkinci sütuna geçin. Orada, bir Sosyal Medya Takip Modülüne ihtiyacımız olacak. Seçtiğiniz sosyal ağları ekleyin.

Sosyal Ağ Arka Plan Rengi

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

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

hizalama

Modülün normal ayarlarına geri dönün ve ardından tüm modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

Simge

Simge ayarlarını da değiştirin.

• Simge Rengi: #ffffff
• Özel Simge Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 16px (Masaüstü ve Tablet), 12px (Telefon)

aralık

Ve biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 10px

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

Kopya Ekle

Üçüncü sütuna geçin ve seçtiğiniz bir kopya ile bir Düğme Modülü ekleyin.

hizalama

Tasarım sekmesinde düğme hizalamasını değiştirin.

• Düğme Hizalama: Sağ

Düğme Ayarları

Düğme ayarlarını buna göre şekillendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 12px (Masaüstü), 10px (Tablet), 8px (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ffae25
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 5px (Masaüstü), 3px (Tablet ve Telefon)
• Düğme Yazı Tipi: Sans'ı Aç
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

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

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50 piksel (Masaüstü ve Tablet), 15 piksel (Telefon)
• Sağ Doldurma: 50px (Masaüstü ve Tablet), 15px (Telefon)

5. Yeni Satırı Menü Çubuğuna Ayırın

Genel başlığa ayrılmış satırı tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak hemen altına başka bir satır ekleyebilirsiniz:

Satır Ayarları

boyutlandırma

Henüz herhangi bir modül eklemeden, tasarım sekmesinde satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Ö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 Menü Modülü Ekle

Seçim Menüsü

Ardından, sütuna bir Menü Modülü ekleyin ve bu öğreticinin ilk bölümünde oluşturduğunuz menüyü seçin.

Düzen

Tasarım sekmesine gidin ve düzen ayarlarını aşağıdaki gibi değiştirin:

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

Bağlantılar

Tasarım sekmesinde de aktif bağlantı rengini değiştirin.

• Aktif Bağlantı Rengi: #ffae25

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

Açılır menü ayarlarındaki açılır menü çizgisi rengi için de aynısını yapın.

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

Simgeler

Sonraki hamburger menü simgesi rengini değiştirin.

• Hamburger Menü Simge Rengi: #ffae25

Menü Metni

Menü metin ayarları ile birlikte.

• Menü Yazı Tipi: Prata
• Menü Metin Rengi: #000000

6. Başlık ve Menü Çubuğunu En Üstte Yapın

Bölüm Ayarlarını Aç

İkinci sırayı tamamladıktan sonra geriye kalan tek şey bölümü sayfalarımızın ve gönderilerimizin en üstüne yapıştırmak. Bunu yapmak için bölüm ayarlarını tekrar açacağız.

Ana Öğeye Özel CSS Ekle

Ardından, gelişmiş sekmesine gideceğiz ve bölümün ana öğesine birkaç satır CSS kodu ekleyeceğiz.

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

7. Genel Başlığı ve Tema Oluşturucu Seçeneklerini Kaydet

Genel başlık tasarımının tamamını tamamladıktan sonra, şablon düzeninden çıkmadan önce tasarımı kaydettiğinizden emin olun. Şablon düzeninin dışına çıktığınızda, tüm tema oluşturucunuzun değişikliklerini kaydedin ve işiniz bitti!

Ö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 yeni Tema Oluşturucusu ile nasıl özel bir global başlık oluşturacağınızı gösterdik. Bu eğitici, güzel başlıklar oluşturmanın ve bunları tüm web sitenize veya belirli özel gönderi türlerinize uygulamanın ne kadar kolay olduğunu göstermeye gider. Umarız bu öğretici, Tema Oluşturucu'yu hemen kullanmaya başlamanız için size ilham verir! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

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.