Temiz bir ürün sayfası oluşturulur ve amp;WooCommerce Divi modülü ile kalın (ücretsiz indir!)
Kalın ürün sayfaları, ziyaretçilerinizin dikkatini çekmek için özel bir yola sahiptir. Ve yeni Divi WooCommerce modülünün güncellenmesi ile eski ürün sayfalarınızı hızlı bir şekilde sizin ve ziyaretçileriniz tarafından sevilecek temiz ve cesur bir sayfaya dönüştürebilirsiniz. Bugünün öğreticisinde, başlangıçtan itibaren kalın bir ürün sayfası oluşturacağız ve JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Bu öğretici, yeni bir çok yönlü Divi’nin yeni WooCommerce modülünün nasıl olduğunu ve kısa sürede çok profesyonel bir e -ticaret web sitesi oluşturabileceğinizi gösteriyor. Haydi Yapalım şunu!
Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun
1. Woocommerce Ürünleri Ekle/Open Mevcut ürünleri açın veya yenilerini açın. Bu yayının önizlemesinde gösterilenle aynı sonuçları elde etmek istiyorsanız, aşağıdaki ürün ayrıntılarını eklediğinizden emin olun:
Başlık
Kısa açıklama
Uzun Açıklama
Kategori
Üstün görüntü
Fiyat
Divi Builder’ı etkinleştirin ve ürün ayrıntılarını tamamladıktan, Divi’yi etkinleştirdikten ve sayfanın düzenini ‘tam geniş’ olarak değiştirdikten sonra ürün sayfaları ayarlarını değiştirin. Visual Builder’a dönerek görsel oluşturucuya geçerek devam edin. Orijinal ürün bölümünü silin Sayfadaki orijinal ürün sayfasındaki bilgileri bir bölüme bir araya getirin. Temiz ve cesur tasarımımızı baştan yeniden yaratacağız, bu yüzden lütfen bu bölümü silin. 2. Divi’nin Visual Builder’ı kullanarak temiz ve kalın bir ürün sayfası oluşturun Normal Bölüm #1 mesafe süresi Cesur Ürün sayfamızı yapmaya başlar! Yeni bir düzenli bölüm ekleyin ve bölüm alanı ayarlarını değiştirin. Üst dolgu: 200px
Aşağıda dolgu: 0px
Hiçbir şeyin parçanın kabını aşmamasını sağlamak için taşmak ve sayfada meydana gelen yatay rulo yok, görünürlük düzenlemesinin avantajlarını gizleyin. Yatay yangınlar: gizli Dikey taşma: gizli
Sütun yapısı sıraları ekleyin Aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyerek devam edin:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve satırın arka plan rengini değiştirin. Arka plan rengi: #f4f4f4 Yapıştırıcı değiştirme ayrıca satırın maksimum genişliği.
Maksimum genişlik: 1000 piksel Mesafe Ardından, mesafe ayarlarını açın ve bazı özel üst ve alt yatak ekleyin.
Üst dolgu: 150px Dolgu Alt: 150 piksel
Sınırımız, satırın sol ve sağ köşesine ’50px’ sınır yarıçapını da ekler.
Taşma, taşmayı görünür hale getirerek satır ayarlarını tamamlayın. Yatay taşma: görünür Dikey taşma: görünür
Woo Breadcrumb modülünü dinamik içerik sütununa ekleyin, modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül Woo Bread Crumb modülü.
Ürün: Bu ürün Metin Ayarları Modül Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: kırmızı metin Metin yazı tipi ağırlığı: kalınlık
Metin yazı tipi stili: büyük harf
Metin Boyutu: 20 piksel
Metin mektubu alanı: 4px
Bağlantı Metin ayarları, bağlantının metin ayarlarında da bazı değişiklikler yapar.
Bağlantıların Ağırlığı: Işık Bağlantı metninin rengi: #e02b20
Mesafe, o zaman, alan ayarlarını açık ve çeşitli ekran boyutlarında bazı özel marj değerleri ekleyin.
Alt kenar boşluğu: 80 piksel Sol kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
Sağ kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
Woo başlık modülünü bir sonraki dinamik içerik sütununa ekleyin ve son olarak bu sütunda ihtiyacımız olan başlık modülü woo.products: Bu ürün
Başlık Metin Ayarları Modül Başlık Metin Ayarlarını Aşağıdaki gibi Değiştirin: Yazı tipi başlığı: Montserrat
Ağır yazı tipi başlığı: Ağırlık Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000
Boyut Metin Başlığı: 250px (masaüstü), 150 piksel (tablet), 80px (telefon)
Hat yüksekliği başlığı: 0.9em
Mesafe, sol ve sağ kenar boşlukları negatif ekleyerek modülün genişliğini arttırır.
Sol kenar boşluğu: -150px (masaüstü), -100px (tablet), -50px (telefon)
Sağ kenar boşluğu: -150px (masaüstü), -100 piksel (tablet), -50px (telefon) Normal Bölüm #2 mesafesini ekleyin Bir öncekinin hemen altına başka parçaları ekleyin. Aşağıdakilerin dolgu değerini değiştirin:
Üst dolgu: 0px
Dolgu Alt: 200px Sütun yapısı sıraları ekleyin Aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyerek devam edin:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve satırın arka plan rengini değiştirin.
Arka plan rengi: #f4f4f4 Yapıştırıcı bir sonraki satırın maksimum genişliğini arttırır. Maksimum genişlik: 1000 piksel
Daha sonra sınır ayarına girin ve ’50px’ sınır yarıçapını altın sol ve sağ köşesine uygulayın. Taşma Taşmanın görünür olduğundan emin olarak satır ayarlarını tamamlayın.
Yatay taşma: görünür Dikey taşma: görünür Dinamik Arka Plan Sütun 1 Ayarları Genel satır ayarlarını tamamladıktan, sütun 1 ayarlarını açtıktan ve dinamik içerik kullanarak ürünün üstün görüntüsünü arka plana ekleyin.
Arka plan görüntüsü: üstün görüntü
Jarak Tambahkan beberapa padding bawah ke kolom berikutnya. Ini akan memungkinkan gambar latar belakang untuk ditampilkan.Padding Bawah: 370px (Desktop), 690px (Tablet), 380px (Ponsel) Tambahkan Modul Teks ke Kolom 1 Tambah isi Saatnya mulai menambahkan modul! Di kolom 1, satu-satunya modul yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten pilihan Anda.
Warna latar belakang Ubah warna latar belakang modul selanjutnya. Warna Latar Belakang: #E02B20
Pengaturan Teks Pindah ke tab desain dan ubah pengaturan teks. Metin yazı tipi: Montserrat Berat Font Teks: Sangat Tebal
Hizalama Metni: Orta Warna Teks: #FFFFFF
Ukuran Teks: 30px
Tinggi Baris Teks: 1em
Perekat Kecilkan ukuran modul di pengaturan ukuran berikutnya.
Lebar: 280 piksel
Jarak Dan ubah modul menjadi persegi dengan menambahkan beberapa nilai padding khusus. Kami juga membuat tumpang tindih atas dan kiri menggunakan margin negatif.
Margin Atas: -120px Margin Kiri: -120px
Padding Atas: 110px Padding Bawah: 110px
Padding Kiri: 50px
Padding Kanan: 50px
Berbatasan Untuk mengubah persegi menjadi lingkaran, kita akan menambahkan radius batas ‘500px’ ke setiap sudut modul.
Ubah Putar Kami akan memutar modul juga.
Kiri: 330 derajat
Tambahkan Modul Teks ke Kolom 2 Tambahkan Konten H2 Ke kolom kedua! Di sana, modul pertama yang kita butuhkan adalah Modul Teks biasa. Masukkan beberapa konten H2 pilihan Anda. Pengaturan Teks H2 Pindah ke tab desain dan ubah pengaturan teks H2 sebagai berikut: Judul 2 Font: Montserrat
Judul 2 Ukuran Teks: 35px Jarak Tambahkan beberapa nilai margin kustom berikutnya. Margin Atas: -70px (Desktop), 100px (Tablet & Ponsel)
Margin Kiri: 100px (Desktop), 20px (Tablet & Ponsel)
Sağ kenar boşluğu: 20px (Tablet ve Cep Telefonu) Woo Açıklama Modülünü Sütun 2’ye ekleyin Dinamik İçerik Sütun 2’de ihtiyacımız olan ikinci modül Woo Açıklama modülüdür. Ürün: Bu ürün
Açıklama Türü: Kısa Açıklama
Metin Ayarları Uygun modül metin ayarlarını değiştirin:
Metin yazı tipi: kırmızı metin Metin Boyutu: 19px
Yüksek çizgi metin: 1.8em
Hizalama metni: haklı çıkar Mesafe Bir sonraki modül boşluk değerini değiştirin.
Alt kenar boşluğu: 50 piksel
Sol kenar boşluğu: 100px (masaüstü), 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: -100 piksel (masaüstü), 20px (tablet ve cep telefonu)
Woo Fiyat modülünü Sütun 2 dinamik içeriğine bir sonraki modüle olan Woo Fiyat modülüne ekleyin. Ürün: Bu ürün
Fiyat metni ayarları Fiyat metni ayarlarını aşağıdaki gibi değiştirin:
Fiyat yazı tipi: Montserrat
Ağır yazı tipi fiyatı: ağır Renk Metin Fiyatı: #000000
Fiyat metni boyutu: 50 piksel Bir sonraki alan ayarlarını değiştirmek için mesafe.
Alt kenar boşluğu: 50 piksel
Sol kenar boşluğu: 100px (masaüstü), 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: 20 piksel (tablet ve cep telefonu)
Woo ekle modül sepetine bir sonraki sütun 2 dinamik içeriğine ekleyin ve son olarak bu tasarımı tamamlamamız gerekiyor Woo Cart modülüne ekleyin. Ürün: Bu ürün
Metin Ayarları Metin ayarlarında metin yazı tipini değiştirin.
Metin yazı tipi: Montserrat
Ayarlar Alanı sonraki alan ayarlarını değiştirir. Alan arka plan rengi: #ffffff
Alan metni rengi: #000000 Üst dolgu: 66px
Dolgu Alt: 66px Yazı tipi yazı tipi: Montserrat
Yazı tipi Yazı Tipleri Yazı Tipi: Ağırlık
Tüm açılar: 5px
Alt alan sınırı: 3px
Field Boundar Rengi: #E02B20
Düğmeyi ayarlayarak düğmeyi ayarlayın.
Düğmeler için özel bir stil kullanın: evet Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #E02B20
Düğmenin sınır genişliği: 0px Sınır Sınır yarıçapı: 5pxfont düğmesi: Montserrat
Mektup Ağırlığı Düğmesi: Çok kalın
Yazı tipi stili düğmesi: büyük harf
Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel Sol dolgu: 100px (masaüstü), 50px (tablet), 20px (cep telefonu)
Sağ dolgu: 100 piksel (masaüstü), 50px (tablet), 20px (cep telefonu)
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3) Daha küçük ekran boyutlarına bazı sol ve sağ marj değerleri ekleyerek mesafe tam modül tasarımı ve tamamlayın!
Sol kenar boşluğu: 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: 20 piksel (tablet ve cep telefonu)
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.
Bu yazıdaki son zihin, size temiz bir görünümle nasıl inanılmaz bir cesur ürün sayfası oluşturacağınızı ve yeni Divi WooCommerce modülünü kullanarak nasıl hissedeceğinizi gösterdik. Kalın ürün sayfaları, ürününüzü vurgulamak için benzersiz bir yola sahiptir. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
YouTube kanalımıza abone olun
1. Woocommerce Ürünleri Ekle/Open Mevcut ürünleri açın veya yenilerini açın. Bu yayının önizlemesinde gösterilenle aynı sonuçları elde etmek istiyorsanız, aşağıdaki ürün ayrıntılarını eklediğinizden emin olun:
Başlık
Kısa açıklama
Uzun Açıklama
Kategori
Üstün görüntü
Fiyat
Divi Builder’ı etkinleştirin ve ürün ayrıntılarını tamamladıktan, Divi’yi etkinleştirdikten ve sayfanın düzenini ‘tam geniş’ olarak değiştirdikten sonra ürün sayfaları ayarlarını değiştirin. Visual Builder’a dönerek görsel oluşturucuya geçerek devam edin. Orijinal ürün bölümünü silin Sayfadaki orijinal ürün sayfasındaki bilgileri bir bölüme bir araya getirin. Temiz ve cesur tasarımımızı baştan yeniden yaratacağız, bu yüzden lütfen bu bölümü silin. 2. Divi’nin Visual Builder’ı kullanarak temiz ve kalın bir ürün sayfası oluşturun Normal Bölüm #1 mesafe süresi Cesur Ürün sayfamızı yapmaya başlar! Yeni bir düzenli bölüm ekleyin ve bölüm alanı ayarlarını değiştirin. Üst dolgu: 200px
Aşağıda dolgu: 0px
Hiçbir şeyin parçanın kabını aşmamasını sağlamak için taşmak ve sayfada meydana gelen yatay rulo yok, görünürlük düzenlemesinin avantajlarını gizleyin. Yatay yangınlar: gizli Dikey taşma: gizli
Sütun yapısı sıraları ekleyin Aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyerek devam edin:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve satırın arka plan rengini değiştirin. Arka plan rengi: #f4f4f4 Yapıştırıcı değiştirme ayrıca satırın maksimum genişliği.
Maksimum genişlik: 1000 piksel Mesafe Ardından, mesafe ayarlarını açın ve bazı özel üst ve alt yatak ekleyin.
Üst dolgu: 150px Dolgu Alt: 150 piksel
Sınırımız, satırın sol ve sağ köşesine ’50px’ sınır yarıçapını da ekler.
Taşma, taşmayı görünür hale getirerek satır ayarlarını tamamlayın. Yatay taşma: görünür Dikey taşma: görünür
Woo Breadcrumb modülünü dinamik içerik sütununa ekleyin, modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül Woo Bread Crumb modülü.
Ürün: Bu ürün Metin Ayarları Modül Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: kırmızı metin Metin yazı tipi ağırlığı: kalınlık
Metin yazı tipi stili: büyük harf
Metin Boyutu: 20 piksel
Metin mektubu alanı: 4px
Bağlantı Metin ayarları, bağlantının metin ayarlarında da bazı değişiklikler yapar.
Bağlantıların Ağırlığı: Işık Bağlantı metninin rengi: #e02b20
Mesafe, o zaman, alan ayarlarını açık ve çeşitli ekran boyutlarında bazı özel marj değerleri ekleyin.
Alt kenar boşluğu: 80 piksel Sol kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
Sağ kenar boşluğu: 50 piksel (masaüstü ve tablet), 20px (telefon)
Woo başlık modülünü bir sonraki dinamik içerik sütununa ekleyin ve son olarak bu sütunda ihtiyacımız olan başlık modülü woo.products: Bu ürün
Başlık Metin Ayarları Modül Başlık Metin Ayarlarını Aşağıdaki gibi Değiştirin: Yazı tipi başlığı: Montserrat
Ağır yazı tipi başlığı: Ağırlık Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000
Boyut Metin Başlığı: 250px (masaüstü), 150 piksel (tablet), 80px (telefon)
Hat yüksekliği başlığı: 0.9em
Mesafe, sol ve sağ kenar boşlukları negatif ekleyerek modülün genişliğini arttırır.
Sol kenar boşluğu: -150px (masaüstü), -100px (tablet), -50px (telefon)
Sağ kenar boşluğu: -150px (masaüstü), -100 piksel (tablet), -50px (telefon) Normal Bölüm #2 mesafesini ekleyin Bir öncekinin hemen altına başka parçaları ekleyin. Aşağıdakilerin dolgu değerini değiştirin:
Üst dolgu: 0px
Dolgu Alt: 200px Sütun yapısı sıraları ekleyin Aşağıdaki sütun yapısını kullanarak yeni satırlar ekleyerek devam edin:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve satırın arka plan rengini değiştirin.
Arka plan rengi: #f4f4f4 Yapıştırıcı bir sonraki satırın maksimum genişliğini arttırır. Maksimum genişlik: 1000 piksel
Mesafe, gelenek altına da birkaç minder ekleyin.
Dolgu Alt: 150 pikselDaha sonra sınır ayarına girin ve ’50px’ sınır yarıçapını altın sol ve sağ köşesine uygulayın. Taşma Taşmanın görünür olduğundan emin olarak satır ayarlarını tamamlayın.
Yatay taşma: görünür Dikey taşma: görünür Dinamik Arka Plan Sütun 1 Ayarları Genel satır ayarlarını tamamladıktan, sütun 1 ayarlarını açtıktan ve dinamik içerik kullanarak ürünün üstün görüntüsünü arka plana ekleyin.
Arka plan görüntüsü: üstün görüntü
Jarak Tambahkan beberapa padding bawah ke kolom berikutnya. Ini akan memungkinkan gambar latar belakang untuk ditampilkan.Padding Bawah: 370px (Desktop), 690px (Tablet), 380px (Ponsel) Tambahkan Modul Teks ke Kolom 1 Tambah isi Saatnya mulai menambahkan modul! Di kolom 1, satu-satunya modul yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten pilihan Anda.
Warna latar belakang Ubah warna latar belakang modul selanjutnya. Warna Latar Belakang: #E02B20
Pengaturan Teks Pindah ke tab desain dan ubah pengaturan teks. Metin yazı tipi: Montserrat Berat Font Teks: Sangat Tebal
Hizalama Metni: Orta Warna Teks: #FFFFFF
Ukuran Teks: 30px
Tinggi Baris Teks: 1em
Perekat Kecilkan ukuran modul di pengaturan ukuran berikutnya.
Lebar: 280 piksel
Jarak Dan ubah modul menjadi persegi dengan menambahkan beberapa nilai padding khusus. Kami juga membuat tumpang tindih atas dan kiri menggunakan margin negatif.
Margin Atas: -120px Margin Kiri: -120px
Padding Atas: 110px Padding Bawah: 110px
Padding Kiri: 50px
Padding Kanan: 50px
Berbatasan Untuk mengubah persegi menjadi lingkaran, kita akan menambahkan radius batas ‘500px’ ke setiap sudut modul.
Ubah Putar Kami akan memutar modul juga.
Kiri: 330 derajat
Tambahkan Modul Teks ke Kolom 2 Tambahkan Konten H2 Ke kolom kedua! Di sana, modul pertama yang kita butuhkan adalah Modul Teks biasa. Masukkan beberapa konten H2 pilihan Anda. Pengaturan Teks H2 Pindah ke tab desain dan ubah pengaturan teks H2 sebagai berikut: Judul 2 Font: Montserrat
Judul 2 Ukuran Teks: 35px Jarak Tambahkan beberapa nilai margin kustom berikutnya. Margin Atas: -70px (Desktop), 100px (Tablet & Ponsel)
Margin Kiri: 100px (Desktop), 20px (Tablet & Ponsel)
Sağ kenar boşluğu: 20px (Tablet ve Cep Telefonu) Woo Açıklama Modülünü Sütun 2’ye ekleyin Dinamik İçerik Sütun 2’de ihtiyacımız olan ikinci modül Woo Açıklama modülüdür. Ürün: Bu ürün
Açıklama Türü: Kısa Açıklama
Metin Ayarları Uygun modül metin ayarlarını değiştirin:
Metin yazı tipi: kırmızı metin Metin Boyutu: 19px
Yüksek çizgi metin: 1.8em
Hizalama metni: haklı çıkar Mesafe Bir sonraki modül boşluk değerini değiştirin.
Alt kenar boşluğu: 50 piksel
Sol kenar boşluğu: 100px (masaüstü), 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: -100 piksel (masaüstü), 20px (tablet ve cep telefonu)
Woo Fiyat modülünü Sütun 2 dinamik içeriğine bir sonraki modüle olan Woo Fiyat modülüne ekleyin. Ürün: Bu ürün
Fiyat metni ayarları Fiyat metni ayarlarını aşağıdaki gibi değiştirin:
Fiyat yazı tipi: Montserrat
Ağır yazı tipi fiyatı: ağır Renk Metin Fiyatı: #000000
Fiyat metni boyutu: 50 piksel Bir sonraki alan ayarlarını değiştirmek için mesafe.
Alt kenar boşluğu: 50 piksel
Sol kenar boşluğu: 100px (masaüstü), 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: 20 piksel (tablet ve cep telefonu)
Woo ekle modül sepetine bir sonraki sütun 2 dinamik içeriğine ekleyin ve son olarak bu tasarımı tamamlamamız gerekiyor Woo Cart modülüne ekleyin. Ürün: Bu ürün
Metin Ayarları Metin ayarlarında metin yazı tipini değiştirin.
Metin yazı tipi: Montserrat
Ayarlar Alanı sonraki alan ayarlarını değiştirir. Alan arka plan rengi: #ffffff
Alan metni rengi: #000000 Üst dolgu: 66px
Dolgu Alt: 66px Yazı tipi yazı tipi: Montserrat
Yazı tipi Yazı Tipleri Yazı Tipi: Ağırlık
Tüm açılar: 5px
Alt alan sınırı: 3px
Field Boundar Rengi: #E02B20
Düğmeyi ayarlayarak düğmeyi ayarlayın.
Düğmeler için özel bir stil kullanın: evet Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #E02B20
Düğmenin sınır genişliği: 0px Sınır Sınır yarıçapı: 5pxfont düğmesi: Montserrat
Mektup Ağırlığı Düğmesi: Çok kalın
Yazı tipi stili düğmesi: büyük harf
Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel Sol dolgu: 100px (masaüstü), 50px (tablet), 20px (cep telefonu)
Sağ dolgu: 100 piksel (masaüstü), 50px (tablet), 20px (cep telefonu)
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3) Daha küçük ekran boyutlarına bazı sol ve sağ marj değerleri ekleyerek mesafe tam modül tasarımı ve tamamlayın!
Sol kenar boşluğu: 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: 20 piksel (tablet ve cep telefonu)
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.
Bu yazıdaki son zihin, size temiz bir görünümle nasıl inanılmaz bir cesur ürün sayfası oluşturacağınızı ve yeni Divi WooCommerce modülünü kullanarak nasıl hissedeceğinizi gösterdik. Kalın ürün sayfaları, ürününüzü vurgulamak için benzersiz bir yola sahiptir. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
