Woo Galeri Resimlerini Divi Ürün Sayfası Şablonunuzun İçinde Dikey Olarak Nasıl Yığınlarsınız

Varsayılan olarak, WooCommerce ürünlerinize galeri resimleri ekler eklemez, ürün sayfası tasarımınızın ön ucunda ürününüzün öne çıkan resminin altında yatay olarak görünürler. Bazı özel tasarımlarda, örneğin tam ekran ürün sayfası tasarımlarında, bu woo galeri görüntülerini dikey olarak istiflemek daha uygun olabilir. Divi's Theme Builder ile oluşturduğunuz ürün sayfası şablonunda woo galeri resimlerini dikey olarak yığmanın hızlı bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Oraya nasıl gideceğinizi adım adım göstereceğiz. Bu yaklaşıma, ücretsiz olarak da indirebileceğiniz minimal ürün sayfası şablonuyla eşlik edeceğiz! Bu eğitici, 1:1 oranında görsellerin kullanıldığı ürün sayfalarında en iyi sonucu verir.

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

Ürün Sayfası Şablonunu ÜCRETSİZ İndirin

Ücretsiz ürün sayfası şablonuna el 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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

Divi Tema Oluşturucu İçinde Ürün Sayfası Şablonu Oluşturun

Divi Tema Oluşturucu'ya Git ve Yeni Şablon Ekle

Divi Tema Oluşturucu'ya giderek başlayın ve 'Yeni Şablon Ekle'yi tıklayın.

Tüm Ürünlerde Şablon Kullanın

Bu şablonu tüm ürünlerde kullanacağız, ancak koşulları istediğiniz gibi değiştirmekten çekinmeyin.

Şablonun Gövde Şablon Düzenleyicisini Girin

Şablonu oluşturduktan sonra, 'Özel Gövde Ekle'yi tıklayın ve şablon düzenleyiciye yönlendirilmek için 'Özel Gövde Oluştur'u seçerek devam edin.

Kategori Sayfası Şablonu Gövdesi Oluşturmaya Başla

Bölüm #1'i Değiştir

Arka plan rengi

Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

aralık

Tasarım sekmesine gidin ve sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %95
• Maksimum Genişlik: 2560 piksel
• Satır Hizalama: Merkez

aralık

Daha küçük ekran boyutlarında da bazı özel üst ve alt dolgular kullanacağız.

• Üst Dolgu: 100 piksel (Yalnızca Tablet ve Telefon)
• Alt Dolgu: 100 piksel (Yalnızca Tablet ve Telefon)

Ana Eleman CSS

Sütun içeriğini masaüstünde hizalamak için satırın ana öğesinde iki satır CSS Kodu kullanacağız. Ekran özelliğini tablette ve telefonda geri getireceğiz.

Masaüstü:

display: flex;
align-items: center;

Tablet ve Telefon:

display: block;

Sütun 2 Gradyan Arka Planı

Genel satır ayarları yapıldıktan sonra, ikinci sütunun ayarlarını açın ve radyal degrade arka planı uygulayın.

• Renk 1: #f7f2ef
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Sütun 2 Aralığı

Sütunun tasarım sekmesine gidin ve farklı ekran boyutlarındaki özel dolgu değerlerini değiştirin.

• Üst Dolgu: %30 (Masaüstü), %10 (Tablet ve Telefon)
• Alt Dolgu: %10
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütun 1'e Woo Images Modülü Ekleme

Dinamik İçerik

Modül ekleme zamanı! 1. sütunda ihtiyacımız olan ilk modül bir Woo Images Modülü. Bu eğitim, 1:1 oranında öne çıkan bir resim ve galeri resimleri kullanıyorsanız en iyi sonucu verir. Bu şekilde, ilerideki adımlarda resimleri çemberlere dönüştürebileceğiz. Woo Images Modülünü ekledikten sonra dinamik içeriğin 'Bu Ürün' olarak ayarlandığından emin olun.

• Ürün: Bu Ürün

Sütun 1'e Kod Modülü Ekle

CSS Kodu Ekle

Woo Images Modülünün hemen altına bir Kod Modülü ekleyeceğiz. Bu Kod Modülüne eklediğimiz CSS kodu, sütunumuzun sol tarafında woo galeri resimlerini dikey olarak istiflememize yardımcı olacaktır.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

Sütun 2'ye Woo Başlık Modülü ekleyin

Dinamik İçerik

Bir sonraki sütuna. Orada, ihtiyacımız olan ilk 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: PT Sans
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 84px (Masaüstü), 60px (Tablet), 45px (Telefon)

Sütun 2'ye Woo Açıklama Modülü Ekle

Dinamik İçerik

Bir Woo Açıklama Modülü olan bir sonraki modüle geçin.

• Ürün: Bu Ürün
• Açıklama Türü: Kısa Açıklama

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Karla
• Metin Boyutu: 17px (Masaüstü ve Tablet), 15px (Telefon)
• Metin Satır Yüksekliği: 1.9em

aralık

Biraz üst ve alt kenar boşluğu ekleyerek modül ayarlarını tamamlayın.

• Üst Marj: %5
• Alt Marj: %5

Sütun 2'ye Woo Fiyat Modülü ekleyin

Dinamik İçerik

Woo Açıklama Modülünün hemen altına bir Woo Fiyat Modülü ekleyin.

• Ürün: Bu Ürün

Fiyat Metni Ayarları

Modülün tasarım sekmesine gidin ve fiyat metin ayarlarını aşağıdaki gibi değiştirin:

• Fiyat Yazı Tipi: PT Sans
• Fiyat Yazı Tipi Ağırlığı: Kalın
• Fiyat Metin Rengi: #ce8654
• Fiyat Metin Boyutu: 27px

Woo'yu Sepete Ekle Modülünü Sütun 2'ye ekleyin

Dinamik İçerik

Bu öğreticiyi tamamlamamız gereken bir sonraki ve son modül, bir Woo Sepete Ekle Modülüdür.

• Ürün: Bu Ürün

Alan Ayarları

Tasarım sekmesine gidin ve alan ayarlarını aşağıdaki gibi değiştirin:

• Alanlar Arka Plan Rengi: #ffffff
• Alan Metin Rengi: #000000
• Fields Yazı Tipi: Açık Sans

• Tüm Köşeler: 0px
• Alanlar Alt Kenar Genişliği: 1px
• Alanlar Alt Kenarlık Rengi: #ce8654

Düğme Ayarları

Ardından, düğme ayarlarında düğmeyi stillendirin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #0a0201
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: PT Sans
• Düğme Yazı Ağırlığı: Kalın

• Düğme Üst Dolgusu: 20px
• Düğme Alt Dolgusu: 20px
• Düğme Sol Dolgu: 50px
• Düğme Sağ Doldurma: 50px

aralık

Woo Add to Cart Modülüne bir miktar üst kenar boşluğu ekleyerek modül ayarlarını ve bu öğreticiyi tamamlayın. Ürün sayfası şablonunu değiştirmeyi bitirdikten sonra, sonucu ürün sayfalarınızda görüntülemeden önce tüm Tema Oluşturucu değişikliklerini kaydettiğinizden emin olun!

• Üst Marj: %5

Ö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, Divi's Theme Builder ve WooCommerce modüllerini kullanarak oluşturduğunuz ürün sayfalarında nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, woo galeri resimlerini dikey olarak nasıl yığacağınızı gösterdik. Bu yaklaşım, tam ekran ürün sayfası tasarımıyla uyumludur, ancak oluşturduğunuz her tür ürün sayfası şablonu için kullanışlı olabilir. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz 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.