Divi Sayfa Tasarımınıza Birincil Menü Çubuğunu Nasıl Dahil Edersiniz?

Gezinme, web sitenizdeki kullanıcı deneyiminin hayati bir parçasıdır. Ziyaretçilerinizin estetikten ödün vermeden web sitenizde sorunsuz bir şekilde gezinebilmelerini sağlamak önemlidir. Varsayılan olarak, WordPress Birincil Menü Çubuğu her sayfanın en üstüne yerleştirilir ve takip etmeyi seçtiğiniz sayfa tasarımından ayrı olarak kabul edilir. Yine de çoğu durumda menünüzü genel sayfa tasarımına dahil etmek çarpıcı sonuçlar getirebilir. Web sitenize daha tutarlı bir görünüm ve his verecektir.

Bu gönderide, Divi sayfa tasarımınıza birincil menü çubuğunu nasıl ekleyeceğinizi göstereceğiz. Bu, birincil menünün tipik olarak görüntülenme biçiminde basit ama dinamik bir değişikliktir ve herhangi bir Divi projesine benzersiz bir görünüm kazandırır.

Hadi hadi bakalım!

Youtube Kanalımıza Abone Olun

Ön izleme

Farklı ekran boyutlarındaki sonuca bir göz atarak başlayalım:

Tema Özelleştirici Ayarları

Tema Özelleştirici'ye gidin

Tasarımımızı oluşturmaya başlamadan önce, bazı Tema Özelleştirici değişiklikleriyle başlayalım. WordPress Panonuz > Görünüm > Özelleştir'e gidin .

Arka Plan Resmini Kaydet

Birincil Menü Çubuğunu üstten ayıracağımız için normalde kapladığı alanı kapatacak bir şeye ihtiyacımız olacak. Aşağıdaki arka plan resmini kullanacağız, bu yüzden devam edin ve bilgisayarınıza kaydedin:

Arka Plan Resmini Genel Ayarlara Yükle

Ardından Genel Ayarlar > Arka Plan'a gidin ve resmi web sitenizin arka planına yükleyin.

• Streç Arka Plan Resmi: Etkin
• Arka Plan Konumu: Sabit

Birincil Menü Çubuğu Ayarları

Ayrıca Divi tasarımımızla hazır Birincil Menü Çubuğunu birleştireceğiz. Bunu yapmak için önce Birincil Menü Çubuğu ayarlarını değiştirmemiz gerekecek. Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve aşağıdaki ayarları kullanın:

• Logo Maksimum Yükseklik: 100
• Metin Boyutu: 18
• Harf Aralığı: -1
• Yazı Tipi: Poppins
• Metin Rengi: #333333
• Aktif Bağlantı Rengi: #f55c83
• Arka Plan Rengi: rgba(255,255,255,0)
• Açılır Menü Arka Plan Rengi: #FFFFFF

Yeni Sayfa Ekle

Sayfa Özel CSS'si

Birincil menü çubuğunun sayfa tasarımımızla örtüşmesi için biraz CSS koduna ihtiyacımız olacak. Örtüşmeyi web sitenizin tamamında mı yoksa belirli bir sayfada mı uygulamak istediğinizi seçebilirsiniz. Yalnızca bir sayfaya eklemeyi seçerseniz, sayfa ayarlarınıza aşağıdaki CSS kodunu ekleyin:

#main-header {
margin-top: 140px;
}

Yeni Bölüm Ekle

Arka plan rengi

Haydi tasarıma başlayalım! Yeni bir sayfa ekleyin, Visual Builder'a geçin ve ilk bölümünüzü ekleyin. Daha sonra bölüm ayarlarını açın ve arka plan rengi olarak 'rgba(255,255,255,0.81)' ekleyin. Bu, web sitemizin arka plan görüntüsünün gösterilmesini sağlayacaktır.

aralık

Aralık ayarlarına giderek devam edin ve aşağıdaki özel kenar boşluğunu ve dolguyu ekleyin:

• Üst ve Alt Kenar Boşluğu: 100 piksel
• Sol ve Sağ Kenar Boşluğu: 60px
• Üst Dolgu: 135px
• Alt Dolgu: 0px

