Ana İçeriğe Geç

Divi ile WooCommerce ürününe bilgi akordeonları nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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, sayfadaki değerli alanı korurken, ürün sayfaları için size benzersiz bir tasarım sağlayacaktır.

Bu eğitimde, Divi'nin dinamik içerik özelliğini bir ürün bilgisi akordiyonu oluşturmak için nasıl kullanacağınızı ve Divi Görsel Oluşturucu kullanarak akordeonu (ve içeriğini) nasıl tasarlayacağınızı göstereceğiz.

Başlayalım.

anket

İşte bu eğitimde yapacağımız tasarımın bir önizlemesi.

Divi akordeon tasarımı

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

Commencer

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 gerekecektir. Tamamlandığında, yeni ürünlerinizi eklemeye hazırsınız.
  • Aşağıda gösterildiği gibi yeni bir ürün oluşturun.

Örnek ürünün ayarlanması

Bu eğitici için örnek ürünü yapılandırmak üzere Ürünler> Yeni Ekle'ye gidin. Ürüne "Masaj (tek seans)" başlığını verin ve Divi Builder'ı kullanmak için tıklayın.

Divi 1 woocommerce ürünü oluşturun

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 düzenini seçin.

2. Ürün kategorisi ekle / seç

3. Ürün resmi ekleyin

4. Açıklamanın içeriğini ekleyin.

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 özellik ekleyin: İsveççe | Sıcak taş | Aromaterapi | Derin doku. "Varyasyonlar için kullanıldı" ı seçtiğinizden emin olun.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Tam genişlikli divi modeli

7. Ardından, Ürün Verileri Geçişinin altındaki Varyasyonlar sekmesinde, tüm özelliklerden varyasyonlar oluşturmak için açılır girişi kullanın.

Woocommerce varyasyonları oluşturun
Woocommerce ürün çeşitleri

8. Üç değişken için normal fiyatı ayarlamak üzere açılır menüden "Normal Fiyatları Ayarla" seçeneğini seçin.

Normal fiyat varyasyonlarını tanımlayın woocommerce

9. İletişim kutusunda "50" değerini girin ve Tamam'ı seçin.

Woocommerce fiyat değeri belirleyin

10. bir İşiniz bittiğinde, ürünü kaydedin veya yayınlayın.

Artık mizanpajınızı özel bir Ürün Akordeonuyla tasarlamaya başlayabilirsiniz.

Divi'de dinamik içerikli Ürün Bilgisi akordiyonunun oluşturulması

Varsayılan ürün düzeni, çeşitli Woo modüllerini kullanarak ürün bilgilerini görüntüler. Bu örnek için, ürünle ilgili üç ana bilgiyi görüntülemek için akordeonu kullanmak istiyoruz: ürün açıklaması, ek ürün bilgileri ve ürün incelemeleri. Bu üç içerik parçası şu anda woo tabs modülünde görüntülenmektedir. Tek yapmamız gereken, woo tabs modülünü çıkarmak ve onu dinamik içerik yoluyla tanıtılan bilgilerin aynısı olan bir akordeon modülüyle değiştirmek.

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

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

Woocommerce modülünü kaldırın

Sonra sekmeleri değiştirmek için yeni bir Akordeon modülü ekleyin.

Woocommerce akordeon

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

Accordeon ve divi parametreleri

"Ürün hakkında" başlığını girin.

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Dinamik wordpress woocommerce içeriği kullanın

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

Ürün açıklaması woocommerce

Bu, arka uçtaki ürün için tanımladığımız ürünün uzun tanımını görüntüler.

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

  • Başlık: Özellikler

Sonra dinamik içeriği "Ek Ürün Bilgisi" gövdeye ekleyin.

İkinci akordeon içeriği hazır olduğunda, yeni bir akordeon elemanı ekleyin ve akordeon ayarlarını aşağıdaki gibi güncelleyin:

  • Başlık: Ek Bilgi

