Divi ile İşlevsel Sepete Ekle Düğmeleri ile Çarpıcı Ürün Bölümlerini Yeniden Oluşturun

E-Ticaret web sitenizdeki ürünlerin ortaya çıkması gerekiyor – bence bu hepimizin hemfikir olabileceği bir şey. Ne kadar çok dikkat çekerlerse ve ne kadar net olurlarsa, ziyaretçileri müşteriye dönüştürme şansınız o kadar artar. WordPress ile bir çevrimiçi mağaza oluştururken WooCommerce genellikle bariz bir seçimdir. Ancak bazen bir ürün sayfasıyla başlamak ve onu tam olarak aklınızdaki şeye dönüştürmek zordur.

O da pek gerekli değil. Divi ile her türlü ürün vitrini tasarlayabilir ve Divi tasarımınızın tam orada, işlevsel bir Sepete Ekle düğmesini ekleyebilirsiniz. Bu şekilde, web sitenizde istedikleri alışverişi yapmaları için ziyaretçilerinizi her ürün sayfasına yönlendirmeniz gerekmez. Bu öğreticide, kendiniz veya bir müşteri için oluşturduğunuz herhangi bir çevrimiçi mağazada kullanabileceğiniz, işlevsel Sepete Ekle düğmeleriyle çarpıcı ürün bölümlerinin nasıl oluşturulacağını göstereceğiz.

Hadi hadi bakalım!

Sonuç

Şimdi, öğreticiye dalmadan önce, bu eğitimde yeniden oluşturacağımız ürün bölümlerine ve farklı ekran boyutlarında nasıl göründüklerine hızlıca bir göz atalım.

Masaüstünde

Tablette

Telefonda

Divi için Sepete Ekle Düğmeleri ile Çarpıcı Ürün Bölümlerini Yeniden Oluşturun

Youtube Kanalımıza Abone Olun

Yaklaşmak

• Tüm bölüm tek bir ürüne ayrılmıştır
• Bir sayfada birden çok ürün oluşturmak için bir bölüm kopyalanabilir ve değiştirilebilir (bir sayfaya istediğiniz kadar ürün bölümü ekleyin)
• Her ürün bölümü için farklı sütun yapılarına sahip üç satır kullanıyoruz
• Tutarlı bir sonuç oluşturmak için satırlar arasındaki boşluğu kaldırıyoruz
• Her Sepete Ekle düğmesi, WooCommerce eklentinizdeki ürünle eşleşen benzersiz bir bağlantıya sahip olacaktır.
• Sepete Ekle düğmesine tıkladıktan sonra, ürün hemen ziyaretçinin sepetine eklenecektir (gerçek ürün sayfasına yönlendirilmeden)

Yeni Standart Bölüm Ekle

aralık

Mevcut bir sayfayı açın veya yeni bir sayfa oluşturun ve yeni bir standart bölüm ekleyin. Bölüm ayarlarını açın, Tasarım sekmesine gidin ve aşağıdaki kenar boşluğunu ve aralığı ekleyin:

• Üst, Sağ, Alt ve Sol Kenar Boşluğu: 50px
• Üst ve Alt Dolgu: 0px

Kenar boşluğunu ekliyoruz, böylece kutu gölgesi (bir sonraki adımda ekleyeceğiz) sayfada görünecek. Bölümün üstü ve altı ile bu öğreticide daha sonra eklenecek satırlar arasındaki tüm boşluğu kaldırmak için sıfır üst ve alt dolgu gereklidir.

Kutu Gölge

Sonraki Kutu Gölge alt kategorisini açın ve ilk seçeneği seçin. Kutu gölgesini ihtiyaçlarınıza göre değiştirebilirsiniz ancak bu örnek için varsayılan ayarları kullanıyoruz.

1. Satır Ekle

Satır Ayarları

Sütun Yapısı

