Divi'de WooCommerce Ürün Bilgisi Akordiyonu Oluşturmak için Dinamik İçerik Nasıl Kullanılır

Divi'de bir ürün sayfası oluştururken, dinamik içerik kullanarak ürün bilgilerini görüntülemek için akordeon modülünü kullanabiliriz. Bu size ürün sayfalarına benzersiz bir tasarım kazandıracak ve sayfadaki değerli alanı koruyacaktır.

Bu öğreticide, bir ürün bilgisi akordeonu oluşturmak için Divi'nin dinamik içerik işlevini nasıl kullanacağınızı ve ayrıca Divi Visual Builder'ı kullanarak akordeonun (ve içeriğinin) nasıl tasarlanacağını göstereceğiz.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz tasarıma hızlı bir bakış.

Ürün Bilgisi Akordeon Düzenini ÜCRETSİZ olarak indirin

Bu eğitimdeki yerleşim tasarımına 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.

Youtube Kanalımıza Abone Olun

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Aynı sonuçları görmek için bu öğreticide açıklandığı gibi bir ürün kurulumuna sahip olmanız gerektiğini unutmayın.

Hadi öğreticiye geçelim mi?

Başlarken

Başlamak için aşağıdakileri yapmanız gerekir:

Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) kurun ve etkinleştirin.

WooCommerce eklentisini kurun ve etkinleştirin. WooCommerce'i ilk kez kuruyorsanız, mağazanızı hazırlamak için temel kurulum sihirbazını çalıştırmanız gerekir. Bittiğinde, yeni ürünlerinizi eklemeye hazırsınız.

Aşağıda belirtildiği gibi yeni bir ürün oluşturun. Yeni bir ürünün nasıl ekleneceği hakkında daha fazla bilgi için bu eğiticiye göz atın.

Örnek Ürünü Ayarlama

Bu öğretici için örnek ürünü ayarlamak için Ürünler > Yeni Ekle'ye gidin. Ürüne “Masaj (tek seans)” adını verin ve Divi Builder'ı kullanmak için tıklayın.

Ardından, aşağıdaki Ürün sayfası ayarlarını ve ürün bilgilerini güncelleyin:

1. Divi Sayfa Ayarları altında, Kenar Çubuğu Yok Sayfa düzenini seçin.

2. Bir Ürün Kategorisi Ekle/seç

3. Ürün Resmini Ekleyin

4. Aşağıdaki ürün uzun açıklama içeriğini ekleyin:

<h3>Quality Massage</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li>Vestibulum sagittis orci ac odio dictum tincidunt.</li>
 	<li>Donec ut metus leo.</li>
</ul>

<h3>Our Gaurantee</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

5. Ürün Verileri altında, ürün türünü Değişken Ürün olarak değiştirin.

6. Aşağıdaki Değerlere sahip “Tür” adlı bir Nitelik ekleyin: İsveççe | Sıcak taş | Aromaterapi | Derin doku. "Varyasyonlar için kullanılır"ı seçtiğinizden emin olun.

7. Ardından, ürün verileri geçiş düğmesinin altındaki varyasyonlar sekmesinde, tüm özelliklerden varyasyonlar oluşturmak için açılır girişi kullanın.

8. Üç değişkenin tümü için normal fiyatı ayarlamak için açılır menüden "Normal fiyatları ayarla"yı seçin.

9. Açılır kutuya “50” değerini girin ve Tamam'ı seçin.

10. Bitirdikten sonra ürünü kaydedin veya yayınlayın.

Artık özel bir ürün bilgisi Akordeon ile mizanpajınızı tasarlamaya hazırsınız.

Divi'de Dinamik İçerikli Ürün Bilgisi Akordiyonu Oluşturma

Varsayılan ürün düzeni, çeşitli Woo Modüllerini kullanarak ürün bilgilerini görüntüler. Bu örnekte, üç ana ürün bilgisi parçasını görüntülemek için akordeon kullanmak istiyoruz: ürün açıklaması, ürün ek bilgileri ve ürün incelemeleri. Bu içerik parçalarının üçü de şu anda woo tabs modülünün içinde görüntüleniyor. Tek yapmamız gereken, woo tabs modülünü silip, dinamik içerik yoluyla alınan aynı bilgi ile bir akordeon modülü ile değiştirmek.

İşte nasıl yapılacağı.

İlk olarak, görsel oluşturucuyu dağıtmak için ön uçta Divi'yi kullanmak için tıklayın. Ardından Woo Tabs Modülünü silin.

Ardından sekmeleri değiştirmek için yeni bir Akordeon Modülü ekleyin.

Akordeon Ayarları açılır penceresinde, ilk akordeondaki dişli simgesine tıklayın, bireysel akordeon ayarlarını açın.

