Divi Builder ile WooCommerce’de tek bir özel ürün sayfası nasıl oluşturulur
WooCommerce, WordPress tabanlı web sitenize e-ticaret işlevselliği eklemek için popüler bir eklentidir. Herhangi bir WordPress temasına yükleyebilirsiniz. Tek ürün sayfaları varsayılan WooCommerce – kullandığınız temanın yanı sıra – çok kötü değil. Ancak özel bir tek ürün sayfası şablonu yaparak daha iyi hale getirebilirsiniz. İstediğiniz öğeleri ekleyebilir, herhangi bir renk ve tipografiyi ayarlayabilirsiniz. Divi Builder tema özelliği, kodlamadan Woocommerce için tek bir ürün sayfası şablonu oluşturmanıza olanak tanır. Divi Builder’da WooCommerce için özel olarak tek bir ürün sayfası oluşturmanın iki yolu vardır. İlk olarak, hazır düzenden yapabilirsiniz. İkincisi, başından beri yapabilirsiniz.
Önceki düzenin Divi Builder’da özel bir tek ürün sayfası oluşturun Önceki düzenden özel bir tek ürün sayfası oluştursa da, Divi Builder düzen kütüphanesinde WooCommerce tek ürün sayfası için bir düzen sunmaz. Ancak zarif tema blog yayınlarından birinden (Divi Builder geliştiricisi) indirebilirsiniz.
Tek Ürün Sayfaları Düzenini İndirin
Yukarıdaki düzen dosyasını indirdikten sonra (zip biçiminde mevcuttur), düzenden bir JSON dosyası alana kadar açın. WordPress Gösterge Tablonuzu girin ve Divi -> Tema Oluşturucusunu Açın. Sağ taraftaki iki ok simgesini tıklayın.
Yukarıdaki gibi bir ürün sayfası oluşturmak için aşağıdaki öğelere ihtiyaç vardır: Bir kısım
Üç Satır
Bazı modüller
Divi Builder ile özel bir tek ürün sayfası şablonu oluştururken, tek ürün şablonunun nerede uygulanacağını belirleyebilirsiniz. Hem tüm web sitelerinde, belirli ürünlerde, belirli kategorilere sahip ürünlerde hem de belirli etiketlere sahip ürünlerde.
Başlamak için, Divi -> Tema Makinesi. Yeni bir şablon bloğu oluşturun ve ürün bölümüne tek bir ürün sayfası şablonu nereye uygulamak istediğinizi belirleyin. Bu örnekte, “T-Shirt” kategorisi altındaki ürünler için özel olarak tek bir ürün sayfası oluşturacağız. Bir şablon oluştur düğmesini tıklayın. Yeni oluşturduğunuz şablon bloğuna özel gövde ekle’yi tıklayın. Özel bir gövde binası seçin.
Bir sonraki sayfada, bir oluşturma seçeneğini seçin ve bir şablon oluşturmaya başlamak için oluşturma düğmesini tıklayın. Varsayılan olarak, bir bölücü ile bir parça verilir. Satır eklemeden önce, o bölümdeki varsayılan bölücüyü silmek isteyebilirsiniz. Bunu yapmak için farenizi bu bölüme yönlendirin ve düzenleme panelini açmak için dişli simgesini tıklayın. Tasarım sekmesinin altındaki bölücü bloğunda bölücüyü silebilirsiniz. # Satır 1 Woo Breadbrumb ve Woo Grafik Bildirim Modülünü yerleştirmek için ilk satırı kullanacağız. Yeni bir satır eklemek için artı hijau düğmesini tıklayın. Tek bir sütun yapısı seçin. Woo Breadcrumb modülünü ekleyin. İçerik bloğu altındaki ürün seçeneğinde, bu ürüne ayarlayın. Ekmek kırıntıları ayarlamak için tasarım sekmesini açabilirsiniz. Metin bloğunda tipografiyi (yazı tipi boyutu, yazı tipi stili, yazı tipi ailesi) ve metin rengini ayarlayabilirsiniz. Mesafeyi (dolgu ve kenar boşluğu) ayarlamak için boşluk bloğunu açabilirsiniz. Yeni değişiklikler yapmayı bitirdiğinizde Yeşil Kontrol Listesi simgesine tıkladığınızdan emin olun. Woo Breadcrumb modülü ile bittiğinde, Woo Sepet Bildirim Modülünü ekleyin.
İçerik bloğu altındaki ürün seçeneğinde, bu ürüne ayarlayın.
Arka planı değiştirmek için içerik sekmesinin altındaki arka plan bloğunu açın. Tipografiyi, metin rengini ve düğme stilini ayarlamak için tasarım sekmesini açabilirsiniz. # Satır 2 Aşağıdaki modülü yerleştirmek için ikinci satırı kullanacağız: Woo Image Woo başlığı Woo sıralamasıWoo Fiyatı
Açıklama woo
Woo sepete ekle
Woo meta
Artı Yeşil düğmesini tıklayarak yeni bir satır ekleyin. İki sütun yapısı seçin.
## Sütun 1 İlk sütuna (solda) gidin ve Woo görüntü modülünü ekleyin. İçerik bloğu altındaki ürün seçeneğinde, bu ürüne ayarlayın.
Bu modülde görünecek üç öğeyi ayarlayabilirsiniz: Ürün Üstün Görüntüler, Resim Galerisi ve Satış Rozeti. Ayarlamak için içerik sekmesinin altındaki öğe bloğunu açın.
Görüntünün boyutunu, sınır yarıçapını ve satış rozetini ayarlamak için Tasarım sekmesini açabilirsiniz. Woo’nun görüntü modülünü düzenlemek için bu sekmeyle oynayabilirsiniz. ## Sütun 2 İkinci sütuna (sağda) gidin ve Woo başlık modülünü ekleyin. İçerik sekmesi altındaki ürün seçeneğinde, bu ürüne ayarlayın. Başlığa stil vermek için tasarımı açın. Bu sekmedeki metnin ve tipografinin rengini ayarlayabilirsiniz. Woo başlık modülünü düzenlemeyi bitirdikten sonra aşağıdaki modülü ekleyin: Woo sıralaması Woo Fiyatı Açıklama woo
Woo sepete ekle
Woo meta
Yine, her modülü düzenlemek için tasarımı açabilirsiniz. # Satır 3 Woo Sekmesi modülünü ve Woo ile ilgili ürünler modülünü yerleştirmek için üçüncü satırı kullanacağız. Artı Yeşil düğmesini tıklayarak yeni bir satır ekleyin. Tek bir sütun yapısı seçin. WOO SABS modülünü ekleyin.
Woo sekmesi modülü üç sekmeden oluşur: açıklama, ek bilgi, inceleme. Bu sekmelerden birini devre dışı bırakmak istiyorsanız, seçeneğe devre dışı bırakmak istediğiniz sekmedeki sekmeyi silin, içerik bloğunun altındaki sekmeyi ekleyin. Woo sekmesi modül stilini ayarlamak için tasarım sekmesini açın. İçerik metninin ve sekme metninin tipografisini ayarlayabilirsiniz. WOO SABS modülünü bitirdikten sonra Woo ile ilgili ürünler modülünü ekleyin.
Yine, bu modülü ayarlamak için Tasarım sekmesini açabilirsiniz. Tüm öğeleri (bölümler, satırlar ve modüller) düzenlemeyi bitirdikten sonra, değişiklikleri kaydetmek için sağ alt köşedeki kaydet düğmesini tıklayın ve Divi Builder ön uç düzenleyicisinden çıkmak için sağ üst köşedeki X simgesini tıklayın. Tema Maker sayfasında, yeni yaptığınız tüm değişiklikleri uygulamak için Değiştir düğmesini tıklayın. Şimdi, yeni yaptığınız özel bir şablon uyguladığınız kategori altında bir ürün açmayı deneyin. E -posta abonelik formları, sosyal medya simgeleri, ödeme bilgileri vb. Gibi gerekli olduğunu düşündüğünüz diğer öğeleri ekleyebilirsiniz. Her öğeyi düzenlemek için düzenleme panelindeki tasarım sekmesinde oynamaktan çekinmeyin.
