Divi ve Divi Builder 'ı kullanarak güzel WordPress web siteleri oluşturun.

Divi Başlığı İçinde Bir Menü Çubuğu Geçiş Logosu Nasıl Tasarlanır

Rifat Divi Eğitimleri Jul 23, 2021

Divi bize web sitelerimizi çeşitli şekillerde dekore etmek için büyük bir fırsat sunuyor ve Divi'de gerçekten çarpıcı tasarımlar yaratabilecek birçok seçenek var. Logonuzun birincil ve ikincil menü çubuğunda duracağı bir başlık oluşturmayı hiç düşündünüz mü? Pekala, bugün öğreneceğimiz şey bu. Başlığınızı göstermenin yenilikçi bir yolu. Öyleyse daha fazla zaman kaybetmeyelim ve bunu nasıl yapacağımızı görelim!

gizli zirve

Bu, bugün oluşturacağımız başlık tasarımıdır.

Birinci Bölüm: Genel Başlık Şablonu

Öncelikle global bir başlık şablonu oluşturmamız gerekiyor. Bunu yapmak için "Divi" ye gidelim.

"Global başlık ekle" seçeneğine tıklayın ve bir açılır menü göreceksiniz. "Global Başlık Oluştur" u seçin ve ilerleyin.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

İkinci Bölüm: Başlık Tasarımı

Ekleme: Özel Bölüm

Bu tasarımı yapmak için Özel bölümü seçeceğiz.

Sütun Yapısı

Lütfen bölüm için işaretli sütun yapısını seçin.

Arka Plan Rengi: Sütun 1

Şimdi, yeni oluşturulan Specialty bölümünün sütun 1 ayarını açın ve arka plan rengini değiştirin.

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

boyutlandırma

Tasarım sekmesinden aşağıdaki değerleri 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

Şimdi aynı Tasarım sekmesinden Aralık ayarına gidin.

  • Ü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

Gelişmiş sekmesi altında, her iki sütuna da özel bir CSS kimliği uygulayalım.

  • Sütun 1 CSS Kimliği: başlık-ilk-sütun
  • Sütun 2 CSS Kimliği: başlık-ikinci sütun

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

Resim Yükleme

Şimdi 1. sütuna bir resim modülü ekleyin ve logonuzu ekleyin.

hizalama

Şimdi tasarım sekmesine gidin ve görüntü hizalamasında değişiklik yapın.

  • Görüntü Hizalama: Merkez

boyutlandırma

Boyutlandırma bölümünden maksimum genişlik değerini değiştirin.

görünürlük

Şimdi, bu modülü daha küçük cihazlardan gizleyin, mobil ve tabletin görünürlüğünü devre dışı bırakacağız.

Ekleme: Satır 1'den Sütun 2'ye

Sütun Yapısı

Özel bölüm 2 sütunumuza işaretli sütun yapısını ekleyeceğiz. Bu, ilk Satırımız olarak işlev görecektir.

Arka plan rengi

Satır ayarlarından arka plan rengini uygulayın.

  • Arka Plan Rengi: rgba(161,99,255,0.1)

aralık

Tasarım sekmesinden aralık ayarlarını aşağıdaki gibi değiştirin:

  • Üst Dolgu: 10px
  • Alt Dolgu: 10px
  • Sol Dolgu: %5
  • Sağ Dolgu: %5

Sınır

Şimdi, kenarlık ayarlarında bazı değişiklikler yapın.

  • Alt Kenar Genişliği: 3px
  • Sol Kenar Genişliği: Masaüstü: 3px, Tablet ve Telefon: 0px
  • Kenar Rengi: #6c2eb9

Ana Öğe CSS'si

Şimdi, Gelişmiş sekmesindeki "Ana Öğe" bloğuna CSS Kodunu yazın.

display: flex;
justify-content: center;
align-items: center;

Görünürlük: Sütun 1 ve 2'yi Gizle

Basitleştirme tasarımı için daha küçük cihazlar için sütun 1 ve 2 görünürlüğünü gizleyeceğiz. Bu, tasarımımızı daha temiz hale getirecektir.

1. Sütun'a Sosyal Medya Modülü Ekleniyor

Sosyal Ağ Ekleme

Birinci sütuna bir sosyal medya takip modülü ekleyelim. İstediğiniz sosyal medya platformunu seçin ve buraya ekleyin.

Arka Plan Ve Simge İçin Rengi Değiştir

