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.
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, kurun ve etkinleştirin. Divi teması yüklü (veya kullanmıyorsanız Divi Builder eklentisi) Divi teması).
- Eklentiyi kurun ve etkinleştirin WooCommerce. yapılandırırsanız WooCommerce ilk kez mağazanızı hazırlamak için temel kurulum sihirbazını çalıştırmanız gerekecek. Bittiğinde, 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.
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. Sous Veri ürünü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.
7. Ardından, geçiş altındaki Varyasyonlar sekmesinde veri ürünün tüm özelliklerinden varyasyonlar oluşturmak için açılır girişi kullanın.
8. Üç değişken için normal fiyatı ayarlamak üzere açılır menüden "Normal Fiyatları Ayarla" seçeneğini seçin.
9. İletişim kutusunda "50" değerini girin ve Tamam'ı seçin.
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.
Sonra sekmeleri değiştirmek için yeni bir Akordeon modülü ekleyin.
Akordeon Ayarları açılır penceresinde, tek tek akordeon ayarlarını açmak için ilk akordeondaki dişli simgesine tıklayın.
"Ü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.
Dinamik içerik listesinden "Ürün Açıklaması" nı seçin.
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
- 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
- Gövde Yazı Tipi: Lato
- Gövde metin boyutu: 16px
- Gövde yüksekliği: 1.8em
- 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.
- 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
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.
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.
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: Çoğu öğe için varsayılan renk WooCommerce Divi'deki bir ürünün rengi, tema özelleştirme ayarlarının ikincil renk değerinden devralınır. Bu ikincil rengi, renk modülünü woo ile 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.
