I en tidligere tutorial, vi du introducerede Divi. For dem, der ikke ved det, er Divi en WordPress tema premium designet af teamet Elegant Temaer der tilbyder forskellige tjenester på WordPress og design plugins og temaer.

Divi er et responsivt tema, og sidstnævnte er kompatibelt med flere andre plugins, blandt andre vi har WooCommerce. I dag skal vi vise dig, hvordan du giver dine produkter en anderledes animation WooCommerce.

Nogle gange stilen af WooCommerce kan være en smule utilstrækkelig, især hvis din CSS-stil er en smule anderledes. Denne tutorial, som vil være lidt teknisk (lidt CSS og intet andet), giver dig mulighed for at afhjælpe dette.

Andre tutorials om Divi-tema

Lad os starte.

Ændring af et ikon for tekst over musen over

Når du bruger WooCommerce med Divi og holder markøren over et produkt, ser du som standard et lille '+' ikon, som er en skrifttype (make-ikon) foreslået af Divi, og som er som følger:

Det er virkelig nemt at ændre det til et andet ikon i indstillingerne, men hvis du vil tilføje noget tekst, er det en anden ting? Jeg viser dig, hvordan du opnår dette med dagens CSS-uddrag, og jeg inkluderer også valgfri kode, der kan tilføjes til dit websted.

Dette er, hvad vi en gang har afsluttet:

Hvorfor bruge tekst i stedet for et ikon alligevel?

Jeg kan tænke på nogle grunde, der kan få dig til at gøre dette:

For at definere give et unikt look til din butik: Alt hvad du kan gøre for at skelne dit Divi / WooCommerce-websted fra et andet, er altid en god ting.

Brug af et ord som "Vis" eller "Køb" kan resultere i mere konvertering: Alle skal gøre det bedste for deres hjemmeside, og du kan drage fordel af integreret A / B-test på Divi for at hjælpe med det.

Kilde til inspiration

Jeg har for nylig gennemset et websted, der havde tekst om produktet svævende. Jeg har selvfølgelig set andre e-handelssider, der har ord frem for ikoner på produktet, så dette var ikke et nyt koncept. Jeg havde aldrig behøvet at gøre dette på en Divi-tema, og da jeg så dette, stillede jeg mig selv en udfordring og indså, at det virkelig er nemt at implementere dette. Med meget lidt kode påkrævet, er du sikker på ikke at påvirke din blogs ydeevne.

Implementering af mus over tekst

Trin 1: Farveoverlejringen

Vi ændrer først farven på svæveoverlayet ved svævningen. Dette er ekstremt let at gøre på Divi. I dit butiksmodul Gå til " avancerede avancerede designparametre Og vælg din farve.

Trin 2: Tilføjelse af CSS

Følgende CSS-kode i " Temaindstillinger> Tilpasset CSS Eller på stilarket til dit barnetema.

.woocommerce .et_overlay: før {left: 0; margin-left: 0; indhold: 'visning'; / *** Din tekst her *** / font-family: 'Source Without Pro', Arial! / *** Vælg din font *** / text-transform: store bogstaver; skriftstørrelse: 24px; farve: #fff; / *** Indstil tekstfarve *** / font-vægt: fed; tekstjustering: center; bredde: 100%; polstring: 5px 0; }

Hvis du ønsker, at dine produkter skal være ret runde, kan du tilføje denne valgfri kode:

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

Det er alt!

Nu kan du besøge din butik og se, hvordan dine ændringer tages i betragtning.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flad" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andre Divi tutorials

Lignende varer

5 Kommentarer

yacht den 8. august 2019 kl. 22 minutter

Forskellig tekst pr. Produkt? siger du tilføje det til nye produkter? hvordan er det? og hvor?
réponse
brice bayle den 30. maj 2018 kl. 5 timer og 18 min

Superartikel, tak for dette tip. Og hvis vi ønsker en anden tekst for hvert produkt, hvordan?
réponse
- Thierry Bertrand den 31. maj 2018 kl. 6 timer og 12 min
  
  Hej brice
  
  I dette tilfælde tilføjer du en anden tekst på det nye WooCommerce-produkt.
  réponse
Laura den 26. april 2018 kl. 16.

Super !! Tak for dette tip.
réponse
- Thierry Bertrand den 26. april 2018 kl. 17.
  
  af ingenting.
  réponse

Indsend kommentaren Annuler la réponse

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Sådan føjes tekst på en WooCommerce produkt Divi

Ændring af et ikon for tekst over musen over