Într-un tutorial anterior, noi ai introdus Divi. Pentru cei care nu știu, Divi este o temă premium WordPress concepută de echipă Elegant Themes care oferă diverse servicii pe WordPress și plugin-uri și teme de design.

Divi este o temă receptivă, iar acesta din urmă este compatibil cu alte câteva pluginuri, printre altele pe care le avem WooCommerce. Astăzi vă vom arăta cum să acordați o animație diferită produselor dvs. WooCommerce.

Uneori stilul WooCommerce poate fi un pic nepotrivit, mai ales dacă stilul CSS este puțin diferit. Acest tutorial, care va fi un pic tehnic (putin CSS si nimic altceva), vă va permite să remediați acest lucru.

Alte tutoriale pe tema Divi

Să începem.

Cum se adaugă o imagine unui produs woocommerce

Modificarea unei pictograme pentru text peste mouse

În mod implicit, când utilizați WooCommerce cu Divi și plasați cursorul peste un produs, vedeți o mică pictogramă „+” care este un font (make-icon) propus de Divi și care este următorul:

Pictogramă implicită de woocommerce

Este foarte ușor să schimbi asta cu o pictogramă diferită din setări, dar dacă vrei să adaugi un text, este altceva? Vă voi arăta cum să realizați acest lucru cu fragmentele CSS de astăzi și voi include, de asemenea, cod opțional pe care să îl adăugați pe site-ul dvs.

Iată ce vom fi completat odată:

Rezultatul final al modificării produsului Wordpress

De ce oricum folosiți text în loc de pictogramă?

Mă pot gândi la câteva motive care te pot face să faci acest lucru:

Pentru a defini, dați un aspect unic magazinului dvs.: Orice lucru pe care îl puteți face pentru a distinge site-ul dvs. Divi / WooCommerce de altul este întotdeauna un lucru bun.

Utilizarea unui cuvânt precum „Vizualizare” sau „Cumpărare” poate duce la mai multe conversii: Toți trebuie să facă ceea ce este mai bun pentru site-ul său web și puteți profita de testarea A / B integrată pe Divi pentru a vă ajuta.

Sursa de inspirație

De curând am navigat pe un site care avea text despre produsul hover. Desigur, l-am văzut de pe alte site-uri de comerț electronic care au cuvinte mai degrabă decât pictograme pe produsul care se deplasează, deci acesta nu a fost un concept nou. Nu trebuia să fac asta niciodată pe o temă Divi și, când am văzut acest lucru, mi-am pus o provocare și mi-am dat seama că este într-adevăr ușor să implementez acest lucru. Cu foarte puțin cod necesar, sunteți sigur că nu va afecta performanța blogului dvs.

Exemplu de site web

Implementarea mouse-ului peste text

Pasul 1: acoperirea de culoare

Vom schimba mai întâi culoarea suprapunerii pe hover. Acest lucru este extrem de ușor de făcut pe Divi. În modulul magazin, accesați „ parametri avansați de proiectare avansată Și selectați-vă culoarea.

Selecția culorilor divi

Pasul 2: Adăugarea CSS

Următorul cod CSS din " Opțiuni temă> CSS personalizat Sau pe foaia de stil a temei copilului tău.

.woocommerce .et_overlay: înainte {stânga: 0; margine-stânga: 0; conținut: „vizualizare”; / *** Textul tău aici *** / font-family: „Source Without Pro”, Arial! / *** Alege-ți fontul *** / text-transform: mai mare; font-size: 24px; culoare: #fff; / *** Setați culoarea textului *** / font-weight: bold; aliniere text: centru; latime: 100%; căptușire: 5px 0; }

Dacă doriți ca produsele dvs. să fie destul de rotunde, puteți adăuga acest cod opțional:

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

Asta este!

Acum puteți vizita magazinul dvs. și puteți vedea cum sunt luate în considerare modificările dvs.

[vc_row center_row = "da"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

10 acțiuni
acțiune6
tweet
Registru4