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
- 5 websteder, der bruger Divi restaurant tema
- Hvordan at tilføje tekst på en WooCommerce produkt på Divi
- Sådan ændres menuen farve mellem sider på Divi
- Funktioner, som du ikke kender til Divi
- Sådan opretter du en skyder på Divi
- Sådan redigeres en brugerrolle på Divi
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
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Forskellig tekst pr. Produkt? siger du tilføje det til nye produkter? hvordan er det? og hvor?
Superartikel, tak for dette tip. Og hvis vi ønsker en anden tekst for hvert produkt, hvordan?
Hej brice
I dette tilfælde tilføjer du en anden tekst på det nye WooCommerce-produkt.
Super !! Tak for dette tip.
af ingenting.