Bölüm ayarlarıyla işiniz bittiğinde, devam edin ve aşağıdaki sütun yapısını kullanarak ilk satırı ekleyin:

Sütun 2 Arka Plan Rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ikinci sütunun arka plan rengi olarak '#ededed' ekleyin.

boyutlandırma

Tasarım sekmesine gidin, Boyutlandırma alt kategorisini açın ve aşağıdaki ayarları uygulayın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

Bu, satır ve bölüm arasındaki tüm sol ve sağ boşluğu kaldıracaktır.

aralık

Ayrıca satır, bölüm ve takip edilecek satırlar arasındaki üst ve alt boşluğu kaldırmamız gerekecek. Aralık alt kategorisini açın ve aşağıdaki ayarları uygulayın:

• Üst ve Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 50 piksel
• Sütun 2 Üst Dolgu: 50 piksel
• Sütun 2 Alt Dolgu: Yok (Masaüstü), 50 piksel (Tablet), 20 piksel (Telefon)

Sütun 1'e Görüntü Modülü Ekle

Görüntü Gereksinimleri

Sonraki adım, ilk sütuna bir Görüntü Modülü eklemektir. Saydam arka plan rengine veya satırınızın 1. sütun arka plan rengiyle aynı renge sahip bir ürün resmi kullandığınızdan emin olun.

Fotoğraf yükleniyor

Görüntü Modülünü ekledikten sonra ürün resmini yükleyin.

aralık

Tasarım sekmesine gidin, Aralık alt kategorisini açın ve aşağıdaki özel kenar boşluğunu uygulayın:

• Üst: %18 (Masaüstü), 0px (Tablet ve Telefon)
• Alt: -%10 (Masaüstü), 0px (Tablet ve Telefon)

Bu değerler, kullandığınız ürün resmine bağlıdır. Görüntünün takip edilecek tüm satırlar arasında ortalanmış olarak göründüğünden emin olmak için tüm satırları ekledikten sonra bu değerleri denemeniz gerekecek. Negatif alt kenar boşluğu, resminizin diğer satırlarla örtüşmesini sağlar.

Metin Modülü #1'i Sütun 2'ye ekleyin

Metin Ayarları

İlk sütunda ihtiyaç duyulan tek şey, bir önceki adımda eklediğimiz Görüntü Modülüdür. Artık ikinci sütuna farklı Metin Modüllerini eklemeye başlayabiliriz. Ürün adını içeren ilk Metin Modülünü ekleyin ve buna aşağıdaki metin ayarlarını uygulayın:

• Metin yazı tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 36px
• Metin Rengi: #e00b00

aralık

Metin Modülü için bir miktar sol ve üst boşluk oluşturmak için, Aralık alt kategorisine aşağıdaki ayarları uygulayın:

• Üst: 50 piksel
• Sol: %10

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

Metin Ayarları

Ürününüzün açıklamasını ikinci bir Metin Modülüne ekleyin ve metin ayarlarını tercihlerinize göre değiştirin. Örnekteki metin herhangi bir değişiklik içermemektedir.

boyutlandırma

Ancak, Boyutlandırma alt kategorisindeki Genişliği değiştireceğiz. '%100' yerine '%75' kullanın.

aralık

Bu Metin Modülü için ayrıca aşağıdaki ayarları kullanarak bir miktar sol ve üst boşluk yaratıyoruz:

• Üst Kenar Boşluğu: 50px
• Sol Dolgu: %10

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

Arka plan rengi

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 telefonda kullanıyoruz çünkü bunun için masaüstü ve tablette ayrı bir satır ve görünüm oluşturacağız. Oluşturacağımız masaüstü ve tablet sürümü mobil uyumlu değil, bu yüzden bunun yerine bu alternatifi kullanıyoruz. Yeni bir Metin Modülü ekleyerek başlayın ve arka plan rengi olarak '#e5e5e5' kullanın.

Metin Ayarları

