Divi'nin Yeni Sütun Yapılarıyla Çarpıcı Bir Navigasyon Panosu Oluşturma

Ana sayfanızı yapılandırmanın yeni ve benzersiz bir yolunu mu arıyorsunuz? Bir gezinme panosu oluşturmak, gitmenin yolu olabilir. Bu eğitimde, birçok amaç için kullanabileceğiniz çarpıcı bir gösterge tablosu sayfasını tam olarak nasıl elde edebileceğinizi göstereceğiz.

İnsanların sayfanızda gezinme şeklini değiştirmek veya şirketinizin sunduğu hizmetleri öne çıkarmak istiyorsanız, bir gösterge tablosu oluşturmak tam olarak aklınızdakileri elde etmenize yardımcı olacaktır. Sadece Divi'nin yerleşik seçeneklerini kullanıyoruz ve bunun üzerine size kullanabileceğiniz hem açık hem de koyu renk paleti sağladık. Bu eğitim, Edoardo Mercati'nin tasarımlarından birinden esinlenmiştir.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım:

Renk Paletleri

Başlamadan önce, açık veya koyu bir pano oluşturmak isteyip istemediğinizi seçebilirsiniz. Her renk paleti için ihtiyacınız olan renkler aşağıda listelenmiştir. Eğitimi tamamladıktan sonra kullanabilmeniz için bu renk kodlarını yakın tuttuğunuzdan emin olun. Renk paletine özgü bir renk kullanırken, renk numarasına başvuracağız.

Işık

• Renk #1: #f6f6f6 (bölüm arka planı)
• Renk #2: #ffffff (sütun arka planı)
• Renk #3: #333333 (başlık metni rengi)
• Renk #4: #000000 (bölücü rengi)
• Renk #5: #6F6B68 (gövde metni rengi kısa açıklama)
• Renk #6: #e5e5e5 (sütun arka planı 2)
• Renk #7: #ffffff (arka plan rengi bulanık)

Karanlık

• Renk #1: #141414
• Renk #2: #212121
• Renk #3: #ffffff
• Renk #4: #ffffff
• Renk #5: #dddddd
• Renk #6: #212121
• Renk #7: #333333

Karşılıklı Renkler

• Renk #7: #0457ff
• Renk #8: #cc0432
• Renk #9: #839e00
• Renk #10: #c68e00

Oluşturmaya başlayalım

Yeni Standart Bölüm Ekle

Arka plan rengi

Sayfanıza yeni bir bölüm ekleyerek başlayın. Ardından, bölüm ayarlarını açın ve bir arka plan rengi ekleyin:

• Arka Plan Rengi: Renk #1 (Renk Paletinde Bul)

aralık

Üstte ve altta fazladan boşluk yaratmak için bazı özel dolgular da uygulayacağız:

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

1. Satır Ekle

Sütun Yapısı

Artık bölüm ayarlarını değiştirmeyi bitirdiğimize göre, satır eklemeye başlayabiliriz. İlk satırınız için aşağıdaki sütun yapısını seçin:

Sütun 1 Arka Plan Rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve bir sütun 1 arka plan rengi ekleyin:

• Sütun 1 Arka Plan Rengi: Renk #2 (Renk Paletinde Bul)

boyutlandırma

Sonraki Tasarım sekmesine gidin ve satırınızın Boyutlandırma ayarlarını değiştirin:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Son olarak, satıra ve ilk sütuna biraz dolgu ekleyin:

• Alt Dolgu: 100px
• Sütun 1 Üst Dolgu: 100 piksel
• Sütun 1 Alt Dolgu: 100 piksel
• Sütun 1 Sol Dolgu: 50px
• Sütun 1 Sağ Dolgu: 50 piksel

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

H1 Metin Ayarları

Modül eklemeye başlama zamanı! Bir başlık Metin Modülü ekleyerek başlayacağız. H1 kopyanızı ekledikten sonra modülünüzün Başlık Metni Ayarlarını değiştirin:

• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Sol
• Başlık Metni Rengi: Renk #3 (Renk Paletinde Bul)
• Başlık Metni Boyutu: 75px (Masaüstü), 55px (Tablet), 36px (Telefon)

Sütun 1'e Bölücü Modülü Ekle

Bölücü Renk

Metin Modülü başlığının hemen altında, devam edin ve aşağıdaki renge sahip bir Bölücü Modül ekleyin:

• Ayırıcı Renk: Renk #4 (Renk Paletinde Bul)

boyutlandırma

