Ana İçeriğe Geç

Divi'de bir WooCommerce ürününe metin ekleme

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]

Önceki bir derste, biz Divi'yi tanıttınız. Bilmeyenler için Divi ekibi tarafından tasarlanan birinci sınıf bir WordPress temasıdır. Zarif Temalar WordPress ve tasarım eklentileri ve temalar üzerinde çeşitli hizmetler sunar.

Divi duyarlı bir tema ve ikincisi de WooCommerce'a sahip olduğumuz diğer eklentilerle uyumlu. Bugün size WooCommerce ürünlerinize nasıl farklı bir animasyon vereceğinizi göstereceğiz.

Bazen WooCommerce stili, özellikle CSS stiliniz biraz farklıysa, biraz uygunsuz olabilir. Bu öğretici, biraz teknik olacak (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 fareyle 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:

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]

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:

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]

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ğı

Kısa süre önce vurgulu ürün hakkında metin içeren bir siteye göz attım. Elbette bunu, gezinen üründe simgelerden ziyade kelimeler içeren diğer e-ticaret sitelerinden gördüm, bu yüzden bu yeni bir kavram değildi. Bunu bir Divi temasında yapmak zorunda kalmamıştım ve bunu görünce kendime bir meydan okuma belirledim ve bunu uygulamanın gerçekten kolay olduğunu anladım. Çok az kod gerektirdiğ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.

Ç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]

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

Diğer Divi öğreticiler

Bu makale yorumları 5 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üş
10 hisseleri
hisse6
cıvıltı
Enregistrer4