I en tidigare handledning, vi du introducerade Divi. För de som inte vet är Divi en Wordpress tema premium designad av teamet Elegant Teman som erbjuder olika tjänster på WordPress och design plugins och teman.

Divi är ett responsivt tema och det senare är kompatibelt med flera andra plugins bland annat vi har WooCommerce. Idag ska vi visa dig hur du ger en annan animation till dina produkter WooCommerce.

Ibland stilen av WooCommerce kan vara lite otillräcklig, speciellt om din CSS-stil är lite annorlunda. Denna handledning, som kommer att vara lite teknisk (lite CSS och inget annat), gör att du kan åtgärda detta.

Andra handledning om Divi-tema

• 5 webbplatser för restaurang användning Divi tema
• Hur man lägger till text på en WooCommerce produkt Divi
• Så här byter du menyfärg mellan sidor på Divi
• Funktioner du inte känner till Divi
• Hur man skapar en reglage på Divi
• Hur man redigerar en användarroll på Divi

Låt oss börja.

Ändra en ikon för text över musen över

När du använder WooCommerce med Divi och svävar över en produkt ser du som standard en liten '+' ikon som är ett teckensnitt (make-ikonen) föreslagits av Divi och som är följande:

Det är väldigt enkelt att ändra det till en annan ikon i inställningarna, men om du vill lägga till lite text, är det en annan sak? Jag visar dig hur du uppnår detta med dagens CSS-utdrag, och jag kommer också att inkludera valfri kod för att lägga till på din webbplats.

Här är vad vi en gång kommer att ha slutfört:

Varför använda text istället för en ikon ändå?

Jag kan tänka på några skäl som kan få dig att göra detta:

För att definiera ge din butik ett unikt utseende: Allt du kan göra för att skilja din Divi / WooCommerce-webbplats från en annan är alltid en bra sak.

Att använda ett ord som "Visa" eller "Köp" kan resultera i mer konvertering: Alla måste göra det bästa för deras webbplats, och du kan dra nytta av integrerad A / B-test på Divi för att hjälpa till med det.

Källa till inspiration

Jag besökte nyligen en webbplats som hade svävande produkttext. Jag har förstås sett andra e-handelssajter som har ord snarare än ikoner på den svävande produkten, så det var inget nytt koncept. Jag har aldrig behövt göra detta på ett Divi-tema, och när jag såg detta gav jag mig själv en utmaning och insåg att det faktiskt är enkelt att implementera. Med väldigt lite kod som krävs kan du vara säker på att det inte påverkar din bloggs prestanda.

Implementera mus över text

Steg 1: Färgöverlägget

Vi kommer att ändra färgen på överlägget när du svävar först. Detta är extremt lätt att göra på Divi. I din butiksmodul Gå till " avancerade avancerade designparametrar Och välj din färg.

Steg 2: Lägga till CSS

Följande CSS-kod i " Temalternativ> Anpassad CSS Eller på stilbladet för ditt barntema.

.woocommerce .et_overlay: före {vänster: 0; marginal-vänster: 0; innehåll: "visa"; / *** Din text här *** / font-family: 'Source Without Pro', Arial! / *** Välj ditt teckensnitt *** / text-transform: store; typstorlek: 24px; färg: #fff; / *** Ställ in textfärgen *** / font-vikt: fet; text-align: center; bredd: 100%; stoppning: 5px 0; }

Om du vill att dina produkter ska vara ganska runda kan du lägga till den här valfria koden:

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

Det är allt!

Nu kan du besöka din butik och se hur dina ändringar beaktas.

[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 = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andra Divi tutorials

• 5 webbplatser för restaurang användning Divi tema
• Så här lägger du till text på en Divi WooCommerce-produkt
• Så här byter du menyfärg mellan Divi-sidor
• Hur du anpassar rutorna på en blogg med Divi
• Hur man använder roll Divi editor på Wordpress
• Hur man skapar en Divi-skjutreglage på full skärm
• Hur man ändrar menyens färg mellan Divi-sidor
• Funktioner du antagligen inte känner till Divi
• Så här använder du Divi Builder på WordPress
• Så här använder du Divi video-rullningsmodulen
• Så här använder du Divi Builder Flip-modulen
• Hur man lägger till en vittnesmodul om Divi Builder
• Så här använder du Divi-textmodulen
• Hur man skapar en reglage på Divi
• Hur man redigerar en Divi-användarroll
• Så här använder du Divi Social Media-modulen
• Hur man använder butikmodulen på temat WordPress Divi
• Så här använder du Divi sidebar-modulen
• Så här använder du Divi Price Table Module
• Hur man använder titelfodulen i Divi-publikationer
• Hur lägger jag till en videomodul av Divi
• Så här använder du artikelnavigationsmodulen
• Så här använder du Divi-sökmodulen
• Så här använder du Divi-plånboksmodulen
• Hur man använder personmodulen på Divi Builder
• Hur man använder plånboksmodulen med Divi-filter
• Hur man använder skjutreglaget med hela bredden
• Så här använder du Divi Builder Image Module
• Så här använder du Divi Builder med fullbredd navigationsmodul
• Hur man använder modulen för bildgalleri
• Så här använder du Divi Builder Full-Width Card Module
• Så här använder du Divi Full Width Portfolio Module
• Hur du använder Divi-modulen med full bredd
• Så här använder du Divi Counter Module
• Hur man använder artiklarna på Divi Builder
• Så här använder du Divi Email Optin-modulen

Blair Jersyer

WordPress-utvecklare och brinner för allt som rör nya tekniska trender. Plugin författare, WordPress-teman och andra webbapplikationer. Författare på BlogPasCher.com.

Se hela bio