Sonraki Boyutlandırma ayarlarını açın ve ayırıcınızın genişliğini ayarlayın:

• Genişlik: %27

aralık

Ayırıcınızın üstüne de biraz boşluk ekleyin:

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

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

Metin Ayarları

Bu satırdaki sonraki ve son modül, bir açıklama Metin Modülüdür. İçeriğinizi ekledikten sonra metin ayarlarından metin yönünü değiştirin:

• Metin Yönü: Yasla

boyutlandırma

Bu modülün Boyutlandırma ayarlarını da değiştirin:

• Genişlik: %80 (Masaüstü), %100 (Tablet ve Telefon)

aralık

Ve özel kenar boşluğunu kullanarak modülünüzün üstüne biraz boşluk ekleyin:

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

Sütun 2'ye Blurb Modülü Ekle

Simge

Artık ikinci sütuna geçebiliriz. Blurb Modüllerinden birini oluşturarak başlayacağız. Daha sonra bu modülü klonlayabilir ve buna göre değiştirebiliriz. Blurb Modülünü ekledikten ve içeriği değiştirdikten sonra istediğiniz bir ikonu seçin.

Arka plan rengi

Blurb Modülünüze bir arka plan rengi ekleyerek devam edin:

• Arka Plan Rengi: Renk #7 (Renk Paletinde Bul)

Arka Plan Deseni

Aşağıdaki küçük kalıbı bilgisayarınıza kaydedin:

Aşağıdaki ayarlarla birlikte arka plan resminiz olarak yükleyin:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrarla

Simge Ayarları

Tasarım sekmesine gidin, Görüntü ve Simge ayarlarını açın ve ayarları buna göre değiştirin:

• Simge Rengi: Renk #7 (Renk Paletinde Bul)
• Daire Simgesi: Evet
• Daire Rengi: #FFFFFF
• Simge Yazı Tipi Boyutunu Kullan: 33px

Metin Ayarları

Ardından, metin ayarlarını açın ve bazı değişiklikler yapın:

• Metin Yönü: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Bulanıklık Modülümüzün başlığında da bazı ek değişiklikler gerekiyor:

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf

aralık

Son olarak, Blurb Modülünüze istediğiniz görünümü ve hissi vermek için bazı özel dolgular ekleyin:

• Üst Dolgu: 75px
• Alt Dolgu: 75px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Blurb Modülünü Üç Kez Klonla ve Kalan Sütuna 2. Yerleştir

Artık ilk Blurb Module ile işimiz bittiğinde, devam edin ve onu üç kez klonlayın. Kopyalardan birini ilk sütunda bırakın ve diğer ikisini satırın kalan sütununa yerleştirin.

Yeni Bulanıklık Modüllerini Değiştir

Simgeyi Değiştir

Yinelenenlerin her biri için kullanılan simgeyi değiştirmeniz gerekir.

Arka Plan Rengini Değiştir

