Divi Ürün Sayfa Şablonunuza WOO Bildirim Modülü Nasıl Eklenir
Onay ve geri bildirim, herhangi bir e -ticaret sayfası için önemli unsurlardır. Kullanıcılar, ürünü satın almak için düğmeyi tıkladıktan sonra ne olduğunu bilmek ister. Ayrıca sepetlerinde ne olduğunu görmek için kolay bir yol istiyorlar. Divi Woo’nun Bildirim Modülü, Woocommerce ürün sayfanız için bu doğru özelliği sağlar. Bu makalede, DIVI ürün sayfanıza WOO Bildirim Modülünü nasıl düzenleyeceğimizi ve ekleyeceğimizi göreceğiz. Ayrıca neden ihtiyacınız olduğunu ve eklemek için en iyi yeri tartışacağız. Başlayalım. Önizlemenin ilk olarak, ne inşa edeceğimize bakalım.
Masaüstünde woo not modülü
bölüm
Tema üreticisi
Taşınabilirlik
İçe aktarmak
Dosyanızı seçin
Divi Tema Şablonu İthalat
Kale
WOO bildirim modülü tarafından ne yapılır WOO Dikkat Modülü iki önemli şey yapar: 1 – Kullanıcılara alışveriş sepetlerine ürün yerleştirmeyi başardıkları geri bildirim vermek. 2-Bu, alışveriş sepetine sepetlerindeki öğeleri görebilecekleri bir bağlantı sağlar. Woo bildirimi, Woo ürün sayfaları, sepet sayfaları ve ödeme sayfaları için bir seçenektir. İkinci seçenek sepet durumu ve kupon bilgilerini gösterir. Üçüncüsü, kupon alanı ile birlikte giriş alanını gösterir. İlk ürün seçeneğini kullanacağız. Mevcut ürünler, en son ürünler veya listeden seçtiğiniz herhangi bir ürün için görüntülenebilirsiniz. Diğer Woo modüllerinin aksine, WOO Bildirim modülü yalnızca belirli koşullar altında sayfada görüntülenir. Yalnızca kullanıcı sepetlerine ürün eklerse görülür. Bu örnek, ürün arabaya eklenmediğinde ürün sayfasını gösterir. Ürün arabaya eklendikten sonra modül görünecektir. Woo Bildirim Modülü Ekle Divi Builder’daki tüm Woo modülleri gibi, Woo’nun bildirim modülleri yalnızca WooCommerce’ı yüklediyseniz seçeneklerdir. Bir modül eklemek için Gri -Gray simgesini tıklayın, Woo bildirimini arayın ve modülü seçin. Birçok Divi ürün sayfası şablonu WOO Bildirim Modülünü içerir. Woo Bildirim Modülünün yerleştirilmesi
Woo Bildirim Modülü için en iyi yer, ekmek kırıntısının altında avlunun üstünde. Bu kullanıcılar için öne çıkacaktır ve bu tür bilgileri görmeyi bekledikleri yer budur. Modülün ürün bilgilerinin üzerine yerleştirildiği bu tel kafes ekranına bakabiliriz. WOO Bildirim Modülü Nasıl Organize Edilir Zaten kullandığım şablonun düzenlenmiş bir modülü var. Kendi stilinizi eklemek istiyorsanız bu stili göreceğiz ve daha sonra, Giyim Mağazası Düzeni Paketi için Düzen Paketinden ve Şablon Başlığı ve Altbilgiden tasarım kuyruğunu kullanarak farklı bir şekilde ayarlayacağız. Bu, yüzerken rengi değiştiren düğmeleri içerir. İlk olarak, arka planı beyaza getirin. Arka plan: #ffffff Tasarım Sekmesi
Tasarım sekmesini seçin ve başlık yazı tipi için Didact Gothic’i seçin. Yazı tipini siyah yapın ve çizgi yüksekliğini 2em olarak ayarlayın.
Yazı tipi başlığı: Didact Gothic Siyah
Hat yüksekliği: 2em
Düğme Stili
Düğmeye gidin ve özel stilleri etkinleştirin. Metin boyutunu 12 piksel olarak ayarlayın. Masaüstü seçenekleri için metnin rengini beyaza ve arka plana siyah olarak ayarlayın.
Düğmeyi kullanın: Evet Metin Boyutu: 12 piksel
Metin rengi: #ffffff
Arka plan rengi: #000000
Metnin rengini siyah ve arka plan rengini #f8ded5 olarak gösterme ve ayarlama seçeneğini seçin.
Metnin rengini göster: #000000 Nokta arka plan rengi: #f8ded5
Sınır genişliğini ve yarıçapını 0 piksel olarak ayarlayın, harf aralığı 3 piksel, yazı tipi ağırlığı kalınlaşır ve yazı tipi stili TT.
Sınır Genişliği: 0px Sınır yarıçapı: 0px
Mektup alanı: 3px
Mektup Ağırlığı: Kalın
Mektup Kuvvetleri: TT
Düğme simgesini görüntülemek için seçin, sağ oku seçin ve imleci yönlendirirken yalnızca oku görüntülemeyi seçin.
Düğme simgesini görüntüleyin: Evet
Sadece ekran simgeleri düğmeler için yönlendirilir: evet
Ayrıca, metnin etrafına boşluk sağlamak için bir dolgu düğmesi eklememiz gerekir. 15px yukarı ve alt, sola ve sağa 30px ekleyin. Not, bu modül için bir yastık değildir. Yakında ekleyeceğiz. Dolgu düğmesi: 15px (üst, alt), 30px (sol, sağ)
Alana doğru kaydırın. Her tarafa 0m marj ve her tarafa 15 piksel dolgu ekleyin. Bu varsayılan ayardır. Ayarlarınızı kapatın. Marj: 0EM (tüm taraflar)
Dolgu: 15 piksel (tüm taraflar) Satır Ayarları
Ardından, satır ayarlarında bazı ayarlamalar yapmamız gerekir. Ayarları açın ve Tasarım sekmesini seçin. Özel oluk genişliği kullanmayı seçin. 1. olukları genişliğe ve%94 genişliğe ayarlayın.
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Genişlik:% 94
Son olarak, aralığa kaydırın ve 20 piksel yukarı ve 10 piksel aşağı dolguyu ekleyin. İş ayarlarınızı kapatın ve çalışmanızı kaydedin.
Dolgu: 20 piksel üst, 10 piksel aşağıda
Woo Bildirim Modülü için başka bir özel stil Ardından, hadi ekleyelim ve en başından itibaren woo bildirim modülü stilini. Bunun için orijinali silip kendimizi ekleyeceğiz. Gri Plus simgesini tıklayın, Woo bildirimini arayın ve Woo Breadcrumbs modülünün altındaki üst satıra ekleyin. Bunu tasarlamak için düzenden fikirler kullanacağız. Orijinal ile aynı satırı kullanacağız, böylece ayarlar önceki örnekle aynıdır.
WOO Bildirim Ayarları’nda, arka plan ayarlarına gidin ve gradyan seçin. İlk rengi beyaza ayarlayın ve ikinci renk #f8ded5 olur. Gradyan yönü 90 dereceye kadar düzenlenmeli ve başlangıç ve bitiş konumu%50’ye ayarlanmış olmalıdır. Bu, ürün bölümünün bir aynası olan bir renk tasarımı verecektir.
Birinci Degrade: #fffffgradien İkinci: #f8ded5 Gradyan yönü: 90 derece Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Tasarım Sekmesi
Ardından, Tasarım sekmesini seçin ve başlık yazı tipi için Didact Gothic’i seçin. Siyah yazı tipi, masaüstü boyutu 20px, mobil boyutu 15px ve hat yüksekliği 2EM oluşturun.
Yazı tipi başlığı: Didact Gothic
Renk: #000000
Metin Boyutu: 20 piksel (mobil için 15 piksel) Hat yüksekliği: 2em
Düğme Stili
Düğmeye gidin ve özel stili kullanın. Masaüstü için metnin boyutunu 12 piksel ve telefon metninin boyutunu 10 piksel olarak ayarlayın. Masaüstü seçenekleri için metnin rengini siyah ve arka plana #f7eeee8 olarak ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu: 12 piksel (mobil için 10 piksel)
Metin rengi: #000000 Arka plan rengi: #f7eee8
Arka plan rengi için Hover seçeneğini seçin ve #d8dad5 olarak ayarlayın.
Nokta arka plan rengi: #d8dad5
Sınır
Sınır genişliğini 1px, yarıçapı 30px’e, harf aralığını 3px’e, yazı tipi ağırlığına kalın ve TT’ye yazı tipi stili olarak ayarlayın. Düğme simgesi ayarları varsayılan olarak bırakın. Bu, imleci yönlendirirken simgeyi görüntüler ve varsayılan sağ ok içerir. Sınır Genişliği: 1 piksel
Sınır yarıçapı: 30 piksel
Mektup alanı: 3px Mektup Ağırlığı: Kalın
Mektup Kuvvetleri: TT
Düğme simgesini görüntüleyin: Evet
Simge: Küçük sağ ok
Sadece ekran simgeleri düğmeler için yönlendirilir: evet
Ardından, düğme metninin etrafındaki düğmenin boyutunu artırmak için bir dolgu düğmesi eklememiz gerekir. 15px yukarı ve alt, sola ve sağa 30px ekleyin.
Dolgu düğmesi: 15px (üst, alt), 30px (sol, sağ)
Son olarak, sınıra doğru kaydırın. Her tarafa 40 piksel ekleyin. Bu bize düzen tasarımıyla eşleşen yuvarlak bir modül verir. Ayarlarınızı kapatın ve çalışmanızı kaydedin.
Yuvarlak açı: 40 piksel (tüm taraflar) Sonuç, masaüstü ve hücreseldeki woo bildirim modülümüzün görüntülenmesidir.Masaüstünde woo not modülü Woo’nun Mobile’da Bildirim Modülü
Divi ürün sayfası şablonunuza WOO Bildirim Modülünü nasıl düzenleyeceğimiz ve ekleyeceğiniz konusundaki görünümümüz olan zihnin sonlandırılması.Bu modül kullanıcılar için çok fazla bilgi ekler ve kullanıcılar bu bilgileri görmeyi umar.Bu onlara bekledikleri geri bildirimi verir.Ürünün sepetlerine eklendiğini hemen bilecekler ve sepetlerini görmek için kolay bir yol olacaklar.Bu modülün kullanımı kolaydır ve her Divi WooCommerce ürün sayfasının üstüne dahil edilmelidir.Senden duymak istiyoruz.Divi ürün sayfası şablonunuzda WOO Bildirim Modülünü kullanıyor musunuz?Bize yorumlarda söyleyin.
