Divi’nin yeni sütun yapısı ile çarpıcı bir gezinme panosu yapın
Mencari cara baru dan unik untuk menyusun beranda Anda? Membuat dasbor navigasi mungkin merupakan cara yang harus dilakukan. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana tepatnya Anda dapat mencapai halaman dasbor yang menakjubkan yang dapat Anda gunakan untuk berbagai tujuan. Apakah Anda ingin mengubah cara orang menavigasi di halaman Anda, atau Anda ingin menyoroti layanan yang ditawarkan perusahaan Anda, membuat dasbor akan membantu Anda mencapai apa yang Anda pikirkan. Kami hanya menggunakan opsi bawaan Divi dan di atas itu, kami juga menyediakan Anda dengan palet warna terang dan gelap yang dapat Anda gunakan. Tutorial ini terinspirasi oleh salah satu desain Edoardo Mercati.
Haydi Yapalım şunu! Pratinjau Sebelum kita masuk ke tutorial, mari kita lihat hasil akhirnya pada ukuran layar yang berbeda:
Warna #1: #f6f6f6 (latar belakang bagian)
Warna #2: #ffffff (latar belakang kolom)
Warna #3: #333333 (warna teks judul)
Warna #4: #000000 (warna pembagi)
Warna #5: #6F6B68 (blurb warna teks isi)
Warna #6: #e5e5e5 (latar belakang kolom 2)
Warna #7: #ffffff (warna latar blurb)
Karanlık
Warna #1: #141414
Warna #2: #22121
Warna #3: #ffffff
Warna #4: #ffffff
Warna #5: #dddddd
Warna #6: #2212121
Warna #7: #333333
Warna Bersama
Warna #7: #0457ff
Warna #8: #cc0432
Warna #9: #839e00
Warna #10: #c68e00
Yaratıcı başlayalım, sayfanıza yeni bir parça ekleyerek arka plan renginin yeni bir standart kısmını ekleyelim. Ardından, bölüm ayarlarını açın ve arka plan rengini ekleyin: arka plan rengi: Renk #1 (renk paletinde bulun)
Mesafe Üstte ve altta ekstra boşluklar yapmak için bazı özel pedler de uygulayacağız: Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
Satırlar #1 sütun yapısı ekleyin Şimdi parçanın ayarlarını değiştirmeyi bitirdikten sonra satır eklemeye başlayabiliriz. İlk satırınız için aşağıdaki sütun yapısını seçin: Sütun Rengi Sütun 1 Herhangi bir modül eklemeden satır ayarlarını açın ve sütun 1’in arka plan rengini ekleyin: Sütun 1 Renk Arka Plan: Renk #2 (renk paletinde bulun)
Yapıştırıcı Bir sonraki tasarım sekmesini açın ve satır boyutu ayarlarınızı değiştirin: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Yüksek sütunu eşitleyin: evet
Son mesafe, ilk satır ve sütuna biraz dolgu ekleyin: Dolgu Alt: 100 piksel
Sütun 1 Dolgu Üst: 100 piksel
Sütun 1 Pilding Alt: 100 piksel
Sütun 1 Sol dolgu: 50px
Sütun 1 Dolgu Sağ: 50px
Başlık metin modülünü Sütun 1’e ekleyin Modül eklemeye başlamak için H1 Time! Metin modülünün başlığını ekleyerek başlayacağız. H1’in bir kopyasını ekledikten sonra, modül başlığınızın metin ayarlarını değiştirin: Başlık Mektubu Ağırlığı: Kalınlık
Tesisat Metin Başlığı: Sol
Başlık Metin Renk: Renk #3 (Renk Paletinde bulun)
Başlık Metin Boyutu: 75px (masaüstü), 55px (tablet), 36px (telefon)
Bölücü modülünü Sütun 1 renk bölücüsüne ekleyin Metin modülünün başlığının hemen altına, devam edin ve bölücü modülünü aşağıdaki renkle ekleyin: Renk Renk: Renk #4 (Renk Paletinde Bul) Bir sonraki boyut ayarlarını açın ve bölücü genişliğinizi ayarlayın:
Genişlik:% 27 Mesafe Bölücüinizin üstüne biraz yer ekleyin:
Üst kenar boşluğu: 50 piksel Açıklama metin modülünü bir sonraki sütun 1’e ekleyin ve son olarak bu satırdaki metin ayarları metin modülünün açıklamasıdır. İçeriğinizi ekledikten sonra metin ayarlarındaki metin yönünü değiştirin:
Metin Oryantasyonu: haklı çıkar Yapıştırıcı Değişiklik Ayrıca bu modülün boyutunu ayarlayın:
Genişlik:% 80 (masaüstü),% 100 (tablet ve cep telefonu) Uzaklık ve özel bir marj kullanarak modülünüzün üstüne biraz boşluk ekleyin:
Üst kenar boşluğu: 50 piksel Blurb modülünü sütun 2 simgesine ekleyin Şimdi ikinci sütuna devam edebiliriz. Bulanık modüllerden birini yaparak başlayacağız. Bundan sonra, bu modülü klonlayabilir ve ona göre değiştirebiliriz. Bir bulanıklık modülü ekledikten ve içeriği değiştirdikten sonra seçtiğiniz simgeyi seçin.
Arka plan rengi Arka plan rengini bulanık modülünüze ekleyerek devam edin: Arka plan rengi: Renk #7 (renk paletinde bulun) Arka Plan Deseni Bilgisayarınıza aşağıdaki küçük deseni kaydedin:
Aşağıdaki ayarlarla birlikte arka plan görüntüsünüz olarak yükleyin: Arka Plan Görüntü Boyutu: Gerçek Boyut Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: tekrarlayın
Simge ayarlarını tasarım sekmesine, görüntü ayarlarını ve simgeleri açın ve uygun ayarları değiştirin:
Renk simgesi: Renk #7 (renk paletinde bulun) Çember simgesi: evet
Çember rengi: #ffffff
Simge yazı tipi boyutunu kullanın: 33px
Metin Ayarları Ardından, metin ayarlarını açın ve bazı değişiklikler yapın:
Metin Oryantasyonu: Orta Metin Rengi: Işık
Metin Ayarları Başlığı Blurb Modülümüz de bazı ek değişiklikler gerektirir: Heavy Font Başlık: Ultra Kalınlık
Yazı tipi stili başlığı: büyük harf Son fakat en az değil, bulanık modül ekranınızı sağlamak ve istediğinizi hissetmek için bazı özel pedler ekleyin:
Üst dolgu: 75px
Dolgu Alt: 75 piksel Sol dolgu: 30px
Sağ dolgu: 30px
Klon Blurb Modülünü Üç kez ve Place 2 Kalan sütunda ilk bulanıklık modülü ile bitirdikten sonra devam edin ve üç kez klonlayın. Kopyalardan birini ilk sütunda bırakın ve diğer ikisini kalan satır sütununa yerleştirin.
Yeni Blurb Modülünü Değiştir Her bir kopya için simgeyi değiştirin, kullanılan simgeyi değiştirmeniz gerekir.
Arka plan rengini de değiştirin, arka plan rengini seçim rengine veya renk paletindeki renklerden birine (Renk #8, #9 veya #10) değiştirmelisiniz. Simge rengini değiştirin Simgenin rengini arka plan için kullandığınız renkle değiştirin. 2. Satırlar ekleyin İkinci sıra sütun yapısı aşağıdaki sütun yapısını gerektirir: Yapıştırıcı Satır ayarlarını açın, boyut ayarlarını açın ve satır genişliğinizi artırın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 2Bir sonraki boşluk aralığını açın ve satırınızın üstüne ve altına bazı özel pedler ekleyin:
Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel Satır sütunundaki ihtiyacınız olan ilk H2 metin ayarları için metin modülünü ekleyin. H2 içeriği ekledikten sonra H2 metin ayarlarını değiştirin:
Başlık 2 yazı tipi ağırlığı: kalın
Başlık 2 Metin Seviyesi: Sol Başlık 2 Renk Metni: Renk #3 (renk paletinde bulun)
Başlık Metin Boyutu: 32px
Renk bölücü modülünü metin modülünün başlığının hemen altına ekleyin, bölücü modülünü aşağıdaki renkle ekleyin: Renk: Renk #4 (Renk Paletinde bulun)
Yapışkan Bir sonraki bölücünün genişliğini değiştirin:
Genişlik:% 9 Son mesafe, bölücünüzün üstüne biraz yer ekleyin:
Üst dolgu: 20px Vurgulanan özellikleri paylaşmak için satırlar #3 sütun yapısı ekleyin, yeni satırınız için aşağıdaki sütun yapısını seçin:
Sütunun arka plan rengi satır ayarlarını açın ve sütunlarınızın her birine aşağıdaki arka plan rengini ekleyin: Üniversite arka plan rengi: Renk #6 (renk paletinde bulun)
Yapışkan Bir sonraki satır genişliğinizi artırın: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 2 Yüksek sütunu eşitleyin: evet
Mesafe ve biraz dolgu ekleyin:
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
Blurb modülünü Sütun 1’e ekleyin Simgemiz artık farklı bir modül eklemeye başlayabilir. İlk sütunda bulanık modülle başlayacağız. İçerik ekledikten sonra seçtiğiniz simgeyi seçin. Arka Plan Rengi Bulanık modülünüze bir sonraki arka plan rengini verin:
Arka plan rengi: Renk #7 (renk paletinde bulun)
Ikon Ayarları Tasarım sekmesine geçin ve simge ayarlarını değiştirin: Ikon Color: #ffffff Çember simgesi: evet
Daire Renk: Renk #7 (renk paletinde bulun) Simge yazı tipi boyutu kullanın: evet
Simge Yazı Tipi Boyutu: 33px
Metin Ayarları Blurb Modülünüzü Değiştirin Metin Oryantasyonunu da değiştirin:
Metin Oryantasyonu: Orta
Başlık Metin Ayarları Bir sonraki başlık metin ayarlarını açın ve bazı değişiklikler yapın:
Ağır yazı tipi başlığı: Ultra Kalın Yazı tipi stili başlığı: büyük harf
Renk Metni Başlığı: Renk #3 (Renk Paletinde bulun) Gövde Ayarları Metin Blurb modülünün metin içeriği de başka bir renk gerektirir: Gövde metni Renk: Renk #5 (renk paletinde bulun)
Son mesafe, bulanık modülünüze bazı özel alan ayarları ekleyin:
Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel Sol dolgu: 30px
Sağ dolgu: 30px Düğme modülünü bulanık modülün hemen altındaki sütun 1 düğmesi hizalamasına ekleyin, devam edin ve düğme modülünü ekleyin. Ayarları açın ve düğmenin hizalanmasını değiştirin:
Düğmenin hizalanması: orta
Ayarlar Düğmesi Bir sonraki düğme ekranınızı değiştirin:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 15px Metin Renk Düğmesi: Renk #3
Düğmenin sınır genişliği: 0px Sınır sınır yarıçapı: 0px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Mesafe Düğme modülünüzün altına bazı kenar boşlukları da ekleyin:
Alt kenar boşluğu: 30 piksel
Klon Blurb ve Düğme Modülü Üç kez ve ilk sütundaki ikinci klonlama modülünün geri kalan sütununa üç kez yerleştirin ve satırınızın geri kalan sütununa yerleştirin.
Yeni Blurb Modülünü Değiştir Simgeyi değiştirin Her yinelenen bulanıklık modülünü yeni bir seçim simgesiyle değiştirin.
Simge rengini değiştirin Simgenin rengini de değiştirin. Renk paletinden 8, #9 ve #10 numarasını kullanmaktan çekinmeyin. Line Clone Arama ve Hat Klonları Tüm özellikleri görüntülemek için, sadece vurgulanmakla kalmaz, başlıkları içeren satırları klonlayacağız.
Line Place o zaman, yaptığımız son çizginin altına yerleştireceğiz. Line Clone Arama ve Klonlar Hat, vurgulanmış bir bulanıklık modülü içeren bir satırla aynı şeyi yapar. Satırı yerleştirin ve yeni başlığınızın altına yerleştirin. Sütun yapısını değiştirin Bu satırda daha fazla özellik görüntülemek için, sütunun yapısını 4 değil, 5 sütuna değiştireceğiz: Sütun 5 sütunlarının arka plan rengini ekleyin Sütunun arka plan rengini yeni sütununa da ekleyin: Renk Arka Plan Rengi: Renk #6 (Renk Paletinde bulun) Klon Blurb ve Düğme Modülü ve Sütun 5 Klonlanması Sıralığınızdaki Blurb modüllerinden birini klonla yerleştirin ve 5. sütun 5’e yinelenerek yerleştirerek boşluğu doldurun. 5 sütun son ama en az değil klon, sunmak ve bitirmek istediğiniz tüm özelliklere sahip iki sıra yapmak için bu 5 sütun satırı klonlama! Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Gösterge panelinin son zihni harika görünüyor ve web sitenizde kullanıcı gezinmesini kolaylaştırmanızı sağlar.Bu yazıda, yalnızca varsayılan Divi seçeneklerini kullanarak baştan yapabileceğiniz iki renkli paletle şaşırtıcı gösterge paneli tasarımlarını paylaştık.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
