Wix Editor: Het ontwerp van je knoppen aanpassen

Leestijd 9 minuten
Maak mooie, in het oog springende knoppen die bij je website passen en je bezoekers verleiden tot interactie. 
Klik op het Ontwerp-pictogramop je knop om te beginnen met personaliseren.
Lees in dit artikel meer over: 

De knopstatussen aanpassen

Je kunt de statussen van elke knop op je website afzonderlijk aanpassen. Hiermee kun je mooie effecten creëren die bezoekers zien als ze door je website navigeren.
Je kunt bijvoorbeeld een kleur kiezen voor de normale weergave, een andere kleur voor wanneer met de muisaanwijzer over de knop wordt gegaan en een andere voor wanneer op de knop wordt geklikt. Hiermee wordt de knop gehighlight om je bezoekers te laten zien dat deze interactief is.
Belangrijk:
Aanwijseffecten (tikken) op pictogramknoppen worden momenteel niet ondersteund op iOS. Dit betekent dat bezoekers die je website op een iOS-apparaat bekijken, de aanwijsstatus niet zien als ze de knop aantikken.

Knoppen ontwerpen

Er zijn verschillende aanpassingsopties beschikbaar. Afhankelijk van het type knop kun je de achtergrond, tekst en het pictogram aanpassen. Kies de kleuren, vullingen, hoeken, schaduwen en meer.

Kies wat je wilt doen:

Lees meer over het aanpassen van andere soorten knoppen:

Ontwerp-woordenlijst

Opties voor knopontwerp

Optie
Uitleg
Hoe te gebruiken
Opvulling
Voeg verschillende vullingen toe, zoals kleuren, afbeeldingen, patronen en kleurverlopen om prachtige en kleurrijke effecten op je knop te creëren. 
  • Klik op het kleurvak voor elke laag en kies het opvullingstype en sleep vervolgens de schuifregelaar om de dekking van de opvullaag te wijzigen.
  • Wijzig de volgorde van de opvullagen door ze omhoog en omlaag te slepen. 
Randen
Pas de rand van de knop aan om deze te laten opvallen. Pas alle kanten van de knop samen of  elke kant afzonderlijk aan door op het pictogram voor vergrendelen en ontgrendelen te klikken. 
  • Klik op het Breedte-veld en voer de pixelbreedte in of pas de schuifregelaar aan.
  • Klik op de Stijl drop-down en selecteer de randstijl.
  • Klik op het Opvulkleur-vak en selecteer de randkleur en gebruik de schuifregelaar om de dekking aan te passen. 
Hoeken
Verander de hoeken van je knop om ze ronder of vierkanter te maken. Wijzig de grootte van alle hoeken samen of pas elke hoek afzonderlijk aan door op het pictogram voor vergrendelen en ontgrendelen te klikken. 
Klik op het pixelveld in een hoek en voer het aantal pixels in dat je erop wilt toepassen.
Schaduwen
Voeg lagen schaduw toe aan je knop en pas onder andere de kleur en grootte voor elke laag aan.
  • Klik op het kleurvak voor elke schaduwlaag en pas de kleur, het type, de hoek, de grootte, de afstand en de vervaging aan. Sleep vervolgens de schuifregelaar om de dekking van de schaduw te wijzigen.
  • Wijzig de volgorde van de schaduwlagen door ze omhoog en omlaag te slepen. 
Bij gebruik van een Uploadknop:
  • Klik op de schakelaar om de schaduw in te schakelen.
  • Gebruik de schuifregelaars om de hoek, afstand, grootte en vervaging te bewerken. Gebruik vervolgens de schuifregelaar en het kleurvak om de dekking en kleur te bewerken.
Indeling

Wijzig de indeling van je knop.
  • Klik op de Wat staat er op de knop-dropdown en kies of je de tekst, het pictogram of beide wilt weergeven.
  • Selecteer de uitlijning, positie en afstand van de tekst en/of het pictogram (indien relevant).
  • Stel de opvulling rond de tekst en/of het pictogram in.

Opties voor tekstopmaak

Optie
Uitleg
Hoe te gebruiken
Tekst tonen
Toon of verberg tekst op je knop.
Klik op de schakelaar om tekst op je knop weer te geven of te verbergen.
Thema
Selecteer het thema voor je knoptekst.
Selecteer een tekstthema in de drop-down.
Lettertypen
Kies het lettertype voor je knoptekst.
Klik op de drop-down en selecteer een lettertype.
Tekstgrootte
Verander de grootte van de tekst op je knop.
Sleep de schuifregelaar om de lettergrootte te vergroten of te verkleinen, of voer een waarde in.
Tekstopmaak
Pas opmaak toe op je tekst. 
  • Maak je tekst op met behulp van de opties: vet, cursief, onderstrepen, doorhalen, kleuren, hoofdletters en tekstrichting en uitlijning.
Tekenafstand
Wijzig de afstand tussen de teksttekens.
Sleep de schuifregelaar om de afstand te vergroten of te verkleinen, of voer een waarde in.
Schaduwen
Creëer schaduwen voor je tekst. Je kunt meer dan één schaduw hebben.
Klik op Schaduw toevoegen om een nieuwe toe te voegen. Klik op het pictogram Schaduw personaliseren om het te ontwerpen.

Opties voor pictogramontwerp

Optie
Uitleg
Hoe te gebruiken
Pictogram tonen
Toon of verberg een pictogram op je knop.
Klik op de schakelaar om het pictogram op je knop weer te geven of te verbergen.
Grootte
Wijzig de grootte van je pictogram.
Sleep de schuifregelaar om de grootte van je pictogram te vergroten of te verkleinen, of voer een waarde in.
Kleur
Verander de kleur van het pictogram.
Klik op het kleurvak en selecteer een kleur.
Draaihoek
Pas de rotatie van het pictogram aan.
Sleep de hendel om de rotatie van het pictogram aan te passen of voer de graden in het tekstvak in.

Vond je dit artikel nuttig?

|