Në një mësim të mëparshëm, ne e prezantove Divi. Për ata që nuk e dinë, Divi është një WordPress theme premium i projektuar nga ekipi Elegant Temat i cili ofron shërbime të ndryshme në WordPress dhe shtojcat dhe temat e dizajnit.

Divi është një temë e përgjegjshme dhe kjo e fundit është e përputhshme me disa shtojca të tjera ndër të tjera që kemi WooCommerce. Sot do t'ju tregojmë se si t'i jepni një animacion të ndryshëm produkteve tuaja WooCommerce.

Ndonjëherë stili i WooCommerce mund të jetë paksa e pamjaftueshme, veçanërisht nëse stili juaj CSS është paksa i ndryshëm. Ky tutorial, i cili do të jetë pak teknik (pak CSS dhe asgjë tjetër), do t'ju lejojë ta korrigjoni këtë.

Mësime të tjera me temë Divi

• faqet e internetit të 5 për përdorim restorant Divi temë
• Si të shtoni tekstin në një Divi produktit Woocommerce
• Si të ndryshoni ngjyrën e menysë në mes të faqeve në Divi
• Karakteristikat që nuk i dini për Divi
• Si të krijoni një shirit në Divi
• Si të redaktoni një rol përdoruesi në Divi

Le të fillojë.

Modifikimi i një ikone për tekstin mbi miun mbi

Si parazgjedhje, kur përdorni WooCommerce me Divi dhe vendosni mbi një produkt, shihni një ikonë të vogël '+' e cila është një shkronjë (make-icon) të propozuar nga Divi dhe i cili është si më poshtë:

Reallyshtë vërtet e lehtë ta ndryshosh atë në një ikonë tjetër në cilësimet, por nëse dëshiron të shtosh disa tekst, a është diçka tjetër? Unë do t'ju tregoj se si ta realizoni këtë me fragmentet e sotme të CSS dhe gjithashtu do të përfshij disa kod opsional për t'i shtuar në faqen tuaj.

Ja çfarë do të kemi përfunduar një herë:

Pse të përdoret teksti në vend të një ikone gjithsesi?

Unë mund të mendoj për disa arsye që mund t'ju bëjnë ta bëni këtë:

Për të përcaktuar, jepni një pamje unike në dyqanin tuaj: Çdo gjë që mund të bëni për të dalluar faqen tuaj të Divi / WooCommerce nga një tjetër është gjithmonë një gjë e mirë.

Përdorimi i një fjale si "View" ose "Buy" mund të rezultojë në më shumë konvertim: Të gjithë duhet të bëjnë atë që është më e mira për faqen e saj të internetit, dhe ju mund të përfitoni nga testimi i integruar A / B në Divi për të ndihmuar me këtë.

Burimi i frymëzimit

Kohët e fundit shfletova një faqe që kishte tekst në lidhje me produktin që rri pezull. Sigurisht që kam parë faqe të tjera të tregtisë elektronike që kanë fjalë dhe jo ikona në produkt që rri pezull, kështu që ky nuk ishte një koncept i ri. Nuk më është dashur kurrë ta bëj këtë në një Tema divi, dhe kur e pashë këtë, i vura vetes një sfidë dhe kuptova se është vërtet e lehtë ta zbatosh këtë. Me shumë pak kod të kërkuar, jeni të sigurt që nuk do të ndikoni në performancën e blogut tuaj.

Implementimi i miut mbi tekstin

Hapi 1: Mbivendosja e ngjyrave

Së pari do të ndryshojmë ngjyrën e mbivendosjes së rri pezull. Kjo është jashtëzakonisht e lehtë për t'u bërë në Divi. Në modulin tuaj të dyqanit Shko te " parametrat e avancuar të dizajnit Dhe zgjidhni ngjyrën tuaj.

Hapi 2: Shtimi i CSS

Kodi i mëposhtëm CSS në " Opsionet e temës> CSS e personalizuar Ose në fletën e stilit të temës së fëmijës suaj.

.woocommerce .et_overlay: para {majtas: 0; margjina e majtë: 0; përmbajtja: 'pamje'; / *** Teksti juaj Këtu *** / font-familja: 'Burimi Pa Pro', Arial! / *** Zgjidhni fontin tuaj *** / teksti-transformimi: shkronja e sipërme; madhësia e fontit: 24px; ngjyra: #fff; / *** Vendosni ngjyrën e tekstit *** / peshën e shkronjave: të theksuara; drejtimi i tekstit: qendër; gjerësia: 100%; mbushje: 5px 0; }

Nëse dëshironi që produktet tuaja të jenë mjaft të rrumbullakëta, mund të shtoni këtë kod opsional:

.woocommerce ul.products li.product një img, .et_overlay {border-radius: 50%; }

Kjo është e gjitha!

Tani mund të vizitoni dyqanin tuaj dhe të shihni se si ndryshimet tuaja merren parasysh.

[vc_row center_row = "po"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "i sheshtë" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-shkarkimi"] SHKARKO TEMËN DIVI [/ vcex_button] [_colum] [/_n] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "cent" font_family = "Raleway" font_weight = "700 ″ style =" i sheshtë "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffrightnload "Faqja e të dhënave" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Tutoriale të tjera Divi

• faqet e internetit të 5 për përdorim restorant Divi temë
• Si të shtoni tekst në një produkt Divi WooCommerce
• Si të ndryshoni ngjyrën e menysë në mes të faqeve Divi
• Si të personalizoni rrjetet e një blogu me Divi
• Si të përdorni redaktorin e roleve Divi në WordPress
• Si të krijoni një rrëshqitës Divi në ekran të plotë
• Si ta ndryshoni ngjyrën e menusë në mes të faqeve Divi
• Karakteristikat që ju ndoshta nuk i dini për Divi
• Si të përdorni Divi Builder në WordPress
• Si të përdorni modulin scrolling video Divi
• Si të përdorni modulin Dili Builder Flip
• Si të shtoni një modul dëshmimi në Divi Builder
• Si të përdoret moduli i tekstit Divi
• Si të krijoni një shirit në Divi
• Si të redaktoni një rol të përdoruesit të Divi
• Si të përdorni modulin Divi Social Media
• Si të përdorni modulin e dyqaneve në temën WordPress Divi
• Si të përdorni modulin e sidebarit Divi
• Si të përdorni Modulin e Tabelës së Çmimeve të Divi-t
• Si të përdoret moduli i titullit të botimeve Divi
• Si të shtoni një modul video të Divi
• Si të përdorni modulin e lundrimit të artikullit
• Si të përdorni modulin e kërkimit Divi
• Si të përdorni modulin e portofolit Divi
• Si të përdorni modulin e personit në Divi Builder
• Si të përdorni modulin e portofolit me filtrin Divi
• Si të përdorni modulin e plotë slider width
• Si të përdorni modulin e imazhit të ndërtuesit Divi
• Si të përdorni modulin e navigimit të plotë të Divi Builder
• Si të përdorni modulin e galerisë së imazheve
• Si të përdorni modulin e kartës me gjerësi të plotë Divi Builder
• Si të përdorni modulin e Portofolit të Divi Full Width
• Si të përdorni modulin e headerit me gjerësi të plotë Divi
• Si të përdorni Modulin e Divi Counter
• Si të përdorni rrëshqitësin e artikujve në Divi Builder
• Si të përdorni modulin Optika të Divi Email