Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

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

Divi är ett lyhört tema och det senare är kompatibelt med flera andra plugins, bland andra har vi WooCommerce. Idag kommer vi att visa dig hur du kan ge en annan animation till dina WooCommerce-produkter.

Ibland kan WooCommerce-stilen vara lite olämplig, särskilt 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

Låt oss börja.

Hur man lägger till en bild i en woocommerce-produkt

Ä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:

Standardwoocommerce-ikon

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

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:

Wordpress produktändring slutresultat

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

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

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 har nyligen bläddrat på en webbplats med text om svävarprodukten. Jag har naturligtvis sett det från andra e-handelssajter som har ord snarare än ikoner på den svävande produkten, så det här var inte ett nytt koncept. Jag hade aldrig varit tvungen att göra detta på ett Divi-tema, och när jag såg detta satte jag mig en utmaning och insåg att det verkligen är enkelt att genomföra detta. Med mycket lite kod krävs är du säker på att du inte påverkar din bloggs prestanda.

Exempel på webbplats

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.

Val av divifärger

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

10 aktier
del6
tweet
Enregistrer4