Önceki bir derste, biz Divi'yi tanıttınız. Bilmeyenler için Divi bir WordPress tema ekip tarafından tasarlanan premium Zarif Temalar WordPress ve tasarım eklentileri ve temalar üzerinde çeşitli hizmetler sunar.
Divi duyarlı bir temadır ve ikincisi, sahip olduğumuz diğer eklentilerin yanı sıra diğer birçok eklentiyle uyumludur. WooCommerce. Bugün size ürünlerinize nasıl farklı bir animasyon verebileceğinizi göstereceğiz. WooCommerce.
Bazen tarzı WooCommerce özellikle CSS stiliniz biraz farklıysa biraz yetersiz kalabilir. Biraz teknik olacak bu eğitim (biraz CSS ve başka bir şey yok), bunu düzeltmenize izin verecektir.
Divi konulu diğer dersler
- restoran kullanımı Divi tema için 5 siteleri
- Bir WooCommerce ürün Divi metni nasıl eklenir
- Divi sayfaları arasındaki menü rengini değiştirme
- Divi hakkında bilmediğiniz özellikler
- Divi'de kaydırıcı nasıl oluşturulur
- Divi'de bir kullanıcı rolü nasıl düzenlenir
Başlayalım.
Üzerinden fare ile metin için bir simge değiştirme
Varsayılan olarak, WooCommerce'i Divi ile kullandığınızda ve bir ürünün üzerine geldiğinizde, yazı tipi olan küçük bir '+' simgesi görürsünüz (make-ikon) Divi tarafından önerilen ve aşağıdaki gibidir:
Bunu ayarlarda farklı bir simgeye değiştirmek gerçekten çok kolay, ancak biraz metin eklemek istiyorsanız, bu başka bir şey mi? Bunu bugünün CSS parçacıklarıyla nasıl başaracağınızı göstereceğim ve ayrıca sitenize eklemek için isteğe bağlı kod ekleyeceğim.
İşte bir zamanlar tamamlayacağımız şey:
Neden zaten bir simge yerine metin kullanasınız ki?
Bunu yapmanıza neden olabilecek bazı sebepleri düşünebilirim:
Mağazanıza benzersiz bir görünüm vermek için: Divi / WooCommerce sitenizi diğerinden ayırmak için yapabileceğiniz her şey her zaman iyi bir şeydir.
"Görüntüle" veya "Satın Al" gibi bir kelime kullanmak daha fazla dönüşüm sağlayabilir: Herkes kendi web sitesi için en iyisini yapmalı ve Divi'de entegre A / B testlerinden yararlanarak bu konuda yardımcı olabilirsiniz.
İlham kaynağı
Geçenlerde ürünle ilgili metin içeren bir siteye göz attım. Elbette ürünün üzerinde ikon yerine kelimelerin bulunduğu başka e-ticaret sitelerinde de gördüm, yani bu yeni bir konsept değildi. Bunu hiç yapmak zorunda kalmamıştım Divi temasıve bunu gördüğümde kendime bir meydan okuma koydum ve bunu uygulamanın gerçekten kolay olduğunu anladım. Çok az kod gerektiğinden, blogunuzun performansını etkilemeyeceğinizden emin olabilirsiniz.
Metnin üzerine fare uygulamak
Adım 1: Renk yerleşimi
Önce, fareyle üzerine gelindiğinde fareyle üzerine gelindiğinde yer paylaşımının rengini değiştireceğiz. Bunu Divi'de yapmak son derece kolaydır. Mağaza modülünüzde " gelişmiş gelişmiş tasarım parametreleri Ve rengini seç.
2. Adım: CSS Ekleme
Aşağıdaki CSS kodu " Tema seçenekleri> Özel CSS Veya çocuk temanızın stil sayfasında.
.woocommerce .et_overlay: önce {left: 0; sol kenar boşluğu: 0; içerik: 'görünüm'; / *** Metninizi Burada *** / font-family: 'Pro Olmadan Kaynak', Arial! / *** Yazı tipini seç *** / text-transform: largecase; yazı tipi boyutu: 24px; renk: #fff; / *** Metin rengini ayarlama *** / font-weight: bold; metin hizalama: orta; genişlik:% 100; dolgu maddesi: 5px 0; }
Ürünlerinizin oldukça yuvarlak olmasını istiyorsanız, isteğe bağlı bu kodu ekleyebilirsiniz:
.woocommerce ul.products li.product bir img .et_overlay {sınır yarıçapı: 50%; }
İşte bu kadar!
Artık mağazanızı ziyaret edebilir ve değişikliklerin nasıl dikkate alındığını görebilirsiniz.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" boş "layout =" genişletilmiş "align =" center "font_family =" Raleway "font_weight =" 700 ″ stil = "düz" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI TEMAINI İNDİRİN [/ vcex_button] [/ width_column] [»vc_column » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "boş" düzen = "genişletilmiş" hizalama = "orta" font_family = "Raleway" font_weight = "700 ″ stil =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-indirme "] ŞABLONLARI İNDİR DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Diğer Divi öğreticiler
- restoran kullanımı Divi tema için 5 siteleri
- Bir Divi WooCommerce ürününe metin ekleme
- Divi sayfaları arasındaki menü rengini değiştirme
- Bir blog'un ızgaralarını Divi ile kişiselleştirme
- Nasıl WordPress üzerinde rol Divi editörü kullanımı
- Tam ekran Divi sürgüsü nasıl oluşturulur
- Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
- Divi hakkında muhtemelen bilmediğiniz özellikler
- WordPress üzerinde Divi Builder nasıl kullanılır
- Divi video kaydırma modülü nasıl kullanılır
- Divi Builder Flip modülü nasıl kullanılır
- Divi Builder'da referans modülü nasıl eklenir?
- Divi metin modülü nasıl kullanılır?
- Divi'de kaydırıcı nasıl oluşturulur
- Divi kullanıcı rolü nasıl düzenlenir
- Divi Sosyal Medya modülü nasıl kullanılır?
- WordPress Divi konulu mağaza modülü nasıl kullanılır?
- Divi kenar çubuğu modülü nasıl kullanılır
- Divi Fiyat Tablosu Modülünün Kullanımı
- Divi yayınlarının başlık modülünü nasıl kullanırım
- Divi video modülü nasıl eklenir
- Makale navigasyon modülü nasıl kullanılır
- Divi arama modülü nasıl kullanılır?
- Divi cüzdan modülü nasıl kullanılır?
- Divi Builder'da kişi modülünün kullanımı
- Divi filtreli cüzdan modülü nasıl kullanılır
- Tam genişlikte sürgü modülü nasıl kullanılır
- Divi Builder Görüntü Modülü nasıl kullanılır?
- Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
- Resim galerisi modülü nasıl kullanılır?
- Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
- Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
- Divi tam genişlikli başlık modülü nasıl kullanılır?
- Divi Sayaç Modülünün Kullanımı
- Divi Builder'daki makaleler sürgüsünü kullanma
- Divi Email Optin modülü nasıl kullanılır?
Ürün başına farklı metin mi? yeni ürünlere eklemek mi diyorsun? bu nasıl? ve nerede?
Süper makale, bu bahşiş için teşekkür ederim. Ve eğer ürüne göre farklı bir metin istiyorsak, nasıl?
Merhaba Brice,
Bu durumda, yeni WooCommerce ürününe farklı bir metin eklersiniz.
Süper! Bu bahşiş için teşekkür ederim.
hiçbir şeyden