Yuvarlatılmış köşeler

Bölümünüzün her bir köşesine de '30px' ekleyin.

Sınır

Ardından, bölümünüze bir üst kenarlık ekleyin:

• Üst Kenar Genişliği: 35px
• Üst Kenar Rengi: #333333

Kutu Gölge

Bitirmek için çok ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 61px
• Kutu Gölge Yayılma Gücü: -13px

1. Satır Ekle

Sütun Yapısı

Satır ve modül eklemeye başlama zamanı! Eşit boyutlu iki sütun kullanarak ilk satırınızı ekleyin.

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve Boyutlandırma ayarlarını değiştirin:

• Bu Satırı Tam Genişlikte Yap: Evet
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Sonra biraz özel dolgu ekleyin:

• Üst Dolgu: 250px (Masaüstü), 50px (Tablet ve Telefon)
• Alt Dolgu: 200px (Masaüstü), 100px (Tablet), 50px (Telefon)
• Sütun 1 Sol Dolgu: 50px (Masaüstü), 0px (Tablet ve Telefon)

Sütun 1'e Başlık Metin Modülü Ekle

H1 Metin Ayarları

Artık modülleri eklemeye başlayabiliriz. Yeni bir başlık Metin Modülü ekleyerek ilk sütunla başlayacağız.

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Orta
• Başlık Metni Boyutu: 120px (Masaüstü), 80px (Tablet), 58px (Telefon)

Kopyanın Bir Kısmına Farklı Renk Ekleme

Metin sekmesine geçerek ve yayılma etiketlerini kullanarak seçtiğiniz kelimeye bir renk ekleyerek başlığınızdaki bir kelimenin rengini kolayca değiştirebilirsiniz.

Sütun 1'e Açıklama Metni Modülü Ekle

Metin Ayarları

Önceki Metin Modülünün hemen altında, devam edin ve aşağıdaki metin ayarlarını kullanarak bir Metin Modülü açıklaması ekleyin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 20px (Masaüstü), 15px (Tablet ve Telefon)
• Metin Satır Yüksekliği: 2em

aralık

Bu Metin Modülü için fazladan bir kenar boşluğuna ihtiyacımız olacak:

• Üst ve Alt Kenar Boşluğu: 50px

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

Düğme Ayarları

Bu sütundaki son modül bir Düğme Modülüdür. CTA kopyasını ekledikten sonra düğme stillerini değiştirin:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #FFFFFF
• Gradyan Rengi 1: #f45085
• Gradyan Rengi 2: #f88c7e
• Gradyan Yönü: 137deg
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 40px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Tipi Ağırlığı: Normal
• Yazı Tipi Stili: Büyük Harf

aralık

Ardından Aralık ayarlarını açın ve düğmenize biraz kenar boşluğu ve dolgu ekleyin:

• Alt Kenar Boşluğu: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Üst ve Alt Dolgu: 15px
• Sol ve Sağ Dolgu: 50px

Kutu Gölge

Son olarak, sayfamızda daha fazla derinlik yaratmak için çok ince bir kutu gölgesi kullanacağız:

• Kutu Gölge Bulanıklığı Gücü: 55px
• Kutu Gölge Yayılma Gücü: -4px
• Gölge Rengi: rgba(84,84,84,0.25)

Sütun 2'ye Görüntü Modülü Ekle

Resmi Kaydet ve Yükle

İkinci sütun yalnızca bir Görüntü Modülü içerir. Divi'nin Dijital Pazarlama Düzen Paketinin parçası olan bir maket kullanıyoruz. Devam edin ve aşağıdaki resmi bilgisayarınıza kaydedin. Bunu yaptıktan sonra, ikinci sütununuzdaki Görüntü Modülüne ekleyin.

2. Satır Ekle

Sütun Yapısı

İkinci satırı ekleme zamanı! Bunun için aşağıdaki sütun yapısını seçin:

Sütun 1 Arka Plan Rengi

Ardından, satır ayarlarını açın ve Sütun 1 Arka Plan Rengi olarak '#FFFFFF' ekleyin.

