Amazing Divi Web Sitesi Kahraman Bölümünde Ürün Kategorisi Nasıl Vurgulanır
E-Niaga web sitesine aşina iseniz, ürün kategorisine de aşina olmalısınız. Ürün kategorisi, web sitenizdeki en güçlü sayfalardan bazıları olabilir. Bu nedenle, basit ve zarif bir şekilde bulmayı ve vurgulamayı kolaylaştırmak önemlidir. Varsayılan Divi seçeneği ile tasarımınızı çeşitli yönlere getirebilirsiniz. Bu öğreticide, kahramanınızdaki ürün kategorisini nasıl vurgulayacağınızı göstereceğiz. Başından beri bir tasarım örneği yapacağız ve umarım bu size ürün kategorisini kendi yaratıcı yolunuzda vurgulamanız için ilham verecektir! Haydi Yapalım şunu.
Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Renk 1: #ffffff
Renk 2: #757F1E
Gradyan Türü: Doğrusal
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50 Mesafe Ardından, tasarım sekmesini açın ve o bölüme bazı özel üst ve alt pedler ekleyin.
Üst dolgu: 130px
Dolgu Alt: 130 piksel Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Sütun Rengi Sütun 1 Herhangi bir modül eklemeden, satır ayarlarını açın ve arka plan rengini ilk sütuna ekleyin.
Sütun 1 Arka Plan Rengi: RGBA (0.0,0,0.19) Sütun Arka Plan Resim 1 Karışık modla birlikte ilk sütuna arka plan görüntüleri ekleyin.
Sütun 1 Arka Plan Görüntü Pozisyonu: Alt Orta
Sütun Arka Planının Tekrarlanması Resim 1: Tekrar yok
Sütun 1 Arka Plan Karışımı Görüntü: Çoklu Warish Arka Plan Sütunu 2 İkinci sütun sadece beyaz arka plan rengi gerektirir. Sütun 2 Renk Arka Plan: #ffffff
Yapıştırıcı Sıra ayarlarından tasarım sekmesini girip boyut ayarlarını değiştirerek devam edin. Özel genişlik kullanın: evet
Birim: PX
Özel genişlik: 2000px
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Tüm varsayılan özel dolgunun mesafesini satırdan da kaldırın. Üst dolgu: 0px
Aşağıda dolgu: 0px
Kutunun gölgesi ve pürüzsüz bir kutu gölge ekleyin. Bulanık Güç Gölgesi Kutusu: 80px
Metin modülünü sütun 2’ye ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! İkinci sütunda ihtiyacımız olan ilk modül başlık metin modülüdür. Biraz seçim içeriği ekleyin. Sonraki başlık metin ayarları, başlık metni ayarlarını açın ve bazı değişiklikler yapın. Başlık Mektubu Ağırlığı: Ultra Kalınlık
Başlık Metin Boyutu: 60px (masaüstü ve tablet), 50 piksel (telefon)
Uzay Mektubu Başlığı: -4px
Yüksek çizgi başlığı: 0.8em
Mesafe Bazı özel kenar boşlukları ve dolgu değerleri de ekleyin. Üst Marj: 17VW
Sol dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Bölme modülü ikinci sütun ve son olarak ikinci sütunda gerekli modüllerin sütun 2 görünürlüğüne ekleyin. Seçeneğin bölücünün etkinleştirildiğini gösterdiğinden emin olun. Divisor göster: evet
Renk bir sonraki bölücü rengini değiştirir. Renk: #757F1E
Stil, bölücü kuvvetini stil tarzında da değiştirin. Bölme Stili: Çift
Yapıştırıcı ve bölücünün ağırlığını modül boyutu ayarlarında arttırın. Bölücü ağırlığı: 6px
Son mesafe, geleneklere bölücü modülüne biraz üst ve alt kenar boşlukları ekleyin. Üst Marj: 2VW
Alt marj: 15vw
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Bunun için aşağıdaki sütun yapısını seçin: Sütun Renk Sütunu 1 Satır ayarlarını açın ve arka plan rengini ilk sütuna ekleyin. Sütun 1 Renk Arka Plan: #212121 Bir sonraki yapıştırıcı, tasarım sekmesini açın ve satırın boyutunu oynatın.
Özel genişlik kullanın: evet Birim: PX
Özel genişlik: 2000px
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Üst ve alt dolguya ‘0px’ ekleyerek tüm özel dolgunun sıradan mesafesini de çıkarın.
Üst dolgu: 0px Aşağıda dolgu: 0px
Son fakat en az değil kutunun gölgesi, kutu gölgesinin pürüzsüz bir gölgesini verin.
Bulanık Güç Gölgesi Kutusu: 80px
Sütun 1’e Metin Modülü #1 ekleyin İhtiyacımız olan ilk modülün içeriğini ekleyin. Seçilen birkaç içeriğe sahip ilk sütuna bir tane ekleyin.
Tasarım sekmesini açarak ve metin ayarlarını değiştirerek metin ayarlarına devam edin.
Metin boyutu: 18px (masaüstü), 15px (tablet), 12 piksel (telefon)
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Metin Rengi: Işık
Başlık Metin Ayarları ayrıca Başlık Metin Ayarlarını Değiştirir.
Başlık 3 Renk Metni: #ffffff Başlık 3 Metin Boyutu: 25px (masaüstü), 20px (tablet), 18px (cep telefonu)
Başlık alanı 3 harf: -1px
Mesafe Uzay ayarlarına da bazı özel dolgu değerleri ekleyin.
Üst dolgu: 30px Dolgu Alt: 30 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Metin Modülü #2 Ekle Sütun 2’ye Dolgu Ekle, ikinci sütuna başka bir metin modülü ekleyerek devam edin. Biraz seçim içeriği ekleyin ve ayrıca bağlantı ayarlarına ürün kategorisi sayfasını bağlayın.
Varsayılan arka plan rengi daha sonra, arka plan ayarını açın ve arka plan rengini ekleyin. Arka Plan Rengi: #EAEA Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: #ffb00 Varsayılan metin ayarları Bir sonraki tasarım sekmesindeki metin ayarları etrafında değiştirilir.
Metin yazı tipi ağırlığı: çok kalın Metin yazı tipi stili: büyük harf
Metin rengi: #333333
Metin Boyutu: 16px
Metin mektubu alanı: -1px
Metin Oryantasyonu: Orta
Metin ayarlarında gezinin ve imleci yönlendirirken bu ayarları değiştirin.
Metin rengi: #ffffff Metin Boyutu: 20 piksel
Varsayılan alanlarımız ayrıca birkaç varsayılan alan değeri de uygular.
Üst dolgu: 45px Dolgu Alt: 45px
Sol dolgu: 5 piksel
Doğru dolgu: 5 piksel
Uzay, yüzerken değişeceğimize yöneliktir.
Üst kenar boşluğu: -50px Sol kenar boşluğu: -20px
Üst dolgu: 70px
Dolgu Alt: 70 piksel
Sol dolgu: 5 piksel
Doğru dolgu: 5 piksel
Varsayılan kutunun gölgesi, kutunun gölge ayarlarını açarak devam edin ve tamamen şeffaf kutunun gölgesini ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px Gölge Renk: RGBA (255,255,255.0)
İmlecin görünmesini işaret ederken tamamen şeffaf olan kutunun gölgesinin rengini değiştirmek için gölgede gezin.
Gölge Rengi: RGBA (0.0,0,0.34) Klon Metin Modülü #2 İki kez iki kez yerleştirin ve metin modülünü sütun 2’de değiştirmeyi bitirdikten sonra, modülü iki kez devam edip klonlayabilir ve kopyayı kalan iki sıra sütuna yerleştirebilirsiniz.
İlk yinelenmeyi değiştirin Üçüncü sütundaki ilk yinelenen içeriği değiştirin ve ürün kategorisini ve bağlantısını değiştirin. Arka plan rengini değiştirin Bu modülün arka plan rengini de değiştirin. Arka plan rengi: #ddddd İkinci yinelenmeyi değiştirin Sütun 4’teki ikinci yinelenen içeriği de değiştirin.
Arka plan rengini arka plan rengi ile değiştirin. Arka plan rengi: #c6c6c6 Daha küçük ekran boyutları için bir görüntü modülü ekleyin Sütun 2 satır #1 Yükle Son ancak en azından en az değil, daha küçük ekran boyutları için her şeyi optimize etmek için ilk satırdan ikinci sütuna bir görüntü modülü ekleyeceğiz. Görünürlük yalnızca bu modülden emin olun Modül Devam sekmesindeki masaüstünde saklanarak daha küçük ekran boyutunda görünür.
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Bu yazıdaki son zihin, web sitenizin ana ürün kategorisini spot ışığına yerleştiren inanılmaz bir tasarım örneğini yeniden oluşturduk.Bu öğretici de kendi tasarım türünüzü yaratmanız için size ilham vermesini umuyoruz.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
