Divi ile Yaratıcı Gezinme Başlığı Nasıl Tasarlanır

Bugünün gönderisi, web sitenizdeki çok önemli iki unsuru birleştirmekle ilgili: başlık ve gezinme. Bu benzersiz tasarım, hem işlevsel hem de çekici bir gezinme menüsü olarak hizmet etmek için başlığınızın içindeki birden çok düğmeyi düzenler.

Bu tasarım, Wild Side Design Co.'nun kişisel antrenör sitesinden esinlenmiştir ve işleri basit tutmak isteyen siteler ve kategorileri yeni bir şekilde sergilemesi gereken bloglar için harika çalışır.

Bir şey olursa, umarım bu size Divi ile başka bir harika tasarım oluşturmanız için ilham verir.

Gizlice Bakış

Tek ihtiyacınız olan Divi

Bu eğitimde, bu gezinme başlığını tasarlamak için Divi görsel oluşturucusunu kullanacağım. Divi'nin tamamen benzersiz bir şey yaratmanızı sağladığı basit ama güçlü yoldan keyif alacağınızı düşünüyorum.

Size butonlarınıza arka plan görseli eklemeyi içeren alternatif bir tasarım önereceğim, bu yüzden bu yola girerseniz 100px'e 150px boyutlarında görseller kullanmak isteyeceksiniz.

Başlık Bölümünü Tasarlama

Yeni bir sayfa oluşturarak ve görsel oluşturucuyu dağıtarak işleri ilerletelim. Varsayılan olarak, sayfanın üst kısmında düzenlemenizi bekleyen bir bölüm olacaktır. Bölüm ayarlarına gidin ve aşağıdakileri güncelleyerek bir arka plan görüntüsü ve degrade kaplaması ekleyin:

Arka Plan Resmi: [1920 piksele 1080 piksel resim ekleyin] Arka Plan Gradyanı Sol Renk: rgba(127,23,60,0.61)
Arka Plan Gradyanı Sağ Renk: rgba(127,23,60,0.59)

Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ardından, gelecekteki içeriğimize biraz nefes alma odası sağlamak için biraz üst ve alt dolgu ekleyin.

Özel Dolgu: 10vw Üst, 10vw Alt

Burada vw uzunluk birimini kullanmayı seviyorum çünkü içeriği farklı ekran boyutlarında ekranın üst kısmında tutmak iyi bir iş çıkarıyor.

Satırı Oluşturmak

Şimdi satırınızdaki sütun düzeninizi üçte bir buçuk üçte bir olacak şekilde ayarlayın.

Ardından, sütun 2 arka plan renginizi #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ı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET

Bu, sol ve sağdaki gelecekteki gezinme düğmelerimiz için daha fazla alan yaratır. 1 olarak ayarlanan oluk genişliği, sütunlar arasındaki boşluklardan kurtulur, böylece düğmelerimiz orta sütun içeriğimizin her iki tarafına kolayca yerleştirilebilir.

Başlık Bölümünün Tasarlanması

Orta başlık bölümü için bir metin modülü ve bir sosyal medya takip modülünü yığacağız.

Başlığı Ekle

Önce orta sütuna bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik:

<h1>Christina Price</h1>
Exercise <span style="color: #7f173c; font-size: 4vw;">&</span> Fitness

Bu bir sayfa başlığı olduğu için h1 etiketini kullandım. Ayrıca metin tasarımına biraz zarafet katmak için altyazı metni ve işaretini (&) özel bir renk ve yazı tipi boyutuyla bir yayılma etiketine sardım.

Şimdi tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Metin Yazı Tipi: Lato
Metin Metin Rengi: #333333
Metin Metin Boyutu: 2vw (masaüstü), 30px (tablet), 22px (akıllı telefon)
Metin Yönü : Merkez

Başlık Yazı Tipi: Montserrat
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metni Rengi: #333333
Başlık Metni Boyutu: 3vw (masaüstü), 40px (tablet), 32px (akıllı telefon)

Özel Dolgu: 5vw Üst, 2vw Alt

Sosyal Takip Simgelerini Ekleyin

Sosyal simgeleri eklemek için metin modülünün altına bir sosyal medya takip modülü ekleyin.

Modüle, her biri aynı arka plan rengine sahip dört sosyal ağ ekleyin:

arka plan rengi: #7f173c

Ardından öğe hizalamasını merkeze ayarlayın.

Sol Sütun Gezinti Üstbilgi Düğmelerini Tasarlama

Sol sütundaki gezinme düğmelerini tasarlamak için, bir düğme tasarlayarak başlayacağız ve ardından geri kalanını oluşturmamıza yardımcı olması için bu düğmeyi çoğaltacağız.

İlk düğmeyi oluşturmak için sol sütuna bir düğme modülü ekleyin ve aşağıdakileri güncelleyin:

Düğme Metni: Christina ile tanışın

Tasarım sekmesi altında…

Düğme Hizalama: Sağ
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 1.5vw (masaüstü), 16px (tablet)
Düğme Metin Rengi: #333333
Düğme Arka Plan Rengi: #ffffff
Düğme Kenar Genişliği: 4px
Düğme Kenarlık rengi: #ffffff
Düğme Sınır Yarıçapı: 0px
Düğme Simgesi: seçiminiz
Düğme Simge Rengi: #7f173c
Düğme Simge Yerleşimi: Sol
Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Özel Kenar Boşluğu: 4px Sağ

Ayarları kaydet.

