Divi's Theme Builder ile Döndürülmüş Küresel Başlık Nasıl Oluşturulur

Divi Theme Builder çıktığından beri, kendi global başlıklarınızı oluşturma sürecinde size rehberlik etmeye çalıştık. Sayfalarınızın ve gönderilerinizin sol tarafında görünen döndürülmüş bir genel üstbilgiyi nasıl oluşturacağınızı göstererek bunu yapmaya devam edeceğiz. Başlığın arka plan rengi tamamen şeffaftır ve sayfa/yazı içeriğinin görünmesini sağlar. Kaydırırken global başlığın sol tarafta sabit kalmasını sağladık ve menüyü de mobil uyumlu hale getirdik. Bu kullanım örneği eğitiminde, tasarımı sıfırdan nasıl yeniden oluşturacağınızı göstereceğiz ve ayrıca şablon JSON dosyasını ü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

Döndürülmüş Küresel Başlık Şablonunu ÜCRETSİZ İndirin

Ellerinizi döndürülmüş 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.

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 sitenizdeki Divi Theme Builder'a giderek başlayın.

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

'Global Başlık Ekle'yi tıklayın ve 'Global Başlık Oluştur'u seçin.

2. Döndürülmüş Taraf Genel Başlığını Oluşturmaya Başlayın

Yeni Bölüm Ekle

Arka plan rengi

Şablon düzenleyiciye girdikten sonra, zaten orada olan bölümü açabilir ve farklı ekran boyutlarında arka plan rengini değiştirebilirsiniz.

• Arka Plan Rengi: rgba(0,0,0,0) (Masaüstü), #FFFFFF (Tablet ve Telefon)

boyutlandırma

Daha sonra bölümün boyutlandırma ayarlarını değiştirin.

• Genişlik: 5vw (Masaüstü), %100 (Tablet ve Telefon)
• Min Yükseklik: 100vw (Masaüstü), otomatik (Tablet ve Telefon)

aralık

Bazı özel üst ve alt dolguları da ekleyin.

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

Kutu Gölge

Ardından, kutu gölgesi ayarlarına gidin ve farklı ekran boyutlarına özel bir kutu gölgesi ekleyin.

• Kutu Gölgesi Yatay Konum: 32px (Masaüstü), 0px (Tablet ve Telefon)
• Kutu Gölge Bulanıklığı Gücü: 49px
• Kutu Gölge Yayılma Gücü: 0px (Masaüstü), 19px (Tablet ve Telefon)
• Gölge Rengi: rgba(0,0,0,0.12)

Varsayılan Ana Eleman

Ayrıca, bölümün ana öğesine birkaç satır CSS kodu ekleyerek, döndürülen genel başlığın sol tarafta sabit kalmasını sağlayacağız.

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

Ana Elemanın üzerine gelin

Aynı CSS kodu satırlarını bölümün vurgulu ana öğesine de eklediğinizden emin olun.

position: fixed;
top: 0;

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

Ardından, görünürlük ayarlarında z dizinini artırın.

• Z İndeksi: 99999

Fareyle Görünürlük

Fareyle üzerine gelindiğinde aynı değerin geçerli olduğundan emin olun.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

Bölüm 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ırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

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

Sütun Ayarları

Ana Eleman (Tablet ve Telefon)

Tablet ve telefonda tamamen farklı bir görünüm ve his arıyoruz. Üç farklı modülü yan yana yerleştireceğiz. Bunu yapmak için biraz CSS kodu eklememiz gerekecek. Sütunun ayarlarını açın, gelişmiş sekmesine gidin ve aşağıdaki CSS kodu satırlarını tabletin ve telefonun ana öğesine ekleyin:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

Sütuna Resim Modülü Ekle

Logo Yükle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül bir Görüntü Modülü. Seçtiğiniz yarı şeffaf bir logo resim dosyası yükleyin.

boyutlandırma

Ardından, tasarım sekmesine gidin ve farklı ekran boyutlarının genişliğini değiştirin.

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

Ölçeği Dönüştür

Sonraki dönüştürme ölçeği ayarlarını değiştirerek modülün boyutunu artırın.

• Sağ: %170 (Masaüstü), %100 (Tablet ve Telefon)
• Alt: %170 (Masaüstü), %100 (Tablet ve Telefon)

Dönüştür Çeviri

Ve masaüstüne bir alt dönüşüm çeviri değeri ekleyerek modülü sağa doğru itin.

• Alt: 1vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütuna Menü Modülü Ekle

Seçim Menüsü

İhtiyacımız olan bir sonraki modül Menü Modülü. İstediğiniz bir menü seçin.

Arka Plan Rengini Kaldır

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

Düzen

Ardından tasarım sekmesine gidin ve düzen ayarlarını değiştirin.

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

Varsayılan Menü Metni

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

• Aktif Bağlantı Rengi: #cecece
• Menü Yazı Tipi: Montserrat
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)

Menü Metnini Gezin

Fareyle üzerine gelindiğinde menü metin rengini değiştirin.

• Menü Metin Rengi: #afafaf

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

Ayrıca açılır menü ayarlarında da bazı değişiklikler yapıyoruz.

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

Simgeler

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

• Hamburger Menü Simgesi Rengi: #000000

aralık

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

• Üst Marj: 18vw (Masaüstü), 0vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 18vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: -13vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -13vw (Masaüstü), 0vw (Tablet ve Telefon)

Dönüştür Döndür

Şimdi, döndürülmüş efekti oluşturmak için modülün dönüşüm döndürme değerleriyle oynayacağız.

• Sol: 270deg (Masaüstü), 0deg (Tablet ve Telefon)

Sosyal Medya Takip Modülünü Sütuna Ekleyin

Sosyal Ağlar Ekle

Döndürülmüş global başlığımızı tamamlamamız gereken bir sonraki ve son modül olan Sosyal Medya Takip Modülüne geçiyoruz. Seçtiğiniz bazı sosyal ağları ekleyin.

Sosyal Ağ Stillerini Sıfırla

Her bir sosyal ağın ayarlarını tek tek sıfırlayarak devam edin. Bu, arka plan renklerinden kurtulmamıza yardımcı olacaktır.

hizalama

Ardından, modülün tasarım sekmesine geçin ve modül hizalamasını farklı ekran boyutlarında değiştirin.

• Hizalama: Sol (Masaüstü), Sağ (Tablet ve Telefon)

Simge Ayarları

Son olarak, simge ayarlarını da değiştirin.

• Simge Rengi: #000000
• Özel Simge Boyutunu Kullan: Evet
• Simge Yazı Boyutu: 2.1vw

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

Tüm modülleri tamamladıktan sonra şablonu kaydedebilir, Divi Tema Oluşturucu'dan çıkabilir 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'nin yeni Tema Oluşturucusu'nu kullanarak nasıl döndürülmüş bir genel başlık oluşturacağınızı gösterdik. Ayrıca menü çubuğunu mobil cihazlarda son derece mobil uyumlu bir sürüme dönüştürdük. Aksi seçilmediği sürece, oluşturduğumuz genel başlık tüm gönderilerinizde ve sayfalarınızda görünecektir. 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.