modlar ile WooCommerce uzeri Divi, yapabileceğiniz tonlarca tasarım var. Bu eğitimde Divi, yalnızca yerleşik seçenekleri kullanarak elde edebileceğiniz başka bir tasarım fikriyle size ilham vermeye çalışacağız. Divi. Özellikle, bir ürünü arka plan resminizde nasıl çerçeveleyeceğinizi göstereceğiz. Sonuç tamamen arka plan resminize bağlıdır, ancak bu öğreticiyi takip ederseniz tekniği kendinize göre özelleştirmek için hangi adımları atmanız gerektiğini bileceksiniz. Site Web! Ayrıca öğretici JSON dosyasını ücretsiz olarak indirebileceksiniz!
anket
Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.
1. Bölümü duyarlı bir arka plan resmiyle yapılandırın
Yeni bölüm ekle
Uyarlanabilir arka plan görüntüsü
Arka plan resminizde bir ürünü çerçevelemenin ilk adımı, üzerinde çalıştığınız sayfaya yeni bir bölüm eklemektir. Bölüm ayarlarını açın ve duyarlı arka plan resimlerini indirin. Bu yazının başında indirebildiğiniz klasörde kullandığımız iki görseli bulabilirsiniz.
- Arka plan görüntüsü: manzara
- Arka Plan Resim Boyutu: Sığdır
- Arka plan resminin konumu: üst orta
- Arka plan görüntüsü: kare
aralık
Tasarım sekmesine gidin ve farklı ekran boyutlarında özel üst ve alt dolgu ekleyin.
- Üst dolgu: 3vw (masaüstü), 0vw (tablet ve telefon)
- Alt dolgu: 3vw (masa), 7vw (tablet), 18vw (telefon)
Sınır
Kenarlık ekleyerek bölüm parametrelerini tamamlayın.
- Sınır genişliği: 2vw
- Kenarlık rengi: #ffffff
2. Kolona farklı çerçeve öğeleri ekleyin
Yeni bir satır ekle
Sütun yapısı
Şimdi, arka plan resminde de görebileceğiniz gibi, ürün, arka plan resminin sağ tarafında yer alıyor. Bölümümüzde yeni bir satır için uygun bir sütun yapısı seçeceğiz. Bu durumda, aşağıdaki sütun yapısıdır:
boyutlandırma
Henüz modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini uygun şekilde değiştirin:
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Sütun yüksekliklerini eşitle: Evet
- Genişlik:% 100
- Maksimum genişlik:% 100
aralık
Özel sol ve sağ dolgu ekleyerek çizgi parametrelerini tamamlayın.
- Sol dolgu: 5vw
- Sağ dolgu: 5vw
2 sütununa bir metin modülü ekleyin
İçerik alanını boş bırakın
Modül eklemeye başlama zamanı! Ürünün görünmesine izin vermek için boş bir metin modülü kullanacağız.
aralık
Ardından, aralık ayarlarında modülün yüksekliğini artıracağız.
- Üst dolgu: 22vw (masaüstü), 39vw (tablet), 35vw (telefon)
- Alt dolgu: 15vw (masa), 39vw (tablet), 35vw (telefon)
Sınır
Ve ayrıca bir sınır ekleyeceğiz.
- Sınır genişliği: 3vw
- Alt kenar genişliği: 1vw
- Kenarlık rengi: rgba (255,255,255,0,7)
Woo başlık modülünü 2. sütuna ekleyin
Dinamik içerik
Woo başlık modülü olan bir sonraki modüle geçelim. İstediğiniz ürünü seçin.
- Ürün: Listede ara
Arka plan rengi
Aşağıdaki arka plan rengini kullanın:
- Arka plan rengi: rgba (255,255,255,0,7)
Başlık metni ayarları
Modül tasarımı sekmesine geçin ve H3 metin ayarlarını buna göre değiştirin:
- Başlık seviyesi: H3
- Başlık yazı tipi: Work Sans
- Başlık metni boyutu: 2.5vw (masaüstü), 5vw (tablet), 6vw (telefon)
aralık
Ayrıca özel dolgu değerleri ekleyin.
- Üst dolgu: 1vw
- Alt doldurma: 1vw
- Sol dolgu: 3vw
- Sağ dolgu: 3vw
Woo açıklama modülünü 2. sütuna ekleyin
Dinamik içerik
İhtiyacımız olan bir sonraki modül bir Woo açıklama modülüdür. İstediğiniz ürünü seçin.
- Ürün: Listede ara
- Açıklama türü: Kısa açıklama
Arka plan rengi
Modülün arka plan rengini buna göre değiştirin:
- Arka plan rengi: rgba (255,255,255,0,7)
Metin ayarları
Modül tasarımı sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:
- Metin yazı tipi: Açık Sans
- Metin boyutu: 0.9vw (masaüstü), 2.2vw (tablet), 2.8vw (telefon)
- Başlık satırı yüksekliği: 2,2 em
aralık
Özel dolgu değerleri ekleyerek modül parametrelerini tamamlayın.
- Üst dolgu: 1vw
- Alt doldurma: 1vw
- Sol dolgu: 3vw
- Sağ dolgu: 3vw
Woo Price metin modülünü 2. sütuna ekleyin
Dinamik içerik
Ardından, Woo fiyat metin modülümüz var. İstediğiniz ürünü seçin.
- Ürün: Listede ara
Arka plan rengi
Arka plan rengini değiştirin.
- Arka plan rengi: rgba (255,255,255,0,7)
Fiyat metni ayarları
Modül tasarımı sekmesine geçin ve fiyat metni ayarlarını buna göre değiştirin:
- Fiyat politikası: İş Sansı
- Fiyat metni rengi: # 000000
- Fiyat Metin boyutu: 2vw (masaüstü), 4vw (tablet), 5vw (telefon)
aralık
Özel dolgu değerleri ekleyerek modül parametrelerini tamamlayın.
- Üst dolgu: 2vw
- Alt doldurma: 2vw
- Sol dolgu: 3vw
- Sağ dolgu: 3vw
Sütun ekle Sepete ekle Modül 2 sütununda
Dinamik içerik
Woo Add To Cart modülü olan bir sonraki ve son modüle geçelim! İstediğiniz ürünü seçin.
- Ürün: Listede ara
Arka plan rengi
Arka plan rengini değiştirin.
- Arka plan rengi: rgba (255,255,255,0,7)
Saha ayarları
Ayrıca modül alanlarının parametrelerini de değiştirin.
- Alanların arka plan rengi: #ffffff
- Alan metni rengi: # 000000
- Alan yazı tipi: Open Sans
- Alanların alt kenarlık genişliği: 1 piksel
- Alanların alt kenarlığının rengi: # 000000
Düğme ayarları
Düğmeyi aşağıdaki gibi şekillendirerek devam edin:
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 1.1vw (masaüstü), 2.5vw (tablet), 3.5vw (telefon)
- Düğme metni rengi: #ffffff
- Düğme arka plan rengi: # 000000
- Düğme kenarlığı genişliği: 0 piksel
- Düğme kenarlık yarıçapı: 10vw
- Düğme yazı tipi: Olmadan aç
- Üst dolgu: 1vw (masaüstü), 2vw (tablet), 4vw (telefon)
- Alt dolgu: 1vw (masa), 2vw (tablet), 4vw (telefon)
- Sol doldurma: 4vw (masaüstü), 6vw (tablet), 10vw (telefon)
- Sağ dolgu: 4vw (masa), 6vw (tablet), 10vw (telefon)
aralık
Ve özel kenar boşluğu ve dolgu değerleri ekleyerek modül parametrelerini tamamlayın.
- Alt kenar boşluğu: 2vw
- Üst dolgu: 3vw
- Alt doldurma: 3vw
- Sol dolgu: 3vw
- Sağ dolgu: 3vw
3. Stil, yeniden boyutlandırma ve yeniden konumlandırma sütunu
Sütun 2 parametrelerini değiştirme
Gradyan arka planı
Şimdi, bu eğitimin son kısmı, farklı modülleri birleştirmemize izin veriyor. 2. sütun için ayarları açın ve aşağıdaki gradyan arka planını kullanın:
- 1 renk: rgba (43,135,218,0)
- 2 renk: #ffffff
- Gradyan türü: doğrusal
- Başlangıç konumu:% 39
Sınır
Ayrıca yuvarlak köşeler ekleyin.
- Tüm köşeler: 1vw
Gölge kutusu
İnce bir kutu gölgesi ekleyerek derinlik yaratırız.
- Kutu Gölge Bulanıklığı Gücü: 100px
- Gölge rengi: rgba (0,0,0,0,24)
Trafo Çevir
Ve farklı ekran boyutlarında dönüşüm dönüşüm değerlerini değiştirerek sütun ayarlarını tamamlayacağız. Bu adım, sütunu istediğimiz gibi yeniden konumlandırmamızı sağlar. Kendi arka plan resminizi kullanırken, bu seçeneği kesinlikle takdir edeceksiniz!
- Sağ: 0 piksel (ofis), 9vw (tablet ve telefon)
- Alt: -5vw (ofis), 0vw (tablet ve telefon)
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
Son düşünceler
Bu yazıda, Divi'nin yerleşik seçeneklerini ve modüllerini kullanarak arka plan resminizde bir ürünü nasıl çerçeveleyeceğinizi gösterdik. WooCommerce Divi Builder'a dahildir. Aldığınız yaklaşım, kullandığınız arka plan görüntüsüne bağlıdır, ancak bu öğreticiyi okumak genel yaklaşımı anlamanıza yardımcı olacaktır. Ayrıca düzenin JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.