Ardından, ürün incelemesinin öğesini / içeriğini yerleştirmek için dinamik içerik olan "Ürün Yorumları" nı gövdeye ekleyin.

NOT: Canlı sayfadaki içeriği görmek için en az bir ürün incelemesi eklediğinizden emin olun.

Divi ile ürün ve içerik anlaşmasının tasarımı

Ürün bilgilerimiz akordeonumuz, ürün bilgilerini görüntülemek için dinamik içeriğe sahip olduğuna göre, yerleşik akordeon modülünün ayarlarını kullanarak bunu özelleştirmeye 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
Yapılandırma yazı tipi simgesi akordeonlar
  • Arka plan rengini değiştir: #ffffff
  • Açık metin başlığı Renk: #ff9375
  • Metin Başlığı: #222222
  • Başlık Yazı Tipi: Lato
  • Başlık Yazı Tipi: Kalın
  • Başlık Yazı Tipi Stili: TT
  • Metin Başlığı Boyutu: 20px
  • Başlığın harflerinin boşluğu: 0.2em
  • Başlık satırının yüksekliği: 2em
Woocommerce panel yapılandırması
  • Gövde Yazı Tipi: Lato
  • Gövde metin boyutu: 16px
  • Gövde yüksekliği: 1.8em
Woocommerce akordeon gövde yazı tipi yapılandırması
  • Bağlantı metni rengi: #ff9375

Bu, yıldız sayısı gibi her akordeon için dinamik içerikteki tüm bağlantıları hedefleyecektir.

Woocommerce bağlantı renk yapılandırması
  • Sırasız listenin metin rengi: # ff9375
  • Sırasız liste stili türü: Daire
  • Sırasız liste öğesi girintisi:% 5
  • Kenarlığın genişliği: 0px
  • Üst kenarlığın genişliği: 1px
  • Üst kenarlığın rengi: #222222
Akordeon sınır yapılandırması divi woocommerce

Ve son adım için, akordeon ölçekleri arasındaki varsayılan sınırı çıkarmak için küçük bir css özü ekleyelim.

Gelişmiş sekmesinde, Geçiş öğesine aşağıdaki CSS'yi ekleyin:

margin-bottom: 0px;

Şimdi ürün bilgisi akordeonunun son tasarımına bakalım.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Ürün bilgisi divi akordeon

Düzende son ayarlamalar

Akordeonun tasarımına uyması için yerleşim düzeninde birkaç ayarlama yapılabilir. Örneğin, modüllerin her birinin yazı tipini Lato olarak 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 düz bir arka plan rengiyle güncelleyebiliriz. ona uyar.

Bir kez yapılırsa, işte sonuç budur.

Ürün bilgisi divi akordeon

Bu tasarımı yukarıya ücretsiz olarak ekledim. Lütfen kendiniz kontrol etmekten çekinmeyin. Aynı sonuçları elde etmek için bu öğreticide açıklanan ürün yapılandırmasına sahip olmanız gerektiğini unutmayın.

NOT: Divi'deki bir ürünün çoğu WooCommerce öğesinin varsayılan rengi, temanın özelleştirme ayarlarının ikincil renk değerinden miras alınır. Renkler değiştirildikten sonra bu ikincil rengi güncellemek daha kolay olabilir.

Son düşünceler

Öğrendiğimiz gibi, dinamik ürün bilgilerini çıkarmak için kullanılabilecek tek şey Woo modülleri değildir. Product Information Accordion, ürün bilgilerini benzersiz ve özlü bir şekilde görüntülemek için herhangi bir Divi modülünü nasıl kullanabileceğinizi gösteren harika bir örnektir. Ürün sayfalarınız için yeni ve heyecan verici akordeon tasarımları keşfetmekten çekinmeyin. Ve tabii ki, benzer sonuçlar elde etmek için akordeon yerine birden fazla rocker modülü kullanabilirsiniz.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer