Divi için Güzel Bir Tam Ekran Ürün Sayfası İndirin
Yayınlanan: 2019-11-04WooCommerce Modülleri Divi'nin bir parçası haline geldiğinden, size Divi'nin yerleşik seçeneklerini kullanarak oluşturabileceğiniz birkaç ürün sayfası tasarımı gösterdik. Bugün size güzel bir tam ekran ürün sayfasının nasıl oluşturulacağını göstererek bu listeye yeni bir öğretici ekliyoruz. Çarpıcı bir tasarım yaratırken tüm ürün içeriğini tek bir bölüme sığdırıyoruz. Ürün sayfasında gerekli olan dikey kaydırmayı sınırlandırmamıza rağmen, tasarım hiçbir şekilde bunaltıcı görünmüyor. Ayrıca tasarımın küçük ekran boyutlarında güzel ve duyarlı kalmasını sağladık. JSON dosyasını da ücretsiz olarak indirebileceksiniz!
Hadi hadi bakalım.
Ön izleme
Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
masaüstü
Mobil
Tam Ekran Ürün Düzenini ÜCRETSİZ İndirin
Ellerinizi ücretsiz tam ekran ürün düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Youtube Kanalımıza Abone Olun
Yeniden Yaratmaya Başlayalım!
Mevcut Ürün Sayfasını Aç
Yapmanız gereken ilk şey, mevcut bir ürün sayfasını açmak veya yeni bir tane oluşturmak. Bu özel düzen için ürün sayfamıza aşağıdaki öğeleri ekledik:
- Ürün başlığı
- Özellikli resim
- Kısa Açıklama
- Açıklama
- Fiyat
Divi'yi Etkinleştir ve Sayfa Ayarlarını Değiştir
Divi'yi etkinleştirerek ve sayfa ayarlarında sayfa düzenini değiştirerek devam edin.
Visual Builder'a Geçin
Bunu yaptıktan sonra Visual Builder'a geçebilirsiniz.
Mevcut Bölümü Sil
Visual Builder'ın içinde, varsayılan ürün sayfası öğelerini içeren bir bölüm göreceksiniz. Devam edebilir ve bu bölümün tamamını silebilirsiniz. Bu yazının sonraki adımlarında, kendi alternatif tasarımımızı yeniden oluşturacağız.
Yeni Bölüm Ekle
aralık
Yaratmaya başlama zamanı! Yeni bir bölüm ekleyin, bölüm ayarlarını açın ve üst ve alt dolgu değerlerini değiştirin.
- Üst Dolgu: 5vw
- Alt Dolgu: 5vw
taşmalar
Bölümün taşmalarını da gizleyin.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Yeni Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi yapın:
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: %100
Sütun 1
Z İndeksi
Ayrıca, görünürlük ayarlarında ilk sütunun z dizinini artırıyoruz.
- Z İndeksi: 10
2. sütun
Degrade Arka Plan
Sonraki sütun 2 ayarlarını açın ve farklı ekran boyutlarına degrade bir arka plan ekleyin:
- Renk 1: #ffcb49
- Renk 2: #ffffff
- Gradyan Türü: Radyal
- Radyal Yön: Merkez
- Başlangıç Konumu: %66 (Masaüstü), %50 (Tablet ve Telefon)
- Bitiş Konumu: %66 (Masaüstü), %50 (Tablet ve Telefon)
Sütun 1'e Woo Başlık Modülü ekleyin
Dinamik İçerik
Modül eklemeye başlama zamanı! 1. sütunda ihtiyacımız olan tek modül bir Woo Başlık Modülü.
- Ürün: Bu Ürün
Başlık Metni Ayarları
Modülün tasarım sekmesine gidin ve başlık metni ayarlarını aşağıdaki gibi değiştirin:
- Başlık Yazı Tipi: Montserrat
- Başlık Yazı Tipi Ağırlığı: Ultra Hafif
- Başlık Metni Hizalama: Sol (Masaüstü), Orta (Tablet ve Telefon)
- Başlık Metin Boyutu: 9vw
boyutlandırma
Modülün boyutunu da değiştirin.
- Genişlik: 50vw (Masaüstü), %100 (Tablet ve Telefon)
aralık
Boşluk ayarları ile birlikte.
- Üst Marj: 14vw (Masaüstü), 0vw (Tablet ve Telefon)
- Alt Marj: 5vw (Tablet ve Telefon)
- Sol Kenar Boşluğu: -11vw (Masaüstü), 2vw (Tablet ve Telefon)
- Sağ Kenar Boşluğu: 2vw (Tablet ve Telefon)
Dönüştür Döndür
Son olarak, dönüştürme ayarlarında tüm modülü döndürün.
- Sol: 270deg (Masaüstü), 0deg (Tablet ve Telefon)
Sütun 2'ye Woo Images Modülü ekleyin
Dinamik İçerik
İkinci modüle geçin! Orada ihtiyacımız olan tek modül Woo Image Module.
- Ürün: Bu Ürün
Görüntü Ayarları
Modülün tasarım sekmesine gidin ve görüntü ayarlarını aşağıdaki gibi değiştirin:
- Görüntü Yuvarlatılmış Köşeler: 1vw (Tüm Köşeler)
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge Rengi: rgba(0,0,0,0.3)
boyutlandırma
Boyutlandırma ayarlarında genişlik ve modül hizalamasını değiştirerek Woo Image Module ayarlarını tamamlayın.
- Genişlik: 35vw
- Modül Hizalaması: Merkez
Woo Açıklama Modülü #1'i Sütun 3'e ekleyin
Dinamik İçerik
Son sütuna! Orada, ihtiyacımız olan ilk modül Woo Açıklama Modülü.
- Ürün: Bu Ürün
- Açıklama Türü: Kısa Açıklama
Metin Ayarları
Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:
- Metin Yazı Tipi: Montserrat
- Metin Yazı Tipi Stili: Büyük Harf
- Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Metin Harf Aralığı: -0.07vw
- Metin Satır Yüksekliği: 1.8em
aralık
Boşluk ayarlarını da değiştirin.
- Üst Marj: 9vw
- Sol Dolgu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
- Sağ Dolgu: 5vw
Sütun 3'e Woo Fiyat Modülü ekleyin
Dinamik İçerik
Woo Fiyat Modülü olan bir sonraki modüle geçin.
- Ürün: Bu Ürün
Fiyat Metni Ayarları
Modülün fiyat metin ayarlarını aşağıdaki gibi değiştirin:
- Fiyat Yazı Tipi: Montserrat
- Fiyat Metin Rengi: #333333
- Fiyat Metin Boyutu: 3vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
- Fiyat Çizgisi Yüksekliği: 1.8em
aralık
Boşluk ayarlarını da değiştirin.
- Üst Marj: 4vw
- Sol Dolgu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
- Sağ Dolgu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
Woo'yu Sepete Ekle Modülünü Sütun 3'e Ekle
Dinamik İçerik
Bu tasarımı tamamlamak için ihtiyacımız olan bir sonraki ve son modül, Woo Sepete Ekle Modülüdür.
- Ürün: Bu Ürün
Alan Ayarları
Modülün alan ayarlarını aşağıdaki gibi değiştirin:
- Alanlar Arka Plan Rengi: #0a0900
- Alan Metin Rengi: #ffffff
- Alan Yazı Tipi: Montserrat
- Alanlar Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Yuvarlatılmış Köşeler: 50vw (Tüm Köşeler)
Düğme Ayarları
Düğme ayarlarıyla da oynayın.
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Düğme Metin Rengi: #ffffff
- Düğme Arka Plan Rengi: #ffcb49
- Düğme Kenar Genişliği: 0px
- Düğme Yazı Tipi: Montserrat
- Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Sol Dolgu: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)
- Sağ Doldurma: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)
aralık
Ve farklı ekran boyutlarına bazı özel boşluk değerleri ekleyerek modülün ayarlarını tamamlayın.
- Üst Marj: 2vw
- Sol Kenar Boşluğu: -3vw (Masaüstü), 5vw (Tablet ve Telefon)
- Sağ Kenar Boşluğu: 5vw (Tablet ve Telefon)
Ürün Sayfasını Şablona Dönüştürün
Sayfa Düzenini Divi Kitaplığına Kaydet
Tam ekran ürün sayfasını tamamladığınızda, Divi's Theme Builder'ı kullanarak ürünlerinizin her biri için kullanabilirsiniz. Bunu yapmak için az önce oluşturduğunuz düzeni Divi Kitaplığınıza kaydedin.
Tema Oluşturucuya Yeni Şablon Ekle
Divi ayarlarınızda Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin.
Bu düzenin görünmesini istediğiniz ürün sayfalarını seçin.
Düzeni Şablonun Gövdesine Yükleyin
Ardından, 'Global Gövde Ekle'yi tıklayın ve 'Kitaplıktan Ekle'yi seçin.
'Kaydedilen Düzenleriniz' sekmesinde düzeninizi seçin.
Ve tüm değişikliklerinizi kaydedin!
Ön izleme
Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.
masaüstü
Mobil
Son düşünceler
Bu gönderide, kurduğunuz her tür e-Ticaret web sitesi için kullanabileceğiniz güzel bir tam ekran ürün sayfasını nasıl yeniden oluşturacağınızı gösterdik. Çarpıcı bir sonuç yaratmak ve gereken dikey kaydırmayı sınırlamak için çeşitli woo modüllerinin ayarlarını eşleştirdik. Bu tasarımın size kendi tam ekran ürün sayfalarınızı yaratmanız için ilham vereceğini umuyoruz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.
Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.