Divi ile Yaratıcı Navigasyon Başlıkları Nasıl Tasarlanır
Bugünün gönderisi, web sitenizdeki iki çok önemli öğeyi birleştirmekle ilgilidir: başlıklar ve navigasyon. Bu benzersiz tasarım, işlevsel ve çekici bir navigasyon menüsü olarak işlev görecek şekilde başlığınızda birkaç düğme ayarlıyor. Bu tasarım, Wild Side Design Co. Ve kategorileri yeni bir şekilde göstermesi gereken basit şeyleri ve blogları korumak isteyen siteler için çok uygun olacaktır. Eğer varsa, umarım bu size Divi ile başka harika tasarımlar inşa etmenize ilham verir. Gizlice göz atma
Tek ihtiyacınız olan bu eğitim için divi, bu navigasyon başlığını tasarlamak için Divi Visual Builder’ı kullanacağım. Bence divi basit ama güçlü bir yoldan zevk alacaksınız, gerçekten benzersiz bir şey yapmanıza izin veriyor.Düğmenize ek görüntü arka planı içeren alternatif bir tasarım sunacağım, bu nedenle bu şekilde alırsanız 100px kat 150 piksel boyutta görüntüler kullanmak isteyeceksiniz. Başlığı Tasarlama Yeni bir sayfa oluşturarak ve görsel bir yapımcı kullanarak başlayalım. Varsayılan olarak, sayfanın üstünde düzenlemenizi bekleyen bir parça olacaktır. Bölüm ayarlarını açın ve aşağıdakileri güncelleyerek arka plan görüntüleri ve gradyan genişletme ekleyin: Arka plan görüntüsü: [Görüntü 1920px kali 1080px girin] Sol Renk Derneği Arka Plan: RGBA (127,23,60,0,61) Sağ Renk Arka Plan Gradyan: RGBA (127 , 23,60.0.59)
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet Ardından gelecekteki nefes alan içeriğimizi sağlamak için birkaç üst ve alt ped ekleyin. Pilding Custom: 10VW Top, 10VW Aşağı VW Uzun Üniteyi burada kullanmayı seviyorum, çünkü en üst parodaki içeriği farklı bir ekran boyutunda tutmak için iyi çalışıyor. Satırdan şimdi satırınızdaki sütunun düzenini ayarlayın üçte biri üçte biri. Ardından, sütun 2’nizin arka plan rengini #ffffff olarak ayarlamak için satır ayarlarını düzenleyin. Ve tasarım ayarlarını aşağıdaki gibi güncelleyin: Bu satırın tam genişliğini yapın: evet özel talang genişliğini kullanın: evet Olukların genişliği: 1 sütunun yüksekliğini eşitleyin: evet Bu, sol ve sağdaki gelecekteki gezinme düğmelerimiz için daha fazla alan yaratır. Olukların genişliği, sütunlar arasındaki marjı ortadan kaldırmak için 1 düzenlenir, böylece düğmelerimiz orta sütun içeriğimizin her iki tarafına kolayca yerleştirilebilir.
Orta başlık bölümü için başlık bölümünü tasarlama Sosyal medyayı takip eden metin modüllerini ve modüllerini biriktireceğiz. İlk başlığı ekleyin Metin modülünü orta sütuna ekleyin ve aşağıdakileri güncelleyin: İçindekiler:
Christina Price
Egzersiz & FitnessBu sayfa başlığı olduğu için H1 etiketini kullanıyorum. Ayrıca, metin tasarımına küçük bir yetenek eklemek için ampersand (&) altyazı metnini span etiketine özel yazı tipi rengi ve boyutuyla sarıyorum.
Şimdi aşağıdaki tasarım ve güncelleme sekmesini açın: Metin Yazı Tipi: Lato Metin Rengi: #333333 Metin Metin Boyutu: 2VW (Masaüstü), 30px (tablet), 22px (akıllı telefon) Metin Oryantasyonu: Orta Yazı Tipi Başlık: Montserrat Ağırlık Harfleri Başlık: Kalınlık Yazı Tipi Stili Başlık: TT Renk Metin Başlığı: #333333 Metin Boyutu Başlık: 3VW (Masaüstü), 40px (tablet), 32px (akıllı telefon) Dolgu Özel: 5VW’nin üstünde, alt 2vw, sosyal simgeler eklemek için sosyal takipler ekler, takip etmek için modüller ekler Metin modülü altındaki sosyal medya. Modüle dört sosyal ağ ekleyin, her biri aynı arka plan rengine sahip: arka plan rengi: #7F173C Ardından öğe seviyesini ortaya ayarlayın. Sol sütundaki gezinme düğmesini tasarlamak için Navigasyon Çekme Sol sütunu tasarlayarak, bir düğme tasarlayarak ve daha sonra başka bir düğme oluşturmamıza yardımcı olmak için düğmeyi çoğaltarak başlayacağız. İlk düğmeyi yapmak için düğme modülünü sol sütuna ekleyin ve aşağıdakileri güncelleyin: Metin düğmesi: Tasarım sekmesinin altındaki Christina ile tanışın … Düğmeler için Özel Stil Kullan: Evet Metin Boyutu Düğmesi: 1.5VW (Masaüstü (Masaüstü ), 16px (tablet) Metin Renk Düğmesi: #333333 Arka plan renk düğmesi: #fffff genişlik sınır düğmesi sınırı: 4px periferik renk düğmesi: #fffffffffffr yarıçapı RADIUS Sınır Sınır: 0PX anahtar düğmesi simgesi: Seçim Renk Renk Kuttu simgesi: #7f173c Yerleştirme için yerleşim Düğmeler: Özel Marj Yok: 4px Doğru Ayarları kaydedin. Ardından düğmeyi çoğaltın, içeriği (düğme metni, simge, bağlantı URL’si, vb.) Güncelleyin ve marj ekleyin 5 piksel. Ayarları kaydedin. Şimdi modülü üç kez daha çoğaltın ve her biri için düğme içeriğini güncelleyin. Orta sütuna bitişik toplam beş düğmeye sahip olmalısınız. Satırlarımızın aynı sütun yüksekliğine sahip olacak şekilde düzenlendiğinden, düğmeyle sol sütunun yüksekliğinin yüksekliğe uyacak şekilde orta sütunun altına çekildiğini unutmayın. Sağ sütun başlık düğmesini tasarlama düğmesini sağ sütundaki yapmak için sol sütundaki üst düğmeyi kopyalayın ve üçüncü sütuna yapıştırın. Ardından düğme içeriğini (düğme metni, simge, bağlantı URL’si vb.) Güncelleyin ve aşağıdaki ayarları güncelleyin. Kestin Deneyimi: Kuttu simgesinin sol yerleşimi: Doğru Özel Marj: Sol 4px, sağ 0px
Şimdi oluşturduğunuz düğmeyi çoğaltın ve özel bir 4px üst kenar boşluğuna sahip olmak için alanı güncelleyin.
Ayarları kaydedin. Ardından modülü üç kez daha çoğaltın ve her biri için düğme içeriğini güncelleyin. Orta sütuna bitişik toplam beş düğmeye sahip olmanız gerekir. Son tasarıma bakın.Görüntüler düğmeye alternatif bir tasarım seçeneği olarak, görüntü için düğme simgesini değiştirebilirsiniz. Bunu yapmak için, 100px kez 150 piksel ölçen bir görüntü kullanmanız gerekir. Örneğin, sol sütun tuşuna resim eklemek için, düğmenin modül ayarlarını aşağıdaki gibi düzenleyin: Arka plan görüntüsü: [100 × 150 resmini girin] Arka plan görüntüsü boyutu: Arka planın konumuna göre: Sol orta ekran Kiren simgesi: Dolgu Yok Gelenek: Sol 2.2em Görüntüleri sağ sütun düğmesine eklemek için, modülün her ayarlarını düğmeyi aşağıdaki gibi düzenleyin: Arka plan görüntüsü: [100 × 150 resmini girin] Arka plan görüntü boyutu: Arka plan görüntüsüne göre: Sağ orta görüntüleme düğmesi simgesi : Özel Dolgu Yok: 2.2EM Tüm düğmelerinize bir resim ekledikten hemen sonra, bu tasarım ekranıdır. Mevcut gezinme başlığı tasarımı için duyarlı seçenekler mobil cihazlarda çalışacak ve şöyle görünecektir:
Ama tam olarak istediğiniz şey bu olmayabilir. Diğer bazı seçenekleri düşünmek isteyebilirsiniz. Bir cep telefonundaki düğmeyi gizle, bu tasarım için mobil cihazlarda basit ve fonksiyonel çözüm, düğmelerinizi bir tablet ve akıllı telefonda gizlemek ve aslında bir seçenek olan ana hücresel gezinme menünüzü kullanmaktır. Düğmeyi gizlemek için, düğme modülünün devam eden ayarlarını açın ve bir tablet ve akıllı telefondaki modülü devre dışı bırakmak için kontrol edin. Sonuçlar tabletlerde ve akıllı telefonlarda böyle görünecektir. Gelişmiş Seviye Çözüm: Cep telefonundaki sütun dizisini değiştirmek istiyorsanız, başlık bölümü (şu anda ikinci veya orta sütunda) üstte (veya birinci sipariş) görüntülenmesi için hücreseldeki sütun dizisini değiştirin, Birkaç özel CSS hattı ekleyin. Görsel yapıcının altındaki ana ayarlar menüsünü açın ve ardından Sayfa Ayarları düğmesini tıklayın. Ardından CSS özel giriş kutusuna aşağıdakileri girin: @media (maks-width: 980px) { /*** Sırayı esnek bir kutuya saracak sınıf ***/ .Change-Column Sipariş { Ekran: -Webkit -Box; Ekran: -moz -Box;
Ekran: -ms -flexbox;
Ekran: -webkit -flex;
Ekran: Flex;
-Webkit-Flex-Swrap: Wrap; / * Safari 6.1+ */
Flex-Wrap: sar;
}
/*** Flex Box satırında sütun sırasını tasarlayacak özel sınıflar ***/. Bir {
-Webkit-Sipariş: 1;
Sipariş: 1;
}
.iki {
-Webkit-Sipariş: 2;
Sipariş: 2;
}
.üç {
-Webkit-Sipariş: 3;
Sipariş: 3;
}
/*** Düğmeleri tam genişlik ve merkezler düğmesine göre değiştirin Düğme metni ***/
.Change-column-sipariş .et_pb_button {
Ekran bloğu;
Metin-Aign: Merkez! Önemli;
}
}
Bu CSS sütunu derler ve düğmenizi, sütunun tam genişliğine metin ortada ile ulaşacak şekilde değiştirir. Bu telefondaki sütun dizisini değiştirme yöntemi gerçekten yararlıdır. Şimdi Sıra Ayarlarınızı Devam Edin sekmesi altında açın ve CSS sınıfı giriş kutusuna “Değiştir-Kolom-Nurut” sınıfını ekleyin. Ardından CSS sınıfı giriş kutusu sütunu 2’ye “Bir” ekleyin, CSS Sınıf 1 giriş kutusu sütunu 1’e “İki” ekleyin ve CSS sınıfı giriş kutusu sütunu 3’e “Üç” ekleyin.
Tablet ve akıllı telefondaki sağ üst sütun düğmesine 4px kenar boşlukları eklemeniz gerekebilir, böylece ayırma tutarlı olur. Sonuçlar aşağıdadır.
Bu özel navigasyon başlık tasarımının son zihni, geleneksel navigasyon menüleri için benzersiz bir alternatif olabilir. Bu, ana navigasyonunuzun yerine geçmez. Aslında, bu blog kategorisi veya benzeri için bir alt gezinme olarak çok iyi çalışacaktır. Umarım duyarlı geri dönüş çok sorunlu değildir ve sunulan çözüm yardımcı olacaktır. Bu tasarımın ve düşünceleriniz veya sahip olabileceğiniz diğer soruların nasıl kullanılacağı hakkındaki diğer fikirler hakkındaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
