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.
- Ontworpen knoppen: Deze knoppen kunnen zowel tekst als pictogrammen weergeven en bieden geavanceerde aanpassingsopties (bijvoorbeeld afbeeldingsachtergronden, kleurovergangen en meer).
Lees meer over basisknoppen versus ontworpen knoppen
Er zijn een aantal verschillen tussen basisknoppen en ontworpen knoppen waar je op moet letten:
Ondersteunde functies
In tegenstelling tot basisknoppen, ondersteunen ontworpen knoppen de volgende acties niet:
- Het ontwerp van de knop kopiëren naar een ander element
- Inhoudssuggesties voor de knoptekst ontvangen
Responsief gedrag
In kleinere schermformaten vertonen de twee knoppen een verschillend responsief gedrag.
Basisknoppen laten de tekst automatisch teruglopen:
Terwijl ontworpen knoppen een weglatingsteken weergeven:
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 relevante knop.
- 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 leiden naar andere delen van je website (bijvoorbeeld pagina's, ankers, lightboxen), externe webpagina's en zelfs acties zoals het sturen van een e-mail of het bellen van een telefoonummer.
- Klik op het Link-pictogram
. - Selecteer links een linktype.
- Voeg de relevante linkinformatie toe.
- Klik op Klaar.
Je kunt het ontwerp van je 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 de Inspector-pijl
. - 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: Pas de breedte en kleur van de randen van je knop aan.
- Hoeken: Pas de straal van de hoeken van de knop aan (in px) om ze ronder of rechthoekiger te maken.
- Schaduw: Voeg een schaduw toe aan je knop en pas deze aan.
- Tekst: Pas de opmaak van de knoptekst aan.
- Afstand: Pas de afstand tussen de tekst en de randen van de knop aan.
Ontworpen knoppen aanpassen
Ontworpen 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:
Wijzig de tekst en/of het pictogram
- Klik op Wijzig tekst en pictogram.
- Afhankelijk van je behoeften doe je het volgende:
- Kies een optie onder Kies wat er wordt weergegeven:
- Tekst en pictogram
- Alleen tekst
- Alleen pictogram
- Bewerk de knoptekst onder Tekst.
- Klik op het Vervangen-pictogram
om een ander pictogram voor de knop te kiezen.
Knoppen kunnen naar andere delen van de website leiden (zoals pagina's, ankers, lightboxen), externe webpagina's en zelfs acties zoals het sturen van je klant een e-mail 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 je ontworpen knop aanpassen voor drie verschillende statussen: Standaard, Aanwijzen en Uitgeschakeld. Wijzig instellingen zoals de achtergrondkleur, rand of de vorm van de hoeken van de knop.
- Klik rechtsboven in de Editor op de Inspector-pijl.
- Scrol omlaag naar Ontwerp.
- Selecteer de relevante status: Standaard, Aanwijzen of Uitgeschakeld.
- Pas je 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 je knoptekst aan. Je kunt ook op Schaduwen 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 je hoeken ronder of meer rechthoekig door de straal in px te wijzigen. Je kunt voor alle hoeken dezelfde radius instellen of op het Ontgrendelen-pictogramklikken 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 je knop verschijnt.
Tip:
Voeg diepte toe aan de achtergrond van je knop door meerdere lagen met verschillende dekkingsniveaus toe te passen.
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 pictogramof 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.
- 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).
- 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 op de Uitlijn-knop
te klikken.
