Ö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

Başlayalım.

Bir woocommerce ürününe görsel nasıl eklenir

Ü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:

Varsayılan woocommerce simgesi

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:

Wordpress ürün değişikliği nihai sonucu

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.

Örnek web sitesi

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ç.

Divi renklerinin seçimi

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