Degrade Arka Plan Düğmesini Kopyala

Kendimize biraz zaman kazandıracağız ve Düğme Modülü için zaten kullandığımız degradeyi kopyalayacağız. Bunu yapmak için Düğme Modülünü açın, düğme ayarlarına gidin, gradyan arka planına sağ tıklayın ve kopyalayın.

Sütun 2'de Gradyan Arka Planı Yapıştır

Ardından, satır ayarlarınıza geri dönün ve degrade arka planını ikinci sütuna yapıştırın.

Sütun 3 Arka Plan Rengi

Üçüncü sütun için '#FFFFFF' arka plan rengini kullanıyoruz.

boyutlandırma

Sonraki Boyutlandırma ayarlarına gidin ve ayarları değiştirin:

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

aralık

Ayrıca ekstra dolguya da ihtiyacımız olacak:

• Üst ve Alt Dolgu: 0px
• Sütun Üst ve Alt Dolgusu: 30px

Kutu Gölge

Son olarak, ince bir kutu gölgesi kullanacağız:

• Kutu Gölge Bulanıklığı Gücü: 61px
• Kutu Gölge Yayılma Gücü: -20px

Blurb Modülü #1 Ekle

Simge Seç

Toplamda üç Blurb Modülüne ihtiyacımız olacak. Biriyle başlayacağız ve daha sonra zaman kazanmak için klonlayacağız. Devam edin ve ilk sütuna yeni bir Blurb Modülü ekleyin. İçeriğinizi ekledikten sonra istediğiniz bir simgeyi seçin.

Simge Ayarları

Simgenizin ayarlarını buna göre değiştirin:

• Simge Rengi: #f55c83
• Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 88px (Masaüstü ve Tablet), 50px (Telefon)

Başlık Metni Ayarları

Daha sonra başlık metni ayarlarını açın ve bazı değişiklikler yapın:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Orta
• Başlık Metin Boyutu: 34px (Masaüstü ve Tablet), 23px (Telefon)

Gövde Metni Ayarları

Gövde metninin de değiştirilmesi gerekiyor:

• Gövde Yazı Tipi: Poppins
• Gövde Yazı Tipi Ağırlığı: Normal
• Gövde Metni Boyutu: 16px (Masaüstü), 14px (Tablet ve Telefon)
• Gövde Çizgisi Yüksekliği: 2em

aralık

Estetik açıdan daha çekici bir tasarım oluşturmak için biraz dolgu ekleyin:

• Üst Dolgu ve Alt Dolgu: 100px
• Sol ve Sağ Dolgu: 50px (Masaüstü ve Tablet), 10px (Telefon)

Blurb Modülünü İki Kez Klonla ve Kalan Sütunlara Yerleştir

Devam edin ve Blurb Modüllerinizi iki kez klonlayın. Bunu yaptıktan sonra kalan sütunlara yerleştirin.

Sütun 2'deki Blurb Modülünü Değiştirin

Simge Rengini Değiştir

Üçüncü Blurb Modülleri herhangi bir değişikliğe ihtiyaç duymaz, ancak ikincisi yapar. Simge Rengini beyaza değiştirerek başlayın.

Metin Rengini Değiştir

Sonraki Metin Ayarlarını açın ve Metin Rengini 'Açık' olarak değiştirin.

Sabit Gezinmeyi Devre Dışı Bırak

Birincil Menü Çubuğunun tasarımdaki yerini koruduğundan emin olmak için Sabit Gezinme Çubuğunu da devre dışı bırakmamız gerekecek. Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri > 'Sabit Gezinti Çubuğu' seçeneğini devre dışı bırakın ve ayarları kaydedin .

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım:

Son düşünceler

Bu gönderide, genel Divi sayfa tasarımınıza birincil menü çubuğunu yaratıcı bir şekilde nasıl ekleyeceğinizi gösterdik. Bu yaklaşım, web sitenizde daha tutarlı bir görünüm ve his oluşturmanıza yardımcı olacaktır. Biz de sıfırdan bir örnek oluşturduk. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!