I en tidligere opplæring, vi du introduserte Divi. For de som ikke vet, er Divi en WordPress tema premium designet av teamet Elegant Temaer som tilbyr ulike tjenester på WordPress og design plugins og temaer.
Divi er et responsivt tema og sistnevnte er kompatibel med flere andre plugins blant annet vi har WooCommerce. I dag skal vi vise deg hvordan du gir en annen animasjon til produktene dine WooCommerce.
Noen ganger stilen til WooCommerce kan være litt utilstrekkelig, spesielt hvis CSS-stilen din er litt annerledes. Denne opplæringen, som vil være litt teknisk (litt CSS og ingenting annet), vil tillate deg å avhjelpe dette.
Andre opplæringsprogrammer om Divi-tema
- 5 nettsteder for restaurant bruk Divi tema
- Hvordan legge til tekst på en WooCommerce produkt Divi
- Hvordan endre menyfargen mellom sider på Divi
- Funksjoner du ikke kjenner til Divi
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en brukerrolle på Divi
La oss begynne.
Endre et ikon for tekst over musen over
Når du bruker WooCommerce med Divi og holder markøren over et produkt, ser du som standard et lite '+' ikon som er en skrift (make-ikonet) foreslått av Divi og som er som følger:
Det er veldig enkelt å endre det til et annet ikon i innstillingene, men hvis du vil legge til litt tekst, er det en annen ting? Jeg viser deg hvordan du kan oppnå dette med dagens CSS-utdrag, og jeg vil også inkludere valgfri kode som du kan legge til på nettstedet ditt.
Dette er hva vi en gang skal ha fullført:
Hvorfor bruke tekst i stedet for et ikon uansett?
Jeg kan tenke på noen grunner som kan få deg til å gjøre dette:
For å definere gi et unikt utseende til butikken din: Alt du kan gjøre for å skille Divi / WooCommerce-siden din fra en annen, er alltid en god ting.
Ved å bruke et ord som "Vis" eller "Kjøp" kan det føre til mer konvertering: Alle trenger å gjøre det som er best for nettstedet deres, og du kan dra nytte av integrert A / B-testing på Divi for å hjelpe med det.
Kilde til inspirasjon
Jeg har nylig surfet på et nettsted som hadde tekst om produktet som svever. Jeg har selvfølgelig sett andre e-handelssider som har ord i stedet for ikoner på produktet svevende, så dette var ikke et nytt konsept. Jeg hadde aldri trengt å gjøre dette på en Divi-tema, og da jeg så dette, satte jeg meg en utfordring og innså at det virkelig er enkelt å implementere dette. Med svært lite kode som kreves, vil du garantert ikke påvirke bloggens ytelse.
Implementering av mus over tekst
Trinn 1: Fargeoverlegget
Vi vil først endre fargen på sveveroverlegget på sveveren. Dette er ekstremt enkelt å gjøre på Divi. Gå til "i butikkmodulen din avanserte avanserte designparametere Og velg farge.
Trinn 2: Legge til CSS
Følgende CSS-kode i " Temaalternativer> Tilpasset CSS Eller på stilarket til temaet ditt.
.woocommerce .et_overlay: før {left: 0; margin-left: 0; innhold: 'visning'; / *** Teksten din her *** / font-family: 'Source Without Pro', Arial! / *** Velg din font *** / text-transform: store bokstaver; skriftstørrelse: 24px; farge: #fff; / *** Angi tekstfargen *** / font-weight: bold; tekstjustering: sentrum; bredde: 100%; polstring: 5px 0; }
Hvis du vil at produktene dine skal være ganske runde, kan du legge til denne valgfrie koden:
.woocommerce ul.products li.product en img, .et_overlay {border-radius: 50%; }
Det er det!
Nå kan du besøke butikken din og se hvordan endringene dine tas i betraktning.
[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 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-nedlasting"] LAST NED 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 = "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_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Andre divisjoner
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
Ulik tekst per produkt? sier du legge det til nye produkter? hvordan er det? og hvor?
Super artikkel, takk for dette tipset. Og hvis vi ønsker en annen tekst for hvert produkt, hvordan?
Hei Brice,
I dette tilfellet legger du til en annen tekst på det nye WooCommerce-produktet.
Super !! Takk for dette tipset.
av ingenting.