“Ürün Hakkında” başlığını girin.

Ardından, gövde içeriği giriş kutusunun üzerine gelin ve dinamik içerik simgesini tıklayın.

Dinamik içerik listesinden "Ürün Açıklaması"nı seçin.

Bu, arka uçtaki ürün için belirlediğimiz ürün uzun açıklamasını çekecektir.

İlk akordeon içeriğini yerleştirdikten sonra, ikinci akordeon için ayarları açın ve aşağıdakileri güncelleyin:

• Başlık: Özellikler

Ardından “Ürün Ek Bilgileri” dinamik içeriğini gövdeye ekleyin.

İkinci akordeon içeriği hazır olduktan sonra yeni bir akordeon öğesi ekleyin ve o akordeon için ayarları aşağıdaki gibi güncelleyin:

• Başlık: İncelemeler

Ardından, ürün inceleme öğesini/içeriği çekmek için gövdeye "Ürün İncelemeleri" dinamik içeriğini ekleyin.

NOT: Canlı sayfada içeriği görebilmek için ürüne en az bir inceleme eklediğinizden emin olun.

Ürün Bilgisi Akordiyonunu ve İçeriğini Divi ile Tasarlama

Artık ürün bilgi akordeonumuz, ürün bilgilerini görüntülemek için gereken dinamik içeriğe sahip olduğuna göre, yerleşik akordeon modülü ayarlarını kullanarak akordeon stilini oluşturmaya hazırız.

Akordeon Modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Simge Rengi: #ff9375
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 26px

• Kapalı Geçiş Arka Plan Rengi: #ffffff
• Açık Başlık Metin Rengi: #ff9375
• Başlık Metin Rengi: #222222
• Başlık Yazı Tipi: Lato
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Boyutu: 20px
• Başlık Harf Aralığı: 0.2em
• Başlık Satırı Yüksekliği: 2em

• Gövde Yazı Tipi: Lato
• Gövde Metin Boyutu: 16px
• Gövde Çizgisi Yüksekliği: 1.8em

• Bağlantı Metni Rengi: #ff9375

Bu, inceleme yıldız derecelendirmesi gibi şeyler dahil her akordeon için dinamik içerik içinde sahip olduğunuz tüm bağlantıları hedefleyecektir.

• Sırasız liste metin rengi: #ff9375
• Sırasız Liste Stil Türü: Daire
• Sırasız Liste Öğesi Girintisi: %5

• Kenar Genişliği: 0px
• Üst Kenar Genişliği: 1px
• Üst Kenar Rengi: #222222

Ve son bir adım olarak, akordeon geçişleri arasındaki varsayılan marjı çıkarmak için küçük bir css parçacığı ekleyelim.

Gelişmiş sekmesinin altında, Toggle öğesine aşağıdaki CSS'yi ekleyin:

margin-bottom: 0px;

Şimdi ürün bilgisi akordeonunun son tasarımını kontrol edelim.

Düzende Son Ayarlamalar

Akordeonun tasarımına uyması için düzende yapabileceğimiz birkaç ayar var. Örneğin, modüllerin her biri için yazı tipini Lato'ya ayarlayabilir, değişken açılır listesinin etrafına özel bir kenarlık ve kenarlık yarıçapı ekleyebilir ve sepete ekle düğmesini eşleşecek düz bir arka plan rengiyle güncelleyebiliriz.

Bir kez yapıldığında, işte nihai sonuç.

Bu düzen tasarımını yukarıda ücretsiz indirme olarak ekledim. Kendiniz kontrol etmekten çekinmeyin. Aynı sonuçları görmek için bu öğreticide açıklanan ürün kurulumuna sahip olmanız gerektiğini unutmayın.

NOT: Divi'deki bir ürün için WooCommerce öğelerinin çoğu için varsayılan renk, Tema Özelleştirici Ayarlarındaki ikincil renk değerinden miras alınır. Woo modülü başına renkleri güncellemek yerine bu ikincil rengi bir kez güncellemek daha kolay olabilir.

Son düşünceler

Öğrendiğimiz gibi, Woo Modülleri dinamik ürün bilgilerini çekmek için kullanılabilecek tek unsur değildir. Ürün bilgisi akordeonu, ürün bilgilerini benzersiz ve özlü bir şekilde görüntülemek için herhangi bir Divi modülünü nasıl kullanabileceğinizin harika bir örneğidir. Ürün sayfalarınız için yeni ve heyecan verici akordeon tasarımlarını keşfetmekten çekinmeyin. Ve elbette, benzer sonuçlar elde etmek için bir akordeon yerine birden çok geçiş modülü kullanabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!