Divi ile Woo Ürün Sayfaları için Duyarlı Blok Tasarımı Nasıl Oluşturulur

Yayınlanan: 2019-11-02

Artık Divi'de woo modüllerini kullanabildiğinize göre, tek sınır hayal gücünüzdür. Her dinamik woo modülü, oluşturucu içindeki diğer tüm modüller gibi özelleştirilebilir. Bu gönderide, ürün sayfalarınız için yaratıcı bir blok tasarımı nasıl yeniden oluşturacağınızı göstereceğiz. Dinamik modüller, koyu arka plandan sıyrılan yaratıcı bir set halinde gruplandırılmıştır. Ayrıca JSON dosyasını ücretsiz olarak indirebilirsiniz!

Hadi hadi bakalım.

Ön izleme

Başlamadan önce, farklı ekran boyutlarındaki tasarıma bir göz atalım.

masaüstü

Mobil

Duyarlı Blok Tasarımını ÜCRETSİZ İndirin

Ellerinizi ücretsiz duyarlı blok tasarımına 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.

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

1. WooCommerce Ürününü Ekle / Aç

Ürün Detayları

Mevcut bir ürünü açın veya yeni bir tane oluşturun. Bu blok stili tasarımı yeniden oluşturmak için aşağıdaki bilgileri doldurmanız gerekir:

Başlık
Açıklama
Fiyat
Kategori
Öznitellikler
Özellikli resim

Öznitelikler sekmesi, woo ek bilgi modülüne ilişkin bilgilerin alındığı yerdir. Bu bilgiyi eklemek için öznitelikler sekmesine tıklayın ve aşağıdaki gibi üç özel öznitelik oluşturun:

Öznitellikler:
- Kapasite: 250ml / 2 çay bardağı
- Malzeme: Saf Bakır
- Durum: Normal Aşınma ve Yıpranma

Öne çıkan görsel, tasarımdaki renkle aynı arka plana sahip olmalıdır.

Divi Builder'ı Etkinleştir ve Sayfa Ayarlarını Değiştir

Tüm ürün ayrıntıları doldurulduğunda Divi Builder'ı etkinleştirin. Sayfa düzenini 'Tam Genişlik' olarak değiştirin.

Visual Builder'a geçin

Visual Builder'a geçerek devam edin.

Varsayılan Ürün Bölümünü Sil

Özel bir ürün sayfası oluşturduğumuz için, devam edin ve varsayılan woo ürün bölümünü silin.

2. Duyarlı Blok Tasarımını Yeniden Oluşturun

Yeni Bölüm Ekle

Arka plan

Tasarımı yeniden oluşturmanın ilk adımı, yeni bir bölüm eklemektir. Farklı ekran boyutlarına degrade arka plan ekleyin.

Arka plan: Gradyan
Renk 1: Açık Gri #f2f6f5
Renk 2: Neredeyse Siyah #313131
Yön:
- Masaüstü: %90
- Tablet + Telefon: %180
Başlat + Bitir:
- Masaüstü: %50
- Tablet: %40
- Telefon: %30

boyutlandırma

Bölümün boyutlandırma ayarlarını yapın.

Genişlik: %100
Maksimum Genişlik: %100

aralık

Varsayılan üst ve alt dolguyu da kaldırın.

Üst + Alt Dolgu: 0vw

görünürlük

Son olarak, bölümün taşmalarını ayarlayın.

Dikey + Yatay Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Bölümü kurduktan sonra, bir sütunlu ilk satırı ekleyin.

boyutlandırma

Tasarım sekmesinde, farklı ekran boyutları için boyutlandırmayı ayarlayın.

Genişlik:
- Masaüstü: %50
- Tablet + Telefon: %100
Maksimum Genişlik: %100
Satır Hizalama: Sol

görünürlük

Son olarak, yatay ve dikey taşmayı görünür olarak ayarlayın.

Yatay + Görünür Taşma: Görünür

Woo Ekmek Kırıntısı Ekle

İçerik

İlk modülü, woo kırıntı modülünü ekleyin. 'Bu Ürün'ü seçin.

Ürün: Bu Ürün

Metin

Tasarım sekmesinde metni aşağıdaki gibi biçimlendirin.

Metin Yazı Tipi: Fenix
Metin Rengi: Kahverengi #594239
Yazı Boyutu:
- Masaüstü: 1vw
- Tablet: 2vw
- Telefon: 3vw

aralık

Farklı ekran boyutları için bazı boşluk değerleri ekleyin.

Üst Marj: 3vw
Sol Kenar Boşluğu:
- Masaüstü: 10vw
- Tablet + Telefon: 20vw

Woo Resmi Ekle

İçerik Ekle

Şimdi bir Woo Image modülü ile ürün resmini ekleme zamanı. İçerik sekmesinde 'Bu Ürün'ü seçin.

Ürün: Bu Ürün

boyutlandırma

Modülün boyutunu ayarlayarak devam edin.

Genişlik: %100

görünürlük