Ardından bu düğmeyi çoğaltın, içeriği güncelleyin (düğme metni, simge, bağlantı url'si vb.) ve 5 piksellik özel bir üst kenar boşluğu ekleyin.

Ayarları kaydet.

Şimdi bu 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üğmeniz olmalıdır.

Satırımız eşit sütun yüksekliklerine sahip olacak şekilde ayarlandığından, düğmelerin bulunduğu sol sütunun yüksekliğinin de orta sütunu yüksekliğe uyacak şekilde aşağı çektiğine dikkat edin.

Sağ Sütun Gezinme Başlığı Düğmelerini Tasarlama

Sağ sütundaki düğmeleri oluşturmak 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.

Düğme Hizalama: Sol
Düğme Simge Yerleşimi: Sağ
Özel Kenar Boşluğu: 4px Sol, 0px Sağ

Şimdi az önce oluşturduğunuz düğmeyi çoğaltın ve aralığı 4 piksellik özel bir üst kenar boşluğuna sahip olacak şekilde güncelleyin.

Ayarları kaydet.

Ardından bu 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üğmeniz olmalıdır.

Son tasarımı inceleyin.

Düğmelere Resim Ekleyin

Alternatif bir tasarım seçeneği olarak, resimler için düğme simgelerinizi değiştirebilirsiniz. Bunu yapmak için 100 piksele 150 piksel boyutunda resimler kullanmanız gerekecektir.

Örneğin, sol sütun düğmelerine bir görüntü eklemek için düğme modülü ayarlarını aşağıdaki gibi düzenleyin:

Arka Plan Resmi: [100×150 resim girin] Arka Plan Resmi Boyutu: Sığdır
Arka Plan Resmi Konumu: Orta Sol
Düğme Simgesini Göster: HAYIR
Özel Dolgu: 2.2em Sol

Sağ sütun düğmelerine bir görüntü eklemek için düğme modülü ayarlarının her birini aşağıdaki gibi düzenleyin:

Arka Plan Resmi: [100×150 resim girin] Arka Plan Resmi Boyutu: Sığdır
Arka Plan Resmi Konumu: Orta Sağ
Düğme Simgesini Göster: HAYIR
Özel Dolgu: 2.2em Sağ

Tüm düğmelerinize resim eklediğinizde, tasarım şöyle görünür.

Gezinme Başlığı için Duyarlı Seçenekler

Şu anda tasarım mobil cihazlarda çalışacak ve şöyle görünecek:

Ancak bu tam olarak istediğiniz gibi olmayabilir. Birkaç başka seçenek düşünmek isteyebilirsiniz.

Mobilde düğmeleri gizle

Mobil cihazlarda bu tasarım için basit ve işlevsel bir çözüm, düğmelerinizi tablet ve akıllı telefonlarda gizlemek ve yalnızca gerçek birincil mobil navigasyon menünüzü bir geri dönüş olarak kullanmaktır.

Bir düğmeyi gizlemek için düğme modülü gelişmiş ayarlarına gidin ve modülü tablet ve akıllı telefonda devre dışı bırakmak için işaretleyin.

Sonuç, tablet ve akıllı telefonda böyle görünecektir.

Gelişmiş Çözüm: Mobilde sütun sırasını değiştirin

Başlık bölümünün (şu anda ikinci veya orta sütunda) üstte (veya ilk sırada) görüntülenmesi için mobil cihazlarda sütun sırasını değiştirmek istiyorsanız, birkaç satır özel CSS ekleyebilirsiniz.

Görsel oluşturucunun altındaki ana ayarlar menüsünü açın ve ardından sayfa ayarları düğmesini tıklayın. Ardından, Özel CSS giriş kutusuna aşağıdakini girin:

@media (max-width:980px) {
/*** class that will wrap row in a flex box ***/
.change-column-order {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  flex-wrap: wrap;

}  
/*** custom classes that will designate the order of columns in the flex box row ***/
.one {
     -webkit-order: 1;
     order: 1;
  }
.two {
     -webkit-order: 2;
     order: 2;
  }
.three {
     -webkit-order: 3;
     order: 3;
  }
/*** changes buttons to full width and centers button text ***/
.change-column-order .et_pb_button {
      display:block;
      text-align: center !important;
  }
}

Bu css, sütunları yeniden sıralar ve düğmelerinizi, metin ortalanmış olarak sütunun tüm genişliğine yayılacak şekilde değiştirir. Mobil cihazlarda sütun yığınlama sırasını değiştirmeye yönelik bu yöntem işe yarar.

Şimdi gelişmiş sekmesinin altındaki satır ayarlarınıza gidin ve CSS Sınıfı giriş kutusuna "kolon sırası değiştir" sınıfını ekleyin. Ardından Sütun 2 CSS Sınıfı giriş kutusuna “bir”, Sütun 1 CSS Sınıfı giriş kutusuna “iki” ve Sütun 3 CSS Sınıfı giriş kutusuna “üç” ekleyin.

Ayrımın tutarlı olması için tablet ve akıllı telefondaki sağ üst sütun düğmesine 4 piksel kenar boşluğu eklemeniz gerekebilir.

İşte nihai sonuç.

Son düşünceler

Bu özel gezinme başlığı tasarımı, geleneksel bir gezinme menüsüne benzersiz bir alternatif olabilir. Birincil navigasyonunuzun yerini alması amaçlanmamıştır. Aslında bu, blog kategorileri veya benzeri bir şey için bir alt navigasyon olarak gerçekten işe yarar.

Umarım duyarlı geri dönüşler çok sorunlu değildir ve sunulan çözümler yardımcı olacaktır.

Bu tasarımın nasıl kullanılacağına dair diğer fikirler ve diğer tüm düşünceleriniz veya sorularınız hakkındaki yorumlarda sizden haber almak için sabırsızlanıyorum.

Şerefe!