Çarpıcı Divi Web Sitesi Kahramanı Bölümünde Ürün Kategorileri Nasıl Vurgulanır

E-ticaret web sitelerine aşina iseniz, şüphesiz ürün kategorilerine de aşinasınızdır. Ürün kategorileri, web sitenizdeki en güçlü sayfalardan bazıları olabilir. Bu yüzden onları bulmayı kolaylaştırmak ve basit ve zarif bir şekilde öne çıkarmak önemlidir. Divi'nin yerleşik seçenekleriyle tasarımınızı birçok yöne taşıyabilirsiniz. Bu eğitimde, size kahraman bölümünüzde ürün kategorilerini nasıl vurgulayacağınızı göstereceğiz. Tasarım örneğini sıfırdan oluşturacağız ve umarız ürün kategorilerini kendi yaratıcı yönteminizle öne çıkarmanız için size ilham verir!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Degrade Arka Plan

Sayfanıza yeni bir bölüm ekleyerek başlayın. Bu bölümün ayarlarını açın ve buna bir degrade arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: #757f1e
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

aralık

Ardından, tasarım sekmesine gidin ve bölüme bazı özel üst ve alt dolgular ekleyin.

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

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Sütun 1 Arka Plan Rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ilk sütuna bir arka plan rengi ekleyin.

• Sütun 1 Arka Plan Rengi: rgba(0,0,0,0.19)

Sütun 1 Arka Plan Resmi

Bir karışım modu ile birlikte ilk sütuna bir arka plan resmi ekleyin.

• Sütun 1 Arka Plan Resmi Konumu: Alt Orta
• Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok
• Sütun 1 Arka Plan Resmi Karışımı: Çarpma

Sütun 2 Arka Plan Rengi

İkinci sütun yalnızca beyaz bir arka plan rengine ihtiyaç duyacaktır.

• 2. Sütun Arka Plan Rengi: #ffffff

boyutlandırma

Satır ayarlarının tasarım sekmesine giderek devam edin ve boyutlandırma ayarlarını değiştirin.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 2000 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Satırın tüm varsayılan özel dolgusunu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Kutu Gölge

Ve ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px

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

İçerik Ekle

Modül eklemeye başlama zamanı! İkinci sütunda ihtiyaç duyacağımız ilk modül, bir Metin Modülü başlığıdır. Seçtiğiniz bazı içeriği ekleyin.

Başlık Metni Ayarları

Ardından, 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 Metni Boyutu: 60px (Masaüstü ve Tablet), 50px (Telefon)
• Başlık Harf Aralığı: -4px
• Başlık Çizgisi Yüksekliği: 0.8em

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de ekleyin.

• Üst Marj: 17vw
• Sol Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İkinci sütunda ihtiyaç duyulan ikinci ve son modül bir Bölücü Modüldür. Show Divider seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Sonraki ayırıcının rengini değiştirin.

• Renk: #757f1e

Stiller

Ayırıcı stili stil ayarlarında da değiştirin.

• Bölücü Tarzı: Çift

boyutlandırma

Ve modülün boyutlandırma ayarlarında Bölücü Ağırlığını artırın.

• Bölücü Ağırlığı: 6px

aralık

Son olarak, Bölücü Modüle bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 2vw
• Alt Marj: 15vw

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Bunun için aşağıdaki sütun yapısını seçin:

Sütun 1 Arka Plan Rengi

Satır ayarlarını açın ve ilk sütuna bir arka plan rengi ekleyin.

• Sütun 1 Arka Plan Rengi: #212121

boyutlandırma

Ardından, tasarım sekmesine gidin ve satırın boyutuyla oynayın.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 2000 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Üst ve alt dolguya '0px' ekleyerek satırın tüm özel dolgusunu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Kutu Gölge

Son olarak, sıraya ince bir kutu gölgesi verin.

• Kutu Gölge Bulanıklığı Gücü: 80px

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

İhtiyacımız olan ilk modül bir Metin Modülü. Seçtiğiniz bazı içeriklerle ilk sütuna bir tane ekleyin.

Metin Ayarları

