Knoppen zijn een goede manier om bezoekers aan te moedigen interactie te hebben met een website. In de Studio Editor kun je knoppen toevoegen die tekst, een pictogram of beide tonen. Je hebt volledige controle over het ontwerp en de indeling, zodat je precies de look kunt creëren die je nodig hebt.
Een knop toevoegen
Wanneer je een nieuwe knop toevoegt, kun je een ontwerp kiezen uit twee categorieën:
- Basisknoppen: Deze knoppen geven alleen tekst weer en hebben een meer 'minimalistisch' uiterlijk.
- Gestylede knoppen: Deze knoppen kunnen zowel tekst als pictogrammen weergeven en bieden geavanceerde aanpassingsopties (bijvoorbeeld afbeeldingsachtergronden, kleurovergangen en meer).
Om een knop toe te voegen:
- Klik links in de editor op Elementen toevoegen
. - Klik op Knop.
- Blader door de ontwerpen en sleep een Basisknop of Ontworpen knop naar de pagina.
Basisknoppen aanpassen
Nadat je een basisknop hebt toegevoegd, wijzig je de tekst en kies je waar deze naar linkt. Zodra dat is ingesteld, kun je beginnen met het aanpassen van het ontwerp. Kies een andere vulkleur, voeg een schaduw toe en pas andere instellingen aan, zoals afstand en tekstopmaak.
Om een basisknop aan te passen:
- Selecteer de knop in je editor.
- Kies wat je wilt aanpassen:
- Klik op Tekst wijzigen.
- Voer je nieuwe tekst in onder Tekst.
Tip: Basisknoppen hebben geen optie om een pictogram weer te geven, maar je kunt symbolen invoeren (bijvoorbeeld: X, +, >) om een soortgelijk effect te creëren.
Knoppen kunnen naar andere delen van de website leiden (zoals: pagina's, ankers, lightboxen), externe webpagina's en zelfs acties zoals het sturen van een e-mail naar je klant of bellen naar hun nummer.
- Klik op het Link-pictogram
. - Selecteer links een linktype.
- Voeg de relevante linkinformatie toe.
- Klik op Klaar.
Je kunt het ontwerp van een basisknop aanpassen voor twee verschillende statussen: Standaard of Aanwijzen. Wijzig instellingen zoals de achtergrondkleur, rand of de vorm van de hoeken van de knop.
- Klik rechtsboven in de editor op het Inspector openen-pictogram
.
- Scrol omlaag naar Ontwerp.
- Selecteer de toestand die je wilt ontwerpen: Standaard of Aanwijzen.
- Ontwerp de knop met behulp van de beschikbare opties:
- Opvulkleur en dekking: Wijzig de achtergrondkleur van je knop en pas de dekking aan.
- Rand: Kies een kleur voor de rand en stel de dekking en breedte in (in px*).
- Hoeken: Stel de straal van de hoeken van de knop in (in px*) om ze rond of vierkant te maken. Je kunt voor alle hoeken dezelfde radius instellen of op het Ontgrendelen-pictogram
klikken om ze afzonderlijk aan te passen. - Schaduw: Voeg een schaduw toe en pas deze aan om de knop een 3D-effect te geven.
- Tekst: Pas het uiterlijk en de opmaak van de knoptekst aan.
- Kaartafstand: Stel de afstand tussen de tekst en de randen van de knop in.
De indeling van de knop aanpassen
Wijzig de uitlijning, positionering en afstand van de knop zodat de tekst en/of het pictogram er precies zo uitzien als jij wilt.
- Klik op het Indeling-pictogram
. - Pas de instellingen naar behoefte aan:
- Richting: Selecteer of Links naar rechts of Rechts naar links op de knop wordt weergegeven.
- Uitlijning: Lijn de tekst links, in het midden of rechts van de knop uit. Je kunt de tekst laten inspringen met de opties Links of Rechts.
Ontworpen knoppen aanpassen
Gestylede knoppen bieden talloze aanpassingsmogelijkheden, zodat je ze tot in het kleinste detail kunt ontwerpen. Wijzig de tekst en het pictogram voor de gewenste actie, kies hoe de twee moeten worden gerangschikt, stel een overgang of een afbeelding in als achtergrond en nog veel meer.
Om een ontworpen knop aan te passen:
- Selecteer de relevante knop.
- Kies wat je wilt aanpassen:
De tekst en/of het pictogram wijzigen
- Klik op Instellingen.
- Selecteer een optie onder Kies wat er wordt weergegeven en wijzig de instellingen:
- Tekst en pictogram: Gebruik het Tekst-veld om te wijzigen wat er staat en klik op het Vervangen-pictogram
om een ander pictogram te kiezen. - Alleen tekst: Bewerk de knoptekst onder Tekst.
- Alleen pictogram: Klik op het Vervangen-pictogram om een ander pictogram voor de knop te kiezen. Je kunt ook een toegankelijke naam toevoegen om de functie van de knop te beschrijven voor bezoekers met behulp van ondersteunende technologieën.
Let op: Als je Niets selecteert onder Kies wat er wordt weergegeven, is de knop leeg. Je kunt nog steeds een toegankelijke naam toevoegen en deze koppelen aan wat je wilt.
Knoppen kunnen naar andere delen van de website leiden (zoals: pagina's en ankers), externe webpagina's en bruikbare informatie, zoals het e-mailadres van je klant.
- Klik op het Link-pictogram .
- Selecteer links een linktype.
- Voeg de relevante linkinformatie toe.
- Klik op Klaar.
Je kunt het ontwerp van een gestylede knop aanpassen voor 2 verschillende statussen: Standaard of Aanwijzen. Wijzig instellingen zoals de achtergrond, rand of de vorm van de hoeken van de knop.
- Klik rechtsboven in de editor op het Inspector openen-pictogram .
- Scrol omlaag naar Ontwerp.
- Selecteer de relevante status: Standaard of Aanwijzen.
- Pas de knop aan met behulp van de beschikbare opties.
- Achtergrond: Kies een kleur, kleurovergang of afbeelding voor de achtergrond van je knop.
- Tekst: Pas het lettertype, de opmaak en de afstand van de knoptekst aan. Je kunt ook op Tekst schaduw toepassen klikken om schaduw aan de tekst toe te voegen.
- Randen: Kies een kleur of kleurovergang voor je randen en stel de dikte in op px. Je kunt op alle zijden hetzelfde ontwerp toepassen of op het Ontgrendelen-pictogram
klikken om ze afzonderlijk aan te passen. - Hoeken: Maak de hoeken ronder of vierkanter door de straal in px te wijzigen. Je kunt voor alle hoeken dezelfde radius instellen of op het Ontgrendelen-pictogram
klikken om ze afzonderlijk aan te passen. - Schaduwen: Voeg binnenste / buitenste schaduw toe, of meerdere schaduwlagen, terwijl je de kleur, hoek, afstand, grootte, enzovoort instelt.
- Indeling: Kies wat je op je knop wilt weergeven (tekst, pictogram of beide) en hoe deze moeten worden gerangschikt en uitgelijnd.
- Pictogram: Pas de kleur, grootte en hoek aan van het pictogram dat op de knop wordt weergegeven.
De indeling van de knop aanpassen
Wijzig de uitlijning, positionering en afstand van de knop zodat de tekst en/of het pictogram er precies zo uitzien als jij wilt.
- Klik op het Indeling-pictogram .
- Pas een van de volgende instellingen aan:
- Kies wat wordt weergegeven: Bepaal wat er op je knop wordt weergegeven: Tekst en pictogram, Alleen tekst, Alleen pictogram of Niets.
- Positie pictogram: Wanneer je ervoor kiest om zowel tekst als een pictogram weer te geven, kun je beslissen hoe je ze wilt plaatsen: naast of onder elkaar.
- Uitlijning: Lijn de tekst en het pictogram links, centraal of rechts van de knop uit. Je kunt ze ook uitlijnen met beide marges van de knop door Uitvullen
te selecteren. - Ruimte tussen tekst en pictogram: Als je ervoor kiest om zowel tekst als een pictogram weer te geven, kun je de schuifregelaar slepen om de afstand tussen beide in te stellen (in px).
- Richting: Kies of de knopinhoud van links naar rechts of van rechts naar links wordt gelezen.