Son olarak, taşmayı gizleyin.

Yatay + Dikey Taşma: Gizli

2. Satır Ekle

Sütun Yapısı

İki sütunlu ikinci bir satır ekleyin.

boyutlandırma

İlk önce boyutu ayarlayın.

Oluk Genişliği: 1
Genişlik:
- Masaüstü: %53
- Tablet + Telefon: %53
Maksimum Genişlik: %100
Hizalama: Sağ

aralık

Ardından, boşluk değerleri.

Üst boşluk:
- Masaüstü: -47vw
- Tablet + Telefon: 0vw
Sol Kenar Boşluğu:
- Tablet: -5vw
- Telefon: -8vw
Alt Dolgu:
- Masaüstü + Tablet: 4.1vw
Sol Dolgu:
- Masaüstü: 0vw
- Tablet: 16vw
- Telefon: 12vw
Sağ Dolgu:
- Masaüstü: 0vw
- tablet: 0vw

Özel CSS

Gelişmiş sekmesinde, bazı özel CSS ekleyin.

Ana Öğe CSS'si:
- ekran: esnek;

display: flex;

görünürlük

Son olarak, taşmaları görünür olarak ayarlayın.

Yatay + Dikey Taşmalar: Görünür

Sütun 1 Ayarları

aralık

Herhangi bir modül eklemeden önce, sütun 1'deki boşluk değerlerini ayarlayın.

Sol Dolgu: 4vw
Sağ Dolgu: 0vw

Sütun 2 Ayarları

aralık

Sütun 2 boşluk değerlerini de ayarlayın.

Üst Dolgu:
- Masaüstü: 7vw
- Tablet: 17vw
- Telefon: 28vw
Sağ Dolgu:
- Masaüstü + Tablet: 15vw

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

İçerik Ekle

Şimdi modülleri ekleme zamanı. Bir metin modülü ile başlayın. Ürün için açıklayıcı içerik ekleyin.

Metin

Ardından, metni stilize edin.

Yazı Tipi: Fenix
Renk: #f2eed0
Boy:
- Masaüstü: 1.3vw
- Tablet: 2.6vw
- Telefon: 3.8vw
Harf Aralığı: 1px
Hizalama: Merkez

boyutlandırma

Modülün boyutunu farklı ekran boyutları için ayarlayın.

Genişlik:
- Masaüstü: %50
- Tablet: %60
- Telefon: %80

aralık

Ayrıca, aralık değerlerini aşağıdaki gibi ayarlayın.

Üst + Alt Dolgu: 1vw
Sol + Sağ Dolgu: 1vw

Sınır

Modüle buna göre bir kenarlık ekleyin.

Kenarlık Stilleri: Üst + Sol + Sağ
Sınır Genişliği:
- Üst + Sol + Sağ: 2px
Sınır rengi:
- Üst + Sol + Sağ: Krem #f2eed0

Sütun 1'e Woo Başlığı Ekle

İçerik Ekle

Şimdi, bir woo başlık modülü ekleyin ve içerik sekmesinde 'Bu Ürün'ü seçin.

Ürün: Bu Ürün

Arka plan

Modüle stil vermek için koyu turuncu bir arka plan ekleyin.

Arka plan rengi
Renk: Bakır Turuncu #d66b00

Başlık Metni

Ardından, başlık metni ayarlarını değiştirin.

Başlık Başlık Düzeyi: H1
Yazı Tipi: Fenix
Renk: Krem #f2eed0
Boy:
- Masaüstü: 2.9vw
- Tablet: 7.8vw
- Telefon: 13.9vw
H1 Harf Aralığı: 1px

boyutlandırma

Ek olarak, modülün boyutunu ayarlayın

Genişlik: %100

aralık

Ardından, bazı dolgu değerleri ekleyin.

Üst + Alt Dolgu:
- Masaüstü: 2vw
- Tablet: 3vw
- Telefon:4vw
Sol + Sağ Dolgu:
- Masaüstü: 2vw
- Tablet: 3vw
- Telefon:4vw

Sınır

Son olarak aşağıdaki gibi bir kenarlık ekleyin.

Kenarlık Stilleri: Üst + Sol + Sağ
Sınır Genişliği:
- Üst + Sol + Sağ: 2px
Sınır rengi:
- Üst + Sol + Sağ: Krem #f2eed0

Sütun 1'e Woo Açıklama Başlığı Ekle

İçerik Ekle

Başlığın altına bir woo açıklama modülü ekleyin. İçerik sekmesinde 'Bu Ürün'ü seçin.

Ürün: Bu Ürün
Açıklama Türü: Açıklama

Metin

Ardından, metni stilize edin.

Yazı Tipi: Açık Sans
Renk: Krem #f2eed0
Boy:
- Masaüstü: 08vw
- Tablet: 2vw
- Telefon: 3vw

boyutlandırma

Ayrıca, boyutu ayarlayın.

Genişlik: %100

aralık

Aynı şekilde, aralığı ayarlayın.