Tasarım sekmesine gidip metin ayarlarını değiştirerek devam edin.

• Metin Yazı Tipi Ağırlığı: Hafif
• Metin rengi: #ffffff
• Metin Boyutu: 18px (Masaüstü), 15px (Tablet), 12px (Telefon)
• Metin Satırı Yüksekliği: 1em
• Metin Yönü: Sol
• Metin Rengi: Açık

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık 3 Metin rengi: #ffffff
• Başlık 3 Metin Boyutu: 25px (Masaüstü), 20px (Tablet), 18px (Telefon)
• Başlık 3 Harf Aralığı: -1px

aralık

Boşluk ayarlarına da bazı özel dolgu değerleri ekleyin.

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

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

İkinci sütuna başka bir Metin Modülü ekleyerek devam edin. İstediğiniz içeriği ekleyin ve ürün kategorisi sayfasını bağlantı ayarlarında da bağlayın.

Varsayılan Arka Plan Rengi

Ardından, arka plan ayarlarına gidin ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #eaeaea

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.

• Arka Plan Rengi: #ffbb00

Varsayılan Metin Ayarları

Sonraki tasarım sekmesindeki metin ayarlarını değiştirin.

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #333333
• Metin Boyutu: 16px
• Metin Harf Aralığı: -1px
• Metin Yönü: Merkez

Fareyle Üzerine Gelme Metin Ayarları

Ve fareyle üzerine gelindiğinde bu ayarları değiştirin.

• Metin Rengi: #ffffff
• Metin Boyutu: 20px

Varsayılan Aralık

Ayrıca bazı varsayılan boşluk değerleri uyguluyoruz.

• Üst Dolgu: 45px
• Alt Dolgu: 45px
• Sol Dolgu: 5px
• Sağ Dolgu: 5px

Vurgu Aralığı

Hover'da değiştireceğimiz şey.

• Üst Kenar Boşluğu: -50px
• Sol Kenar Boşluğu: -20px
• Üst Dolgu: 70px
• Alt Dolgu: 70px
• Sol Dolgu: 5px
• Sağ Dolgu: 5px

Varsayılan Kutu Gölgesi

Kutu gölge ayarlarını açarak devam edin ve tamamen şeffaf bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(255,255,255,0)

Vurgulu Kutu Gölgesi

Görünmesi için üzerine gelindiğinde tamamen şeffaf kutu gölge rengini değiştirin.

• Gölge Rengi: rgba(0,0,0,0.34)

Klon Metin Modülü #2 İki Kez ve Kalan Sütunlara Yerleştirme

2. sütundaki Metin Modülünü değiştirmeyi bitirdikten sonra, devam edip modülü iki kez klonlayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

İlk Kopyayı Değiştir

İçeriği Değiştir

Üçüncü sütundaki ilk kopyayı açın ve ürün kategorisinin içeriğini ve bağlantısını değiştirin.

Arka Plan Rengini Değiştir

Bu modülün arka plan rengini de değiştirin.

• Arka Plan Rengi: #dddddd

İkinci Kopyayı Değiştir

İçeriği Değiştir

4. sütundaki ikinci kopyanın içeriğini de değiştirin.

Arka Plan Rengini Değiştir

Arka plan rengiyle birlikte.

• Arka Plan Rengi: #c6c6c6

1. Satırın 2. Sütuna Daha Küçük Ekran Boyutları için Görüntü Modülü Ekleyin

Fotoğraf yükleniyor

Son olarak, her şeyi daha küçük ekran boyutları için optimize etmek için ilk satırın ikinci sütununa bir Görüntü Modülü ekleyeceğiz.

görünürlük

Modülün gelişmiş sekmesinde masaüstünde gizleyerek bu modülün yalnızca daha küçük ekran boyutlarında göründüğünden emin olun.

Ön izleme

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

Son düşünceler

Bu gönderide, web sitenizin ana ürün kategorilerini ön plana çıkaran çarpıcı bir tasarım örneğini yeniden oluşturduk. Umarız bu eğitim size kendi tasarımlarınızı yaratmanız için ilham verir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!