Într-un tutorial anterior, noi ai introdus Divi. Pentru cei care nu știu, Divi este un WordPress temă premium conceput de echipă Elegant Themes care oferă diverse servicii pe WordPress și plugin-uri și teme de design.
Divi este o temă receptivă, iar aceasta din urmă este compatibilă cu alte câteva plugin-uri, printre altele pe care le avem WooCommerce. Astăzi vă vom arăta cum să oferiți o animație diferită produselor dvs WooCommerce.
Uneori stilul de WooCommerce poate fi puțin inadecvat, mai ales dacă stilul dvs. CSS este puțin diferit. Acest tutorial, care va fi puțin tehnic (putin CSS si nimic altceva), vă va permite să remediați acest lucru.
Alte tutoriale pe tema Divi
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum de a adăuga text pe un Divi produs WooCommerce
- Modificarea culorii meniului între paginile din Divi
- Caracteristici pe care nu le cunoașteți despre Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator pe Divi
Să începem.
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:
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ă:
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
Am răsfoit recent un site care avea text despre produs. Desigur, am văzut și alte site-uri de comerț electronic care au mai degrabă cuvinte decât pictograme pe produs, așa că acesta nu a fost un concept nou. Nu a trebuit niciodată să fac asta pe o Divi tema, iar când am văzut asta, mi-am propus 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 veți afecta performanța blogului dvs.
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.
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
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin
Text diferit pe produs? spui să-l adaugi la produse noi? cum? si unde?
Super articol, vă mulțumesc pentru acest sfat. Și dacă vrem un text diferit pe produs, cum?
Bună ziua Brice,
În acest caz, adăugați un text diferit pe noul produs WooCommerce.
Super !! Vă mulțumim pentru acest sfat.
de nimic.