Divi Sütun Seçenekleriyle Arka Plan Resminizde Bir Ürün Nasıl Çerçevelenir

Divi'nin WooCommerce modülleri ile Divi'yi kullanarak gerçekleştirebileceğiniz tonlarca tasarım var. Bugünün Divi eğitiminde, yalnızca Divi'nin yerleşik seçeneklerini kullanarak gerçekleştirebileceğiniz başka bir tasarım fikriyle size ilham vermeye çalışacağız. Daha spesifik olarak, arka plan resminizde bir ürünü nasıl çerçeveleyeceğinizi göstereceğiz. Sonuç tamamen arka plan resminize bağlıdır, ancak bu öğreticiyi gözden geçirirseniz, tekniği kendi web siteniz için kişiselleştirmek için hangi adımları atacağınızı bileceksiniz! Eğiticinin 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

Çerçeve Ürün Düzenini ÜCRETSİZ İndirin

Ücretsiz çerçeve ürün düzenine el atmak 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!

1. Duyarlı Arka Plan Resmiyle Bölüm Oluşturun

Yeni Bölüm Ekle

Duyarlı Arka Plan Resmi

Bir ürünü arka plan resminizde ç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 resimleri yükleyin. Kullandığımız her iki resmi de bu yazının başında indirebildiğiniz klasörde bulabilirsiniz.

• Arka plan resmi: Manzara
• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Üst Merkez

• Arka plan resmi: Kare

aralık

Tasarım sekmesine geçin ve farklı ekran boyutlarına bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: 3vw (Masaüstü), 0vw (Tablet ve Telefon)
• Alt Dolgu: 3vw (Masaüstü), 7vw (Tablet), 18vw (Telefon)

Sınır

Kenarlık ekleyerek bölüm ayarlarını tamamlayın.

• Kenar Genişliği: 2vw
• Kenar Rengi: #ffffff

2. Sütuna Farklı Çerçeve Elemanları Ekleyin

Yeni Satır Ekle

Sütun Yapısı

Artık arka plan görselinde de fark edebileceğiniz gibi ürün arka plan görselinin sağ tarafında yer alıyor. Bölümümüzde yeni bir satır için eşleşen bir sütun yapısı seçeceğiz. Bu durumda, aşağıdaki sütun yapısı budur:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın 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: %100
• Maksimum Genişlik: %100

aralık

Bazı özel sol ve sağ dolgu ekleyerek satır ayarlarını tamamlayın.

• Sol Dolgu: 5vw
• Sağ Dolgu: 5vw

Sütun 2'ye Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

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

Sonraki boşluk ayarlarında modülün yüksekliğini artıracağız.

• Üst Dolgu: 22vw (Masaüstü), 39vw (Tablet), 35vw (Telefon)
• Alt Dolgu: 15vw (Masaüstü), 39vw (Tablet), 35vw (Telefon)

Sınır

Ve biz de bir sınır ekleyeceğiz.

• Kenar Genişliği: 3vw
• Alt Kenar Genişliği: 1vw
• Kenar Rengi: rgba(255,255,255,0.7)

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

Dinamik İçerik

Bir Woo Başlık Modülü olan bir sonraki modüle geçin. İstediğiniz bir ürünü seçin.

• Ürün: Listede Bul

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ün tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: İş Sans
• Başlık Metin Boyutu: 2.5vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

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

Dinamik İçerik

İhtiyacımız olan bir sonraki modül bir Woo Açıklama Modülü. İstediğiniz bir ürünü seçin.

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

Arka plan rengi

Modülün arka plan rengini uygun şekilde değiştirin:

• Arka Plan Rengi: rgba(255,255,255,0.7)

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.9vw (Masaüstü), 2.2vw (Tablet), 2.8vw (Telefon)
• Başlık Satırı Yüksekliği: 2.2em

aralık

Bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

Sütun 2'ye Woo Fiyat Metin Modülü Ekle

Dinamik İçerik

Sırada Woo Price Metin Modülü var. İstediğiniz bir ürünü seçin.

• Ürün: Listede Bul

Arka plan rengi

Arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.7)

Fiyat Metni Ayarları

Modülün tasarım sekmesine gidin ve fiyat metin ayarlarını buna göre değiştirin:

• Fiyat Yazı Tipi: İş Sans
• Fiyat Metin Rengi: #000000
• Fiyat Yazı Boyutu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

aralık

Bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

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

Dinamik İçerik

Woo Sepete Ekle Modülü olan bir sonraki ve son modüle geçin! İstediğiniz bir ürünü seçin.

• Ürün: Listede Bul

Arka plan rengi

Arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.7)

Alan Ayarları

Modülün alan ayarlarını da değiştirin.

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

• Alanlar Alt Kenar Genişliği: 1px
• Alanlar Alt Kenarlık Rengi: #000000

Düğme Ayarları

Düğmeyi aşağıdaki gibi şekillendirerek devam edin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1.1vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 10vw
• Düğme Yazı Tipi: Sans'ı Aç

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 4vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 4vw (Telefon)
• Sol Dolgu: 4vw (Masaüstü), 6vw (Tablet), 10vw (Telefon)
• Sağ Doldurma: 4vw (Masaüstü), 6vw (Tablet), 10vw (Telefon)

aralık

Ve bazı özel kenar boşluğu ve dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Alt Marj: 2vw
• Üst Dolgu: 3vw
• Alt Dolgu: 3vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

3. Sütunu Stil, Yeniden Boyutlandırma ve Yeniden Konumlandırma

Sütun 2 Ayarlarını Değiştir

Degrade Arka Plan

Şimdi, bu öğreticinin son kısmı, farklı modülleri birleştirmemize izin veriyor. Sütun 2 ayarlarını açın ve bunun için aşağıdaki gradyan arka planını kullanın:

• Renk 1: rgba(43,135,218,0)
• Renk 2: #ffffff
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %39

Sınır

Bazı yuvarlak köşeler de ekleyin.

• Tüm Kornerler: 1vw

Kutu Gölge

Ayrıca ince bir kutu gölgesi ekleyerek biraz derinlik yaratıyoruz.

• Kutu Gölge Bulanıklığı Gücü: 100 piksel
• Gölge Rengi: rgba(0,0,0,0.24)

Dönüştür Çeviri

Ve farklı ekran boyutlarında dönüştürme çevirme 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, kesinlikle bu seçeneğin keyfine varacaksınız!

• Sağ: 0px (Masaüstü), 9vw (Tablet ve Telefon)
• Alt: -5vw (Masaüstü), 0vw (Tablet ve Telefon)

Ö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'nin yerleşik seçeneklerini ve Divi Builder'da bulunan WooCommerce modüllerini kullanarak arka plan resminizde bir ürünü nasıl çerçeveleyeceğinizi gösterdik. Aldığınız yaklaşım, kullandığınız arka plan görüntüsüne bağlıdır, ancak bu öğreticiyi gözden geçirmek, genel yaklaşımı anlamanıza yardımcı olacaktır. Düzenin 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.