Sosyal Medya Takip modülünde bazı renk değişiklikleri yapacağız.

  • Arka Plan Rengi: #DBDD54
  • Simge Rengi: rgba(123,15,255,0.46)

Sınır

Şimdi sınır ayarlarından sosyal simgelerimizi yuvarlatın.

  • Tüm Köşeler: 100 piksel

Ekleme: Sütun 2'ye Metin Modülü

Modül ve İçerik

Sütun 2'ye bir metin modülü ekleyin ve seçiminize göre bir slogan veya herhangi bir şey ekleyin.

Metin Ayarları

Metin stilini değiştirin.

  • Metin Yazı Tipi: Poppins
  • Metin Hizalama: Merkez

Ekleme: Düğme Modülü Sütun 3'e

Modül ve İçerik

Sütun 3'te, bir düğme modülü ve istediğiniz içeriği ekleyin.

Düğme Hizalama

Tasarım sekmesinde, düğmenin farklı ekran boyutundaki cihazlara mükemmel şekilde yerleştirilebilmesi için hizalamasını değiştirin.

  • Düğme Hizalama: Masaüstü: Sağ, Tablet ve Telefon: Merkez

Düğme Ayarları

Şimdi daha çekici hale getirmek için düğmede bazı ayarlamalar yapın.

  • Düğme İçin Özel Stiller Kullan: Evet
  • Düğme Metin Boyutu: 14px
  • Düğme Metin Rengi: #DBDD54
  • Düğme Arka Plan Rengi: #158DD8
  • 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

Şimdi dolgu değerlerinde aşağıdaki değişiklikleri yapın.

  • Üst Dolgu: 10px
  • Alt Dolgu: 10px
  • Sol Dolgu: 50px
  • Sağ Dolgu: 30px

Ekleme: Satır 2'den Sütun 2'ye

Sütun Yapısı

Şimdi, bu sütun modülüne son satırı ekleyeceğiz.

Arka plan rengi

Aşağıdaki rengi arka plan olarak uygulayın.

  • Arka Plan Rengi: rgba(161,99,255,0.1)

aralık

Satırın boşluk ayarlarını yapın.

  • Ü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ü: 3px, Tablet ve Telefon: 0px
  • Sol Kenar Rengi: #6c2eb9

Ekleme: Menü Modülü Sütun 2'ye

Şimdi ihtiyacınız olan menüyü seçin ve ayarlayın.

Tablet ve Telefon İçin Logo Yükle

Daha küçük ekran boyutlu cihazlar için bir logo ekleyin.

Menü Metin Ayarları

Şimdi daha düzenli görünmesi için menü metninde bazı ayarlamalar yapın.

  • Menü Yazı Tipi: Poppins
  • Menü Metin Rengi: #6c2eb9
  • Menü Metin Boyutu: 16px

Açılır Menü Metin Ayarları

Şimdi açılır menümüze bir çizgi rengi ekleyin.

  • Açılır Menü Satır Rengi: rgba(0,0,0,0)

Simge Ayarları

Şimdi, 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.

  • Maksimum Logo Genişliği: Tablet: 70px Ve Telefon: 50px

Ekleme: Kod Modülü Sütun 1'e

Başlık tasarımımıza değişiklik getirmek için biraz CSS ayarlaması yapacağız. Bunu yapmak için 1. sütuna bir kod modülü ekleyin. Şimdi aşağıdaki kodu kopyalayın ve o modüle yapıştırın. Bunları Stil kodu arasına koyduğunuzdan emin olun.

@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;
}
}

Üçüncü Bölüm: Tasarımı Kaydet

Tasarımla işimiz bitti. Her şey mükemmel bir şekilde yerleştirilmiş ve şimdi tasarımı kaydedelim ve sonucu görelim. Sağ üstteki çarpı simgesine tıklayın. Sizi Kontrol Paneli'ne getirecek ve tasarımı kaydet'e tıklayacaktır.

Son Bakış

Yani son tasarımımız böyle görünüyor.

Çözüm

Divi ile tasarımınıza daha fazla yaratıcılık getirebileceğinizden daha önce bahsetmiştik. Web sitenizi prezentabl hale getirmenin birçok yolu vardır ve Divi tüm bu desteği sağlayabilir. Umarım bugünkü eğitim, web siteniz için benzersiz bir başlık oluşturmanıza yardımcı olur. Düşüncelerinizi paylaşmaktan çekinmeyin ve bu öğreticiyi beğendiyseniz, arkadaşça bir paylaşım sizi MÜKEMMEL yapacak!