In een vorige tutorial hebben we je introduceerde Divi. Voor degenen die het niet weten, Divi is een WordPress theme premium ontworpen door het team elegante thema's die verschillende services op WordPress en ontwerpplug-ins en thema's biedt.

Divi is een responsief thema en de laatste is compatibel met verschillende andere plug-ins die we hebben WooCommerce. Vandaag laten we je zien hoe je een andere animatie aan je producten kunt geven WooCommerce.

Soms is de stijl van WooCommerce kan een beetje ontoereikend zijn, vooral als uw CSS-stijl een beetje anders is. Deze tutorial, die een beetje technisch zal zijn (een beetje CSS en verder niets), kunt u dit verhelpen.

Andere tutorials over Divi-thema

Laten we beginnen.

Een pictogram wijzigen voor tekst via muis over

Wanneer u WooCommerce met Divi gebruikt en de muisaanwijzer over een product beweegt, ziet u standaard een klein '+' - pictogram dat een lettertype is (make-icoon) voorgesteld door Divi en dat is als volgt:

Het is heel gemakkelijk om dat te veranderen in een ander pictogram in de instellingen, maar als je wat tekst wilt toevoegen, is dat dan iets anders? Ik zal je laten zien hoe je dit kunt bereiken met de CSS-fragmenten van vandaag, en ik zal ook optionele code toevoegen om aan je site toe te voegen.

Dit is wat we zullen hebben voltooid:

Waarom toch tekst gebruiken in plaats van een pictogram?

Ik kan enkele redenen bedenken die u kunnen doen om dit te doen:

Geef uw winkel een uniek uiterlijk: Alles wat u kunt doen om uw Divi / WooCommerce-site van een andere te onderscheiden, is altijd een goede zaak.

Het gebruik van een woord als 'Weergeven' of 'Kopen' kan leiden tot meer conversie: Iedereen moet doen wat het beste is voor hun website, en u kunt profiteren van geïntegreerde A / B-tests op Divi om u hierbij te helpen.

Bron van inspiratie

Ik heb onlangs een site bezocht waarop tekst over het product zweefde. Ik heb natuurlijk andere e-commercesites gezien waar woorden in plaats van pictogrammen op het product zweefden, dus dit was geen nieuw concept. Ik had dit nog nooit hoeven doen op een Divi-thema, en toen ik dit zag, stelde ik mezelf een uitdaging en realiseerde ik me dat het inderdaad gemakkelijk is om dit te implementeren. Omdat er maar heel weinig code nodig is, weet je zeker dat je de prestaties van je blog niet beïnvloedt.

Muis over tekst implementeren

Stap 1: de kleuroverlay

We zullen eerst de kleur van de hover-overlay bij hover wijzigen. Dit is buitengewoon eenvoudig te doen op Divi. In uw winkelmodule Ga naar de " geavanceerde geavanceerde ontwerpparameters En selecteer uw kleur.

Stap 2: CSS toevoegen

De volgende CSS-code in ' Thema-opties> Aangepaste CSS Of op het stijlblad van het thema van uw kind.

.woocommerce .et_overlay: voor {links: 0; marge-links: 0; inhoud: 'bekijken'; / *** Your Text Here *** / font-family: 'Source Without Pro', Arial! / *** Kies je lettertype *** / text-transform: hoofdletters; lettergrootte: 24px; kleur: #fff; / *** Stel de tekstkleur in *** / font-weight: bold; text-align: center; breedte: 100%; vulling: 5px 0; }

Als u wilt dat uw producten vrij rond zijn, kunt u deze optionele code toevoegen:

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

Dat is het!

Nu kunt u uw winkel bezoeken en zien hoe uw wijzigingen in aanmerking worden genomen.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "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-download"] DOWNLOAD HET DIVI-THEMA [/ vcex_button] [/ width_column] [»]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_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi-zelfstudies

Vergelijkbare artikelen

5 Reacties

jacht op 8 augustus 2019 om 22 uur 58 min

Verschillende teksten per product? zeg je: voeg het toe aan nieuwe producten? hoe is dat? en waar?
antwoord
brice bayle op 30 mei 2018 om 5:18 uur

Super artikel, bedankt voor deze tip. En als we een andere tekst per product willen, hoe dan?
antwoord
- Thierry Bertrand op 31 mei 2018 om 6:12 uur
  
  Hallo Brice,
  
  In dit geval voegt u een andere tekst toe aan het nieuwe WooCommerce-product.
  antwoord
Laura op 26 april 2018 om 16:48 uur

Fantastisch !! Bedankt voor deze tip.
antwoord
- Thierry Bertrand op 26 april 2018 om 17:21 uur
  
  van niets.
  antwoord

Plaats de reactie Annuler la réponse

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Tekst toevoegen aan een WooCommerce-product op Divi

Een pictogram wijzigen voor tekst via muis over