Logonuzu Divi Başlığınızın İçindeki Birincil ve İkincil Menü Çubuklarını Çapraz Yapma
Yayınlanan: 2021-05-12Bir başlık oluşturmaya gelince, olasılıklar sonsuzdur. Divi Tema Oluşturucu'yu kullanıyorsanız, hayal edebileceğiniz her şeyi Divi başlığınızın içine ekleyebilirsiniz. Bugün, kaynak listenize çok talep edilen başka bir başlık tasarımı öğreticisini ekliyoruz. Logonuzun başlığınızın içindeki birincil ve ikincil menü çubuklarından nasıl geçeceğini göstereceğiz. 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 Global Başlık Şablonunu İndirin
Ücretsiz genel başlık şablonuna 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.
Ü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.
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. Yeni Genel Başlık Şablonu Oluşturun
Divi Theme Builder'a gidin
WordPress web sitenizin arka ucundaki Divi Theme Builder'a giderek başlayın. Bir kez orada, “Global Başlık Ekle” ye tıklayın.
Yeni Genel Başlık Ekle
Bir açılır menü görünecektir. Sıfırdan oluşturmaya başlamak için “Global Başlık Oluştur” öğesini seçerek devam edin.
2. Başlık Tasarımı Oluşturun
Özel Bölüm Ekle
Bu tasarımı oluşturmak için özel bir bölüm kullanacağız.
Sütun Yapısı
Bu, uzmanlık bölümümüz için kullandığımız sütun yapısıdır:
Sütun 1 Arka Plan Rengi
Uzmanlık bölümünü ekledikten sonra ayarlarını açın ve bir sütun 1 arka plan rengi uygulayın.
- Sütun 1 Arka Plan Rengi: rgba(255,191,0,0.27)
boyutlandırma
Tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Sütun Yüksekliklerini Eşitle: Evet
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- İç Genişlik: %100
- İç Maks Genişlik: 2580 piksel
aralık
Boşluk ayarlarını da değiştirin.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
- Sütun 1 Üst Dolgu: 0px
- Sütun 1 Alt Dolgu: 0px
- Sütun 2 Üst Dolgu: 0px
- Sütun 2 Alt Dolgu: 0px
Sütun CSS Kimlikleri
Ardından, gelişmiş sekmeye gidin ve her iki sütuna da özel bir CSS kimliği uygulayın.
- Sütun 1 CSS Kimliği: başlık-ilk-sütun
- Sütun 2 CSS Kimliği: başlık-ikinci sütun
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ı. Logonuzu yükleyin.
hizalama
Ardından tasarım sekmesine geçin ve görüntü hizalamasını değiştirin.
- Görüntü Hizalama: Merkez
boyutlandırma
Boyutlandırma ayarlarına da maksimum genişlik uygulayın.
- Maksimum Genişlik: 100 piksel
görünürlük
Ve modülü daha küçük ekran boyutlarında gizleyin.
Satır 1'i Sütun 2'ye ekleyin
Sütun Yapısı
Uzmanlık bölümümüzün 2. sütununda, aşağıdaki sütun yapısını kullanarak ilk satırı ekleyeceğiz:
Arka plan rengi
Satır ayarlarını açın ve aşağıdaki arka plan rengini kullanın:
- Arka Plan Rengi: #a163ff
aralık
Satırın tasarım sekmesine gidin ve boşluk ayarlarını aşağıdaki gibi değiştirin:
- Üst Dolgu: 10px
- Alt Dolgu: 10px
- Sol Dolgu: %5
- Sağ Dolgu: %5
Sınır
Daha sonra aşağıdaki kenarlık ayarlarını uygulayın:
- Alt Kenar Genişliği: 3px
- Sol Kenar Genişliği:
- Masaüstü: 3 piksel
- Tablet ve Telefon: 0px
- Kenar Rengi: #6c2eb9
Ana Eleman CSS
Ve satırın ana öğesinin içinde aşağıdaki CSS kod satırlarını kullanın:
display: flex; justify-content: center; align-items: center;
Sütun 1 ve 2'yi Daha Küçük Ekran Boyutlarında Gizle
Tasarımı daha küçük ekran boyutlarında basitleştirmek için 1. ve 2. sütun ayarlarını açıp her ikisini de tablet ve telefonda gizleriz.
Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin
Sosyal Ağlar Ekle
1. sütundaki Sosyal Medya Takip Modülü ile başlayarak modül ekleme zamanı. İstediğiniz sosyal ağları ekleyin.
Bireysel Sosyal Ağ Arka Plan Rengi
Her sosyal ağın arka plan rengini ayrı ayrı değiştirin.
- Arka Plan Rengi: #ffeeba
Simge Ayarları
Genel modül ayarlarına geri dönün ve simge rengini değiştirin.
- Simge Rengi: #6c2eb9
Sınır
Kenarlık ayarlarına da bazı yuvarlak köşeler ekleyin.
- Tüm Köşeler: 100 piksel
Sütun 2'ye Metin Modülü Ekle
İçerik Ekle
Ardından, 2. sütuna seçtiğiniz içerikle bir Metin Modülü ekleyin.
Metin Ayarları
Modül ayarlarını aşağıdaki gibi değiştirin:
- Metin Yazı Tipi: Poppins
- Metin Hizalama: Merkez
Sütun 3'e Düğme Modülü Ekle
Kopya Ekle
3. sütunda, ihtiyacımız olan tek modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.
Düğme Hizalama
Modülün tasarım sekmesine geçin ve farklı ekran boyutlarında düğme hizalamasını değiştirin.
- Düğme Hizalama:
- Masaüstü: Sağ
- Tablet & Telefon: Merkez
Düğme Ayarları
Sonraki düğmeyi stilleyin.
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Boyutu: 14px
- Düğme Metin Rengi: #6c2eb9
- Düğme Arka Plan Rengi: #ffeeba
- Düğme Yazı Tipi: Poppins
- Düğme Yazı Ağırlığı: Kalın
- Düğme Yazı Tipi Stili: Büyük Harf
- Düğme Simgesini Göster: Evet
- Düğme Simge Yerleşimi: Sol
aralık
Ve aşağıdaki dolgu değerlerini uygulayın:
- Üst Dolgu: 10px
- Alt Dolgu: 10px
- Sol Dolgu: 50px
- Sağ Dolgu: 30px
2. sütuna 2. satırı ekleyin
Sütun Yapısı
Bölümümüzün ikinci sütununda ihtiyacımız olan sonraki ve son satır aşağıdaki sütun yapısını kullanır:
Arka plan rengi
Satır ayarlarını açın ve aşağıdaki arka plan rengini kullanın:
- Arka Plan Rengi: rgba(161,99,255,0.1)
aralık
Sonraki satırın boşluk ayarlarını değiştirin.
- Üst Dolgu: 20px
- Alt Dolgu: 20px
- Sol Dolgu: %5
- Sağ Dolgu: %5
Sınır
Ardından, aşağıdaki kenarlık ayarlarını uygulayın:
- Sol Kenar Genişliği:
- Masaüstü: 3 piksel
- Tablet ve Telefon: 0px
- Sol Kenar Rengi: #6c2eb9
Sütuna Menü Modülü Ekle
Seçim Menüsü
O halde bu satırda ihtiyacımız olan tek modül bir Menü Modülüdür. İstediğiniz bir menü seçin.
Tablete ve Telefona Logo Yükle
Ardından, yalnızca tablete ve telefona bir logo yükleyin.
Arka Plan Rengini Kaldır
Ardından modülün arka plan rengini kaldırın.
Menü Metin Ayarları
Modülün tasarım sekmesine gidin ve menü metin ayarlarını aşağıdaki gibi değiştirin:
- Menü Yazı Tipi: Poppins
- Menü Metin Rengi: #6c2eb9
- Menü Metin Boyutu: 16px
Açılır Menü Ayarları
Ardından aşağıdaki açılır menü çizgisi rengini uygulayın:
- Açılır Menü Satır Rengi: rgba(0,0,0,0)
Simge Ayarları
Ardından, simge ayarlarını değiştirin.
- Alışveriş Sepeti Simge Rengi: #6c2eb9
- Arama Simgesi Rengi: #6c2eb9
- Hamburger Menü Simgesi Rengi: #6c2eb9
boyutlandırma
Tablette ve telefonda maksimum logo genişliği uygulayın.
- Logo Maksimum Genişliği:
- Tablet: 70 piksel
- Telefon: 50 piksel
Sütun 1'e Kod Modülü Ekle
Başlık tasarımımızın oranlarını değiştirmek için bazı küçük CSS değişiklikleri yapacağız. Kodu dahil etmek için, 1. sütundaki Görüntü Modülünün altına bir Kod Modülü ekleyin.
Stil Etiketleri Ekle
Kod kutusunun içine bazı stil etiketleri yerleştirin.
Stil Etiketleri Arasına CSS Kodu Ekle
Aşağıdaki CSS kod satırlarını stil etiketleri arasına yerleştirin:
@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
#header-second-column {
width: 90% !important;
}
}
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}
4. Divi Tema Oluşturucu Değişikliklerini Kaydet
Artık her şey yerli yerinde olduğuna göre, geriye kalan tek şey tüm Divi Theme Builder değişikliklerini kaydetmek ve sonucu 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 başlığınızla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, logonuzun başlığınızın içindeki birincil ve ikincil menü çubuğundan nasıl geçeceğini gösterdik. 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.