Benzer şekilde, arka plan rengini istediğiniz renge veya renk paletindeki renklerden birine (renk #8, #9 veya #10) değiştirmeniz gerekir.

Simge Rengini Değiştir

Simge Rengini, arka plan için kullandığınız aynı renge değiştirin.

2. Satır Ekle

Sütun Yapısı

İkinci satır aşağıdaki sütun yapısına ihtiyaç duyar:

boyutlandırma

Satır ayarlarını açın, Boyutlandırma ayarlarına gidin ve satırınızın genişliğini artırın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2

aralık

Ardından Aralık ayarlarını açın ve sıranızın üstüne ve altına biraz özel dolgu ekleyin:

• Üst Dolgu: 50px
• Alt Dolgu: 50px

Metin Modülü Ekle

H2 Metin Ayarları

Satırın sütununda ihtiyaç duyacağınız ilk modül, bir Metin Modülü başlığıdır. H2 içeriğini ekledikten sonra H2 metin ayarlarını değiştirin:

• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Hizalama: Sol
• Başlık 2 Metin Rengi: Renk #3 (Renk Paletinde Bul)
• Başlık Metni Boyutu: 32px

Bölücü Modülü Ekle

Bölücü Renk

Metin Modülü başlığının hemen altına, aşağıdaki renge sahip bir Bölücü Modül ekleyin:

• Renk: Renk #4 (Renk Paletinde Bul)

boyutlandırma

Daha sonra bölücünün genişliğini değiştirin:

• Genişlik: %9

aralık

Son olarak, bölücünüzün üstüne biraz boşluk ekleyin:

• Üst Dolgu: 20px

3. Satır Ekle

Sütun Yapısı

Vurgulanan özellikleri paylaşmak için yeni satırınız için aşağıdaki sütun yapısını seçin:

Sütun Arka Plan Rengi

Satır ayarlarını açın ve sütunlarınızın her birine aşağıdaki arka plan rengini ekleyin:

• Sütun Arka Plan Rengi: Renk #6 (Renk Paletinde Bul)

boyutlandırma

Sonraki satırınızın genişliğini artırın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ve biraz dolgu da ekleyin:

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Sütun 1'e Blurb Modülü Ekle

Simge

Artık farklı modülleri eklemeye başlayabiliriz. İlk sütunda bir Blurb Modülü ile başlayacağız. İçeriği ekledikten sonra istediğiniz bir simgeyi seçin.

Arka plan rengi

Daha sonra Blurb Modülünüze bir arka plan rengi verin:

• Arka Plan Rengi: Renk #7 (Renk Paletinde Bul)

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını değiştirin:

• Simge Rengi: #ffffff
• Daire Simgesi: Evet
• Daire Rengi: Renk #7 (Renk Paletinde Bul)
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 33px

Metin Ayarları

Blurb Modülünüzün Metin Yönünü de değiştirin:

• Metin Yönü: Merkez

Başlık Metni Ayarları

Sonraki Başlık Metni Ayarlarına gidin ve bazı değişiklikler yapın:

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Rengi: Renk #3 (Renk Paletinde Bul)

Gövde Metni Ayarları

Blurb Module'ün gövde metninin de başka bir renge ihtiyacı var:

• Gövde Metni Rengi: Renk #5 (Renk Paletinde Bul)

aralık

Son olarak, Blurb Modülünüze bazı özel Aralık ayarları ekleyin:

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

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

Düğme Hizalama

Blurb Modülünün hemen altında, devam edin ve bir Düğme Modülü ekleyin. Ayarlarını açın ve Düğme Hizalamasını değiştirin:

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından düğmenizin görünümünü değiştirin:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 15px
• Düğme Metin Rengi: Renk #3
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Düğme Modülünüzün altına da biraz kenar boşluğu ekleyin:

• Alt Kenar Boşluğu: 30px

Blurb & Button Module Klonlama Üç Kez & Kalan Sütunlara Yerleştirme

Her iki modülü de ilk sütuna üç kez klonlayın ve bunları satırınızın kalan sütunlarına yerleştirin.

Yeni Bulanıklık Modüllerini Değiştir

Simgeyi Değiştir

Her yinelenen Blurb Modülünün simgesini yeni bir seçim simgesiyle değiştirin.

Simge Rengini Değiştir

Simge Rengini de değiştirin. Renk paletinin #8, #9 ve #10 numaralarını kullanmaktan çekinmeyin.

Klon Satırı

Satırı Bul ve Klonla

Yalnızca vurgulananlar yerine tüm özellikleri görüntülemek için başlığı içeren satırı klonlayacağız.

Satırı Yerleştir

Ardından, oluşturduğumuz son satırın hemen altına yerleştireceğiz.

Klon Satırı

Satırı Bul ve Klonla

Vurgulanan Bulanıklık Modüllerini içeren satır için de aynı şeyi yapın.

Satırı Yerleştir

Ve yeni başlığınızın altına yerleştirin.

Sütun Yapısını Değiştir

Bu satırda daha fazla özelliğin görünmesini sağlamak için sütun yapısını 4 yerine 5 sütuna değiştireceğiz:

Sütun 5 Sütun Arka Plan Rengi Ekle

Sütun arka plan rengini de yeni sütununuza ekleyin:

• Sütun Arka Plan Rengi: Renk #6 (Renk Paletinde Bul)

Blurb ve Düğme Modüllerini Klonla ve Sütun 5'e Yerleştir

Satırınızdaki Blurb Modüllerinden birini klonlayın ve kopyayı 5. sütuna yerleştirerek alanı doldurun. Simgeyi ve simge rengini de değiştirin.

5-Sütun Satırını Klonla

Son olarak, sunmak istediğiniz tüm özelliklerle iki satır oluşturmak için bu 5 sütunlu satırı klonlayın ve işiniz bitti!

Ön izleme

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

Son düşünceler

Panolar harika görünür ve web sitenizde kullanıcı gezinmesini kolaylaştırmanıza olanak tanır. Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak sıfırdan oluşturabileceğiniz iki renk paleti içeren çarpıcı bir pano tasarımı paylaştık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!