Üst + Alt Dolgu:
- Masaüstü: 2vw
- Tablet + Telefon: 3vw
Sol + Sağ Dolgu:
- Masaüstü: 2vw
- Tablet + Telefon: 3vw

Sınır

Diğer modüllere benzer şekilde, bir kenarlık ekleyin.

Kenarlık Stilleri: Dört kenarlığın tümü
Genişlik: 2 piksel
Renk: Krem #f2eed0

Sütun 2'ye Woo Ek Bilgisi Ekleyin

İçerik Ekle

Şimdi, woo ek bilgi modülüyle özel nitelikleri ekleme zamanı. İçerik sekmesinde 'Bu Ürün'ü seçin.

Ürün: Bu Ürün

Metin

Metin ayarlarını aşağıdaki gibi değiştirin.

Yazı Tipi: Açık Sans
Tarz: İtalik
Renk: Krem #f2eed0
Boy:
- Masaüstü: 0.6vw
- Tablet: 1.6vw
- Telefon: 2.2vw

Özellik Metni

Ardından, nitelik metnini buna göre biçimlendirin:

Yazı Tipi: Fenix
Renk: Krem #f2eed0
Boy:
- Masaüstü: 1.1vw
- Tablet: 2vw
- Telefon: 3vw
Aralık: 1 piksel

boyutlandırma

Ayrıca, boyutu ayarlayın.

Genişlik: %100

Sınır

Ve son olarak, bir kenarlık ekleyin.

Kenarlık Stilleri: Üst + Sağ + Alt
Sınır Genişliği:
- Üst + Sağ + Alt: 2 piksel
Sınır rengi:
- Üst + Sağ + Alt: Krem #f2eed0

3. Satır Ekle

Sütun Yapısı

İki sütunlu üçüncü satırı ekleyin.

boyutlandırma

Modülleri eklemeden önce, farklı ekran boyutları için satırın boyutunu ayarlayın.

Genişlik:
- Masaüstü: %50
- Tablet: %87
- Telefon: %93
Hizalama: Sağ

Dolgu malzemesi

Ayrıca, dolguyu ayarlayın.

Alt Dolgu: 12vw

Sütun 1 Ayarları

aralık

İlk sütundaki dolguyu ayarlayarak devam edin.

Sol Dolgu:
- Masaüstü: 5vw
- Tablet + Telefon:12vw

Woo Fiyatını Sütun 1'e Ekle

İçerik Ekle

Şimdi, woo fiyat modülünü kullanarak ürünün fiyatını ekleyin. İçerik sekmesinde 'Bu Ürün'ü seçin.

Ürün: Bu Ürün

Fiyat Metni

Ardından, metni buna göre biçimlendirin.

Yazı Tipi: Fenix
Renk: Krem #f2eed0
Boy:
- Masaüstü: 1.5vw
- Tablet: 3.5vw
- Telefon: 5vw

boyutlandırma

Ayrıca, modülün boyutunu ayarlayın.

Genişlik:
- Masaüstü: %39
- Tablet: %45
- Telefon: %54

aralık

Aralığı da ayarlayın.

Üst Dolgu:
- Masaüstü: 1vw
- Tablet: 2vw
- Telefon: 3v2
Alt Dolgu:
- Masaüstü: 1vw
- Tablet + Telefon: 2vw
Sol Dolgu:
- Masaüstü: 1vw
- Tablet + Telefon: 2vw
Sağ Dolgu:
- Tablet + Telefon: 2vw

Sınır

Son olarak, kenarlığı ekleyin.

Kenar Stilleri: Dört tarafın tümü
Genişlik: 2 piksel
Renk: Krem #f2eed0

Woo'yu Sepete Ekle Sütun 2'ye Ekle

İçerik Ekle

Son modül, bir sepete ekleme modülüdür. İçerik sekmesinde 'Bu Ürün'ü seçin.

Düğme Stilleri

Düğmeyi aşağıdaki gibi şekillendirin.

Özel Stiller: Evet
Düğme Metin Boyutu:
- Masaüstü: 1.3vw
- Tablet: 3.5vw
- Telefon: 5vw
Metin Rengi: Krem #f2eed0
Arka Plan Rengi: Bakır Turuncu #d66b00

Düğme Dolgusu

Ardından, düğmeye bazı dolgu değerleri ekleyin.

Üst + Alt Dolgu: 0.5vw
Sol + Sağ Dolgu: 1.5vw

boyutlandırma

Son olarak, modülün boyutunu ayarlayın ve işiniz bitti!

Genişlik: %100

Ön izleme

Farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Bu bir Sargı

Bu kadar! İçeriğiniz bu eğitimdekinden daha uzun veya daha kısaysa, blok aralıklarını bozabilir. Tek yapmanız gereken, sütun ayarlarını kompozisyona daha iyi uyacak şekilde ayarlamaktır. Umarız bu eğitim size daha şaşırtıcı Divi tasarımları yaratmanız için ilham verir. Herhangi bir sorunuz varsa yorumlarda bize bildirin.