Divi ile işlev gören arabaya ekleme düğmesi ile inanılmaz bir ürün bölümü yeniden oluşturun
E-ticaret web sitenizdeki ürünlerin görünmesi gerekiyor-sanırım hepimizin üzerinde anlaştığımız bir şey. Ne kadar çok dikkat çekerler ve dikkatleri ne kadar net olursa, ziyaretçileri müşterilere dönüştürme şansınız o kadar artar. WordPress ile çevrimiçi bir mağaza oluşturduğunuzda WooCommerce genellikle net bir seçimdir. Ancak bazen, ürün sayfasıyla başlamak ve tam olarak düşündüğünüz gibi değiştirmek zordur. Bu da çok gerekli değil. Divi ile, her türlü ürün penceresini tasarlayabilir ve Divi tasarımınızda işleyen sepete ekle düğmesini ekleyebilirsiniz. Bu şekilde, web sitenizde alışveriş yapabilmeleri için ziyaretçileri her ürün sayfasına yönlendirmenize gerek yoktur. Bu öğreticide, kendiniz veya müşteri için yaptığınız herhangi bir çevrimiçi mağazada kullanabileceğiniz işleyen bir sepete ekleme düğmesi ile nasıl şaşırtıcı bir ürün parçası oluşturacağınızı göstereceğiz.
Haydi Yapalım şunu! Sonuçlar Şimdi, öğreticiye girmeden önce, bu öğreticide tekrar yapacağımız ürün kısmına ve farklı ekran boyutlarında neye benzeyeceğini inceleyelim. Masaüstünde
Tüm parçalar bir ürüne adanmıştır
Bir sayfada birkaç ürün yapmak için bir parça klonlanabilir ve değiştirilebilir (ürünün birçok kısmını istediğiniz sayfaya ekleyin)
Ürünün her bir kısmı için, farklı bir sütun yapısına sahip üç sıra kullanıyoruz
Bir Koherenship Sonuçları Yapmak İçin Satırlar Arasındaki Alanı Sileriz Sepete Ekle Düğmesi, Woocommerce eklentinizdeki ürünle eşleşen benzersiz bir bağlantıya sahip olacaktır.
Sepet ekle düğmesine tıkladıktan sonra, öğe hemen ziyaretçi sepetine eklenir (gerçek ürün sayfasına yönlendirilmeden)
Mevcut sayfayı açmanın yeni bir standart kısmını ekleyin veya yeni bir sayfa oluşturun ve yeni bir standart bölüm ekleyin. Bölüm ayarlarını açın, tasarım sekmesini açın ve aşağıdaki marj ve boşlukları ekleyin:
Üst, sağ, alt ve sol kenar boşluğu: 50 piksel
Üst ve Alt Dolgu: 0px
Marjın (bir sonraki adımda ekleyeceğimiz) kutunun gölgesinin sayfada görünmesi için ek ekledik. Bu öğreticiye daha sonra eklenecek olan parçanın üst ve alt kısmı ile satır arasındaki tüm boşlukları çıkarmak için üst ve alt sıfır dolgu gereklidir.
Box Shadow Gölge Alt Kategori Kutusu’nun Gölgesi Sırada ve ilk seçeneği seçin. Kutunun gölgesini ihtiyaçlarınıza göre değiştirebilirsiniz, ancak bu örnek için varsayılan ayarları kullanırız. Sütun Yapısı Satırının 1 numaralı ayarlarını ekleyin Ayarlarla bitirdikten sonra, devam edin ve aşağıdaki sütun yapısını kullanarak ilk satırı ekleyin: Sütun Renk Sütunu 2 Modül eklemeden, satır ayarlarını açın ve ikinci sütunun arka plan rengi olarak ‘#ededed’ ekleyin. Yapıştırıcılar Tasarım sekmesine geçer, boyut alt kategorisini açın ve aşağıdaki ayarları uygulayın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Bu, çizgiler ve parçalar arasındaki sol ve sağ alanları silecektir.
Mesafemizin, takip edilecek sıralar, parçalar ve satırlar arasındaki üst ve alt alanı silmesi gerekir. Alan alt kategorisini açın ve aşağıdaki ayarları uygulayın: Üst ve Alt Dolgu: 0px Sütun 1 Dolgu Üst: 50px
Üst Dolgu 2 Dolgu: 50 piksel
Sütun 2 Aşağıdaki Dolgu: Hayır (masaüstü), 50px (tablet), 20px (cep telefonu)
Görüntü modülünü Sütun 1’e ekleyin Görüntü gereksinimleri Bir sonraki adım görüntü modülünü ilk sütuna eklemektir. Şeffaf bir arka plana sahip bir ürün görüntüsü veya 1 satır sütununuzun arka plan rengi ile aynı renk kullandığınızdan emin olun. Resimleri Yükle Görüntü modülünü ekledikten sonra ürün resimleri yükleyin.
Mesafe Tasarım sekmesine geçin, boşluk alt kategorisini açın ve aşağıdaki özel marjı uygulayın: Yukarıda:% 18 (masaüstü), 0px (tablet ve cep telefonu) Aşağıda:% -10 (masaüstü), 0px (tablet ve cep telefonu)
Bu değer, kullandığınız ürün görüntüsüne bağlıdır. Görüntünün izlenecek tüm çizgiler arasında ortada görünmesini sağlamak için tüm satırları ekledikten sonra bu değerleri denemelisiniz. Negatif alt marj, görüntülerinizin diğer satırlarla örtüşmesini sağlar.
Sütun 2’ye #1 metin modülünü ekleyin Birinci sütunda tek metin ayarlarına ihtiyaç duyulur önceki adımda eklediğimiz görüntü modülüdür. Şimdi ikinci sütuna farklı bir metin modülü eklemeye başlayabiliriz. Ürün adını içeren ilk metin modülünü ekleyin ve aşağıdaki metin ayarlarını uygulayın:
Ağır metin yazı tipi: ultra kalın Metin yazı tipi stili: büyük harf
Metin Boyutu: 36px
Metin Rengi: #E00B00
Mesafe Metin modülü için birkaç sol ve üst boşluk yapmak için aşağıdaki ayarları Alan Alt Kategorisine uygulayın:
Yukarıda: 50 piksel Sol:% 10
Metin Modülü #2 Ekle Sütun 2 Metin Ayarları İkinci metin modülüne ürün açıklamanızı ekleyin ve metin ayarlarını tercihlerinize göre değiştirin. Örnekteki metin herhangi bir değişiklik içermez. Faiz, ancak boyut alt kategorisindeki genişliği değiştireceğiz. ‘%100′ yerine ’75’ kullanın.
Bu metin modülü için mesafe, aşağıdaki ayarları kullanarak sol ve üst alanlar da yapıyoruz: Üst kenar boşluğu: 50 piksel
Sol dolgu:% 10 #3 metin modülünü Sütun 2 Arka Plan Rengi Ekleyin Bu sütundaki son metin modülü, ürününüzün ziyaretçileriniz/müşterilerinizle paylaşmak istediğiniz belirli özelliklerini içerir. Bu metin modülünü yalnızca cep telefonunda kullanıyoruz çünkü masaüstü ve tablette onun için ayrı bir satır ve görüntüleme yapacağız. Yapacağımız masaüstü sürümü ve tablet mobil dostu değil, bu nedenle bu alternatifi kullanıyoruz. Yeni bir metin modülü ekleyerek başlayın ve arka plan rengi olarak ‘#e5e5e5’ kullanın.
Metin Ayarları Spesifikasyon başlıkını kalın hale getirmenin yanı sıra, bu metin modülünün varsayılan metin ayarlarını koruruz. Tabii ki, ihtiyaçlarınıza göre değiştirmekten çekinmeyin. Bu metin modülü için bazı odalar yapmak istediğimiz mesafe, aralık alt kategorisine girerek ve aşağıdaki kenar boşluğunu ve dolguyu uygulayarak:
Üst ve Alt Marj: 50 piksel Üst ve Alt Dolgu: 20px Sol dolgu:% 10
Görünürlük Daha önce de belirtildiği gibi, bu metin modülünün yalnızca mobil cihazlarda görünmesini istiyoruz. Devam sekmesini açın, görünürlük alt kategorisini açın ve bu metin modülünü tabletlerde ve masaüstlerinde devre dışı bırakın.
Sütun Yapısı Çizgilerinin Satır #2 Ayarlarını Ekleyin Şimdi ilk satırı tamamladık, devam ettik ve aşağıdaki ikinci satırı ekleyin, aşağıdaki sütun yapısını içeren: Sütun Rengi Rengi 3 Bu satıra herhangi bir modül eklemeden önce satır ayarlarını açın ve satır ayarlarını açtık ve satır ayarlarını açtık Üçüncü sütun için arka plan rengi olarak ‘ #e5e5e5’ kullanın.
Arka Plan Rengi Sütunu 4 Biraz aşağı kaydırın ve sütun 4 için arka plan rengi olarak ‘#E0E0E0’ kullanın. Bir kez daha, boyut alt kategorisine aşağıdaki ayarları uygulayarak satırın sol ve sağ taraflarındaki (ve sütunlar arasında) tüm mesafeleri siliyoruz: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Yüksek sütunu eşitleyin: evetMesafemiz üst ve alt alanı da siler ve uzay alt kategorisindeki aşağıdaki ayarları kullanarak her sütun için biraz yer ekleyeceğiz:
Üst ve Alt Dolgu: 0px
Sütun 3 Yukarı ve Alt: 20 piksel
Sütun 4 Çaplama Yukarı ve Alt: 20px Bu satır görünürlüğü, ürününüzün özelliklerini içerecektir. Önceki satırda hücresel dostu alternatifler yaptığımız için, gelişmiş sekmenin görünürlük alt kategorisindeki cep telefonları için tüm bu çizgileri devre dışı bırakacağız.
Sütun 3’e Metin Modülü #1 ekleyin Metin Ayarları İlk metin modülünü, bu satırın üçüncü sütununa, spesifikasyonların başlığını içeren üçüncü sütununa ekleyin. Ardından, Tasarım sekmesini açın ve aşağıdaki ayarları metin alt kategorisine uygulayın:
Metin yazı tipi ağırlığı: çok kalın
Metin yazı tipi stili: büyük harf Aşağıdaki özel dolgu değerlerini kullanarak bu metin modülü için biraz ek alan yapmamız gereken mesafe: Yukarıda: 25px
Aşağıda: 25px
Sol:% 20 Sütun 4’e Metin Modülü #2 ekle Metin Ayarları Sütun 4’teki metin modülü varsayılan metin ayarları kullanılarak yapılır. Yine, bu metin ayarını ihtiyaçlarınıza göre değiştirmekten çekinmeyin. Mesafemiz, üçüncü sütundaki metin modülü için yapıldığı gibi bu metin modülü için odayı yapacak: 25 piksel
Dolgu Alt: 25px
Sol dolgu:% 20
3 numaralı satır ekleyin Bu bölüm için son yapı yapı ayarları, harekete geçecek fiyatlar ve davetiyeler içerir. Bu satırı yapmak için aşağıdaki sütun yapısını kullanacağız: Sütun Rengi Sütun 3 Bu satıra herhangi bir modül eklemeden, satır ayarlarını açın ve üçüncü sütunun arka plan rengi olarak ‘#e00b00’ kullanın.
Arka Plan Rengi Sütunu 4 Benzer şekilde, sütun 4 için arka plan rengi olarak ‘#B5B5B5’i kullanın.
Yapıştırıcımız, aşağıdaki boyut ayarlarını uygulayarak bu satır, sütun ve sol ve sağ taraflar arasındaki alanı silecektir:
Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1 Yüksek sütunu eşitleyin: evet Aynı şekilde, bu çizgi, önceki sıra ve parçanın tabanı arasındaki boşluğu ortadan kaldıracağız. Ayrıca sütun 3 (CTA içeren) ve sütun 4 (fiyatları içeren) için ek dolgular da yapacağız:
Üst ve Alt Dolgu: 0px
Sütun 3 Yukarı ve Alt: 20 piksel
Sütun 4 Çaplama Yukarı ve Alt: 20px
Düğme modülünü Sütun 3 düğmesi bağlantılarına ekleyin Sıra ayarları tamamlandıktan sonra modülü sütunumuza eklemeye başlayabiliriz. Üçüncü sütuna düğme modülünü ekleyerek başlayın. Bu düğme modülü, ziyaretçilerin ürün sayfasına gitmek zorunda kalmadan ürünleri hemen sepetlerine eklemelerine izin verecektir. URL seçeneği düğmesine aşağıdaki bağlantıyı ekleyin: www.situswanda.com? Açıkçası, bunun için kendi web sitesi URL’nizi kullanmalısınız.
Ve URL’nin sonunda doğru ürün kimliğiyle ‘üründit’i değiştirin. WordPress Dashboard> Ürünler> Tüm Ürünler> Doğru Ürünü Yönlendirin ve Kimlik Numarasının göründüğünü göreceksiniz.
Düğmenin hizalanması Tamamlandıktan sonra, Modül düğmesinin Tasarım sekmesini açabilir ve Merkez düğmesi hizalamasını etkinleştirebilirsiniz.
Düğme alt kategorisini açarak düğme ayarlarına devam edin ve aşağıdaki ayarları uygulayın: Düğmeler için özel bir stil kullanın: evet
Metin Renk Düğmesi: #fffffff
Düğmenin sınır genişliği: 0px Mektup Ağırlığı: Çok kalın Yazı tipi stili: büyük harf Düğme simgesini görüntüleyin: Evet
Kest simgesi: Sepet simgesini seçin
Zorlu simgenin yerleşimi: sol
Yalnızca görüntü simgeleri düğmeye yönlendirilir: hayır
Metin modülünü son metin ayarlarının 4. sütuna ekleyin, Fiyat metni modülünü dördüncü satır sütununa ekleyin ve fiyatı ekledikten sonra aşağıdaki metin ayarlarını uygulayın:
Metin yazı tipi ağırlığı: çok kalın
Metin Boyutu: 45px
Metin rengi: #ffffff
Metin Oryantasyonu: Orta
Yüksekliğin düğme modülüyle aynı olduğundan emin olmak için mesafemizin, düğme modülüne de bir üst marj ’10px’ eklemesi gerekir. Klon bölümü Ürün sayısına göre, klonladığınız her bir parça için görüntüyü değiştirir, ürün görüntüsünü değiştirmelisiniz. Görüntüye göre Imagetop ve Alt Dolguyu ayarlayın, görüntünüzün boyutlarına bağlıdır, ayrıca üst değiştirmeniz gerekir. ve daha düşük marjlar. Bu değerler tamamen görüntünüze bağlıdır. Tüm satırlar arasında ortada ürün görüntüsünü görene kadar değerle oynamanız gerekir.
Bağlantı sepetini değiştirin ve elbette, her bir düğme modülünün bağlantısını temsil ettiği ürüne göre değiştirmeniz gerekir. İşte burada!
Sonuçlar Bu blog yayınında farklı ekran boyutlarında yeniden oluşturduğumuz nihai sonuçları görelim. Masaüstünde
Tablette
Telefonda Bu öğreticideki son zihin, yalnızca varsayılan Divi seçeneğini kullanarak işlev gören sepete bir düğme eklenmesi ile bir ürün parçası nasıl oluşturulacağını gösterdik. Yalnızca bu yöntemi kullanarak WooCommerce ürün sayfasına odaklanmadan istediğiniz herhangi bir tasarımı yapabilirsiniz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