Özellikler başlıklarını kalın yapmanın yanı sıra, bu Metin Modülünün varsayılan metin ayarlarını koruyoruz. Tabii ki, bunları ihtiyaçlarınıza göre değiştirmekten çekinmeyin.

aralık

Boşluk alt kategorisine gidip aşağıdaki kenar boşluğu ve dolguyu uygulayarak bu Metin Modülü için de biraz boşluk yaratmak istiyoruz:

• Üst ve Alt Kenar Boşluğu: 50px
• Ü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 telefonda görünmesini istiyoruz. Gelişmiş sekmesine gidin, Görünürlük alt kategorisini açın ve bu Metin Modülünü tablet ve masaüstünde devre dışı bırakın.

2. Satır Ekle

Satır Ayarları

Sütun Yapısı

Şimdi ilk satırı bitirdiğimize göre, devam edin ve hemen altına aşağıdaki sütun yapısını içeren ikinci bir satır ekleyin:

Sütun 3 Arka Plan Rengi

Bu satıra herhangi bir modül eklemeden önce, satır ayarlarını açın ve üçüncü sütun için arka plan rengi olarak '#e5e5e5' kullanın.

Sütun 4 Arka Plan Rengi

Biraz aşağı kaydırın ve 4. sütun için arka plan rengi olarak '#e0e0e0' kullanın.

boyutlandırma

Yine, Boyutlandırma alt kategorisine aşağıdaki ayarları uygulayarak satırın sol ve sağ tarafındaki (ve sütunlar arasındaki) tüm mesafeyi kaldırıyoruz:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Üst ve alt boşluğu da kaldıracağız ve Aralık alt kategorisindeki aşağıdaki ayarları kullanarak her sütuna biraz boşluk ekleyeceğiz:

• Üst ve Alt Dolgu: 0px
• Sütun 3 Üst ve Alt Dolgu: 20 piksel
• Sütun 4 Üst ve Alt Dolgu: 20px

görünürlük

Bu satır, ürününüzün özelliklerini içerecektir. Önceki satırda mobil uyumlu bir alternatif oluşturduğumuzdan, Gelişmiş sekmesinin Görünürlük alt kategorisinde telefon için bu satırın tamamını devre dışı bırakacağız.

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

Metin Ayarları

Spesifikasyon başlıklarını içeren bu satırın üçüncü sütununa ilk Metin Modülünü ekleyin. Ardından Tasarım sekmesine gidin ve Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf

aralık

Aşağıdaki özel dolgu değerlerini kullanarak bu Metin Modülü için biraz ek alan oluşturmamız gerekiyor:

• Üst: 25 piksel
• Alt: 25 piksel
• Sol: %20

Metin Modülü #2'yi Sütun 4'e ekleyin

Metin Ayarları

4. sütundaki Metin Modülü, varsayılan metin ayarları kullanılarak yapılır. Yine, bu metin ayarlarını ihtiyaçlarınıza göre değiştirmekten çekinmeyin.

aralık

Üçüncü sütundaki Metin Modülü için olduğu gibi bu Metin Modülü için alan yaratacağız:

• Üst Dolgu: 25px
• Alt Dolgu: 25px
• Sol Dolgu: %20

3. Satır Ekle

Satır Ayarları

Sütun Yapısı

Bu bölümlerin son satırı, fiyatı ve harekete geçirici mesajı içerir. Bu satırı oluşturmak için aşağıdaki sütun yapısını kullanacağız:

Sütun 3 Arka Plan Rengi

Henüz bu satıra herhangi bir modül eklemeden satır ayarlarını açın ve üçüncü sütun arka plan rengi olarak '#e00b00' kullanın.

Sütun 4 Arka Plan Rengi

Benzer şekilde, 4. sütun için arka plan rengi olarak '#b5b5b5' kullanın.

boyutlandırma

