Divi sayfa tasarımınıza ana menü çubuğuna nasıl eklenir
Navigasyon, web sitenizdeki kullanıcı deneyiminin önemli bir parçasıdır. Ziyaretçilerinizin estetikten ödün vermek zorunda kalmadan web siteniz aracılığıyla sorunsuz bir şekilde gezinebilmelerini sağlamak çok önemlidir. Varsayılan olarak, WordPress ana menü çubuğu her sayfanın üstüne yerleştirilir ve takip etmeyi seçtiğiniz sayfa tasarımından ayrı olarak kabul edilir. Ancak, birçok durumda, menünüzü genel sayfa tasarımına girmek inanılmaz sonuçlar sağlayabilir. Bu, web sitenizde daha tutarlı bir görünüm ve his sağlayacaktır. Bu yazıda, Divi sayfa tasarımınızda ana menü çubuğuna nasıl gireceğinizi göstereceğiz. Bu, ana menü yönteminde basit ama dinamik bir değişikliktir ve her Divi projesi için benzersiz bir görünüm sunar.
Haydi Yapalım şunu! YouTube Kanalı Önizlememize Abone Olalım Çeşitli ekran boyutlarında nihai sonuçlara bakarak başlayalım:
Arka plan görüntüsü germe: etkinleştirilmiş
Arka plan pozisyonu: Sabit Ana menü çubuğu ayarlarımız ayrıca hazır olan ana menü kanatlarını Divi tasarımımızla birleştirecektir. Bunu yapmak için önce ana menü çubuğu ayarını değiştirmemiz gerekir. Başlık ve Gezinme> Ana Menü Çubuğu ve Aşağıdaki Ayarları Kullanın: Maksimum Yüksek Logo: 100
Metin Boyutu: 18
Mektup alanı: -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
Ana menüyü sayfa tasarımımızla örtüşmek için yeni bir sayfa CSS özel sayfası ekleyin, küçük bir CSS koduna ihtiyacımız var. Web sitenizin her yerinde veya yalnızca belirli sayfalarda üst üste binmek isteyip istemediğinizi seçebilirsiniz. Bir sayfaya eklemeyi seçerseniz, sayfa ayarlarınıza aşağıdaki CSS kodunu ekleyin: #oyun başlığı {
Marj-Top: 140px;
}
Arka plan renginin yeni bir kısmını ekleyin, tasarımla başlayalım! Yeni bir sayfa ekleyin, görsel oluşturucuya geçin ve ilk parçanızı ekleyin. Bir sonraki 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örüntülenmesine izin verecektir. Alan ayarlarına girerek ve aşağıdaki özel marj ve dolgu ekleyerek gelişmiş mesafe: Üst ve Alt Marj: 100 piksel
Sol ve sağ kenar boşluğu: 60px
Üst dolgu: 135px
Aşağıda dolgu: 0px
Yuvarlak açı, parçanızın her köşesine ’30px’ ekleyin. Daha sonra sınırlama, üst sınırınızı ekleyin: Üst sınır genişliği: 35px
Üst sınır rengi: #333333
Bitirmek için kutunun gölgesi, kutunun çok ince bir gölgesi ekleyin. Bulanık Güç Gölge Kutusu: Gölge Kutularının Dağıtımının 61px Gücü: -13px
Satırlar ekle #1 sütun yapısı satır ve modül eklemeye başlama zamanıdır! İlk satırınızı aynı boyutta iki sütun kullanarak ekleyin.
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin: Bu çizgiyi tamamen genişletin: evet Yüksek sütunu eşitleyin: evet
Mesafe Bir sonraki özel pedlerden bazılarını ekleyin:
Üst Pilding: 250 piksel (masaüstü), 50px (tablet ve cep telefonu) Aşağıda dolgu: 200px (masaüstü), 100px (tablet), 50px (cep telefonu)
Sütun 1 Sol dolgu: 50px (masaüstü), 0px (tablet ve cep telefonu)
Başlık metin modülünü Sütun 1 H1 Metin Ayarlarına Ekle Şimdi modül eklemeye başlayabiliriz. Metin modülünün yeni bir başlığını ekleyerek ilk sütunla başlayacağız.
Yazı Tip Başlığı: Poppins Yazı Tip Ağırlığı Başlığı: Orta
Başlık Metin Boyutu: 120 piksel (masaüstü), 80px (tablet), 58px (telefon)
Salin bölümüne farklı renkler ekleyin Metin sekmesine geçerek ve aralık etiketini kullanarak seçtiğiniz kelimeye renk ekleyerek başlığınızdaki kelimenin rengini kolayca değiştirebilirsiniz.
Metin Açıklama Modülünü önceki metin modülünün hemen altındaki metin ayarlarının 1 sütununa ekleyin, devam edin ve aşağıdaki metin ayarlarını kullanarak metin modülünün açıklamasını ekleyin: Metin Yazı Tipi: Poppins Metin yazı tipi ağırlığı: normal
Metin Boyutu: 20 piksel (masaüstü), 15px (tablet ve cep telefonu)
Hat yüksekliği metni: 2em
Mesafemiz bu metin modülü için bazı ek marjlar gerektirir:
Üst ve Alt Marj: 50 piksel Düğme modülünü Sütun 1’e ekleyin Bu sütundaki son modül düğmesi ayarları düğme modülleridir. CTA’nın bir kopyasını ekledikten sonra, düğmenin stilini değiştirin:
Düğmeler için özel bir stil kullanın: evet Metin Renk Düğmesi: #fffffff
Gradyan Rengi 1: #F45085
Gradyan Renk 2: #F88C7E
Gradien yönü: 137deg
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 40 piksel
Yazı tipi düğmesi: Poppins
Yazı tipi ağırlığı: Normal
Yazı tipi stili: büyük harf
Bir sonraki alan ayarlarına açık mesafe ve düğmenize bazı kenar boşlukları ve dolgu ekleyin:
Alt kenar boşluğu: 100 piksel (masaüstü), 20px (tablet ve cep telefonu) Üst ve Alt Dolgu: 15px
Sol ve sağ dolgu: 50px
Son fakat en az değil kutunun gölgesi, sayfamızda daha fazla derinlik yaratmak için kutunun çok ince bir gölgesini kullanacağız:
Bulanık Güç Gölgesi Kutusu: 55px Kutunun gölgesinin dağılımının gücü: -4px
Gölge Renk: RGBA (84,84,84,0.25)
Resim Modülünü Sütun 2’ye Ekleyin Kaydet ve Yükle İkinci sütun görüntüsünü yalnızca görüntü modülünü içerir. Divi Dijital Pazarlama Düzeni Paketinin bir parçası olan Mockup’u kullanıyoruz. Lütfen ve aşağıdaki resmi bilgisayarınıza kaydedin. Bunu yaptıktan sonra, ikinci sütununuzdaki görüntü modülüne ekleyin.
Sıra #2 sütun yapısı ekle ikinci bir satır ekleme zamanıdır! Bunun için aşağıdaki sütun yapısını seçin: Sütun Renk Sütunu 1 Ardından, satır ayarlarını açın ve sütun 1’in arka plan rengi olarak ‘#ffffff’ ekleyin. Düğme gradyanımızın arka planını kopyalayın, zaman kazandıracak ve düğme modülü için kullandığımız gradyanı kopyalayacak. Bunu yapmak için düğme modülünü açın, düğme ayarlarını açın, sağa -gradyanın arka planını tıklayın ve kopyalayın. DEĞERLENDİRİM ARKA MAZRESİ Sütun 2’de, satır ayarlarınıza geri dönün ve ikinci sütundaki gradyan arka planını yapıştırın. Üçüncü sütun için Sütun 3’ün arka plan rengi, ‘#ffffff’ arka plan rengini kullanıyoruz. Yapıştırıcı Bir sonraki boyut ayarlarını açın ve ayarları değiştirin: Özel genişliği kullanın: Evet Özel genişlik: 2600 piksel Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafemiz ayrıca bazı ek pedler gerektirir:
Üst ve Alt Dolgu: 0px
Üst ve Alt Dolgu Sütunu: 30 Piksel Son fakat en az değil kutunun gölgesi, pürüzsüz bir kutu gölgesi kullanacağız:
Bulanık Güç Gölgesi Kutusu: 61px
Kutunun gölgesinin dağılımının gücü: -20px Blurb Modülünü Ekle #1 SEÇİMİ SEÇİMİ SEÇİMİ Toplamda üç bulanık modül gerektirir. Biriyle başlayacağız ve bundan sonra zaman kazanmak için klonlayacağız. Lütfen ve ilk sütuna yeni bir bulanıklık modülü ekleyin. İçeriğinizi ekledikten sonra seçilen simgeyi seçin.
Ikon Ayarları Simge ayarlarınızı buna göre değiştirin:
Renk simgesi: #f55c83 Simge Yerleştirme: Sol Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 88px (masaüstü ve tablet), 50px (telefon)
Başlık Metin Ayarları Bir sonraki başlık metin ayarlarını açın ve bazı değişiklikler yapın:
Yazı Tip Başlığı: Poppins
Ağır yazı tipi başlığı: orta Boyut Metin Başlığı: 34px (Masaüstü ve Tablet), 23px (Telefon)
Gövde metni ayarları İçerik metninin de değiştirilmesi gerekir:
Gövde yazı tipi: Poppins
Vücut ağırlığı: normal İçindekiler Metin Boyutu: 16px (masaüstü), 14px (tablet ve cep telefonu)
Vücut çizgisinin yüksekliği: 2em
Mesafe ve daha estetik çekici bir tasarım yapmak için birkaç rulman ekleyin:
Üst dolgu ve alt dolgu: 100 piksel
Sol ve sağ dolgu: 50px (masaüstü ve tablet), 10px (telefon) Klon bulanık modülünü iki kez iki kez yerleştirin ve kalan sütuna lütfen ve bulanık modül klonunuza iki kez yerleştirin. Bunu yaptıktan sonra kalan sütuna yerleştirin.
Sütun 2’deki Blurb Modülünü Değiştirin Üçüncü Blurb Modül Iconunun rengini değiştirin herhangi bir değişiklik gerektirmez, ancak ikinci modül buna ihtiyaç duyar. Simgenin rengini beyaza değiştirerek başlayın. Metnin rengini değiştirin Bir sonraki metin ayarlarını açın ve metnin rengini ‘parlak’ olarak değiştirin.
Sabit gezinmeyi devre dışı bırakın ana menü çubuğunun tasarımda kaldığından emin olmak için sabit navigasyon bıçaklarını devre dışı bırakmamız gerekir. Bunu yapmak için WordPress Dashboard> Divi> Tema seçeneğini açın> ‘Sabit Gezinme Çubuğu’ seçeneğini devre dışı bırakın ve ayarları kaydedin. Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım: Bu yazıdaki son zihin, Divi sayfanızın tüm tasarımında ana menü çubuğunu nasıl yaratıcı bir şekilde gireceğinizi gösterdik. Bu yaklaşım, web sitenizde daha tutarlı bir görünüm yaratmanıza ve hissetmenize yardımcı olacaktır. Başından beri de bir örnek verdik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