Aşağıdaki Boyutlandırma ayarlarını uygulayarak bu satır, sütunlar ve bölümün sol ve sağ tarafı arasındaki boşluğu kaldıracağız:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Aynı şekilde, bu satır, önceki satır ve bölümün alt kısmı arasındaki boşluğu kaldıracağız. Ayrıca sütun 3 (CTA'yı içeren) ve sütun 4 (fiyatı içeren) için bazı ek dolgular oluşturacağız:

• Üst ve Alt Dolgu: 0px
• Sütun 3 Üst ve Alt Dolgu: 20 piksel
• Sütun 4 Üst ve Alt Dolgu: 20px

Sütun 3'e Düğme Modülü Ekle

Düğme Bağlantısı

Artık satır ayarları yapıldıktan sonra modülleri sütunlarımıza eklemeye başlayabiliriz. Üçüncü sütuna bir Düğme Modülü ekleyerek başlayın. Bu Düğme Modülü, ziyaretçilerin ürün sayfasına gitmek zorunda kalmadan hemen sepetlerine ürün eklemesine olanak tanır. Düğme URL seçeneğine aşağıdaki bağlantıyı ekleyin:

• www.yourwebsite.com?add-to-cart=ÜRÜNKimliği

Açıkçası, bunun için kendi web sitelerinin URL'sini kullanmanız gerekecek.

Ve URL'nin sonundaki 'ÜRÜN Kimliği'ni doğru ürün kimliğiyle değiştirin. WordPress Kontrol Panelinizde > Ürünler > Tüm Ürünler > Doğru ürünün üzerine geldiğinizde bir ürün kimliği bulabilirsiniz ; kimlik numarasının göründüğünü göreceksiniz.

Düğme Hizalama

Bunu yaptıktan sonra, Düğme Modülünün Tasarım sekmesini açabilir ve orta Düğme Hizalamasını etkinleştirebilirsiniz.

Düğme Ayarları

Düğme alt kategorisini açarak devam edin ve aşağıdaki ayarları ona uygulayın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #FFFFFF
• Düğme Kenar Genişliği: 0px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf
• Düğme Simgesini Göster: Evet
• Düğme Simgesi: Sepet Simgesini Seçin
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

Sütun 4'e Metin Modülü Ekle

Metin Ayarları

Son olarak, satırın dördüncü sütununa fiyat Metin Modülü'nü ekleyin ve fiyatı ekledikten sonra aşağıdaki metin ayarlarını uygulayın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Boyutu: 45px
• Metin Rengi: #FFFFFF
• Metin Yönü: Merkez

aralık

Düğme Modülü ile aynı yükseklikte olduğundan emin olmak için Düğme Modülüne de '10 piksel'lik bir üst kenar boşluğu eklememiz gerekecek.

Ürün Sayısına Göre Klonlama Bölümü

Resimleri Değiştir

Klonladığınız her bölüm için ürün resmini değiştirmeniz gerekir.

ImageÜst ve Alt Dolguyu Görüntüye Göre Ayarlayın

Resminizin boyutlarına bağlı olarak, üst ve alt kenar boşluğunu da değiştirmeniz gerekecektir. Bu değerler tamamen imajınıza bağlıdır. Ürün görselinin tüm satırlar arasında ortalandığını görene kadar değerlerle oynamanız gerekecek.

Sepete Ekle Bağlantısını Değiştir

Ve elbette, temsil ettiği ürüne göre her Düğme Modülünün bağlantısını da değiştirmeniz gerekecektir. Bu kadar!

Sonuç

Bu blog gönderisinde farklı ekran boyutlarında yeniden oluşturduğumuz sonuca son bir göz atalım.

Masaüstünde

Tablette

Telefonda

Son düşünceler

Bu öğreticide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak, işlevsel Sepete Ekle düğmeleriyle ürün bölümlerinin nasıl oluşturulacağını gösterdik. Yalnızca bu yöntemi kullanarak WooCommerce ürün sayfalarına odaklanmak zorunda kalmadan istediğiniz tasarımı oluşturabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!