Met behulp van knoppen en links kunt u elk type link (1) aan de sectie toevoegen. U kunt een knop, tekstlink, afbeeldingslink, pictogram of scheidingslijn toevoegen.
Je kunt de bestaande knop/link dupliceren (2), bewerken (3) of verwijderen (4).
In dit artikel:
Knoppen/links toevoegen
- Om elk type link aan de sectie toe te voegen, klikt u op de + Knop toevoegen optie.
Met de optie '+ Knop toevoegen' kunt u op vier manieren een link toevoegen. Daarnaast kunt u ook scheidingstekens toevoegen om ruimte tussen knoppen/links te creëren. De beschikbare opties zijn als volgt:
Knop
Voeg een knop toe aan het listitem.
U kunt het volgende bijwerken:
- Knop Label – Geef de zichtbare tekst op uw knop. Dit is wat gebruikers zien en waarop ze klikken.
- Knopkoppeling – Geef de URL of actie De knop moet geactiveerd worden als erop geklikt wordt.
- Doelvenster – Kies of de link in de hetzelfde tabblad nodig heeft of nieuw tabblad.
- Knopstijl – Kies de knopstijl als standaard (ingesteld in de Knoppen en koppelingen tabblad van de Design-sectie), Solid, Outline of een Text Link.
-
- Standaard: Volgt de thema-instellingen van uw site.
- Solide: Een opvallende, gevulde knop.
- Overzicht: Transparante achtergrond met een rand.
- Tekstlink: Eenvoudige, overzichtelijke tekst-en-tekst-stijl (geen knoppenbalk).
- Knoopvorm – Stel een aangepaste vorm voor elke individuele knop binnen de sectie. Hiermee kunt u de globale knopvorm die is gedefinieerd onder de Ontwerp instellingen, waardoor je meer controle hebt over hoe elke knop eruitziet. De beschikbare vormen zijn Vierkant, Afgerond en Pil.
- Knop kleur – Pas het kleurenschema van de knop aan:
-
- Standaard: Neemt thema-instellingen over.
- Omkeren: Draait de tekst-/achtergrondkleuren van de knop om.
- Maat: Hiermee kunt u specifieke tekst- en achtergrondkleuren kiezen.
- Knoptekst – Als u gebruik maakt van Aangepaste knopkleur, kunt u het instellen tekst (label) kleur vanaf hier.
- Knopachtergrond – Ook beschikbaar onder Aangepast, hiermee stelt u de achtergrondkleur van de knop in. Combineer dit met de tekstkleur voor maximale leesbaarheid en stijl.
- Knop Icoon – Voeg een pictogram toe naast je knoplabel. Je kunt kiezen uit verschillende pictogramopties.
- Layout – Bepaal de plaatsing van het pictogram ten opzichte van het label. Beschikbare lay-outopties zijn:
-
- Label + pictogram: Eerst verschijnt de tekst, gevolgd door het pictogram.
- Icoon + label: Eerst verschijnt het pictogram, daarna de tekst.
- Label + pictogram (breed): Tekst en pictogrammen zijn met meer opvulling gerangschikt, geschikt voor bredere knoppen.
- Pictogram + label (breed): Eerst het pictogram, bredere opvulling.
- Icoon Kleur – Kies de kleur van het knoppictogram. U kunt deze instellen op: Knoptekst kleur of de Merk kleur.
Knopstijlinstellingen
Deze instellingen vindt u onder het tabblad Stijl van de secties. Met deze instellingen kunt u het uiterlijk, de afstand en de lay-out van de knoppen op uw Pixpa-website nauwkeurig afstemmen voor meer controle over het ontwerp en een betere responsiviteit.
- Knoopmaat – Kies de grootte van de knop (bijvoorbeeld Klein, Medium, Groot). Hiermee worden de opvulling en de lettergrootte aangepast aan uw ontwerp.
- Ruimte tussen knoppen – Bepaalt de horizontale afstand tussen meerdere knoppen. U kunt vw-eenheden (viewportbreedte) gebruiken voor responsieve afstand.
- Ruimte boven knoppen – Voegt verticale ruimte toe boven de knop(pen). Dit helpt ze te scheiden van de content erboven, gemeten in %.
- Tekstlink – Past de lettergrootte aan voor tekstkoppelingen in knoppen (vooral handig wanneer u de stijl 'Tekstkoppeling' gebruikt in plaats van een traditionele knop).
- Afbeelding als knop (grootte) – Als u een afbeelding gebruikt in plaats van een traditionele knop, bepaalt deze instelling de weergavegrootte van de afbeelding (in pixels).
- Knopbreedte – Kies hoe breed de knop moet zijn:
-
- Standaard: Standaardbreedte gebaseerd op de inhoud van de knop
- Groot / Extra Groot: Bredere knoppen voor meer nadruk
- Volle breedte: Knop strekt zich uit over de gehele breedte van de container
Tekstlink
Voeg een tekstlink toe aan het lijstitem.
U kunt het volgende bijwerken:
- Kies het tekstlabel.
- Geef het tekstlink.
- Doelvenster – Kies ervoor om de pagina in hetzelfde of een nieuw venster te openen.
Beeld
Voeg een afbeelding toe en koppel deze aan een willekeurige pagina.
- Nadat u de afbeelding heeft geüpload, wordt deze op deze manier weergegeven. Klik op de link om deze te bewerken.
- Vanaf hier kunt u:
- Uploaden/Wijzig de afbeelding.
- Knopkoppeling – Specificeer de koppeling.
- Doelvenster – Kies ervoor om de pagina in hetzelfde of een nieuw venster te openen.
De sitetitel wordt gebruikt als alternatieve tekst voor de afbeelding van de knop om de doorzoekbaarheid te verbeteren.
Sociaal pictogram
- Voeg een sociaal pictogram toe aan het lijstitem.
U kunt het volgende beheren:
- Het te koppelen sociale icoon.
- Specificeer uw relevante sociale profielpad.
- Doelvenster – Kies ervoor om de pagina in hetzelfde of een nieuw venster te openen.
Separator
Met de optie 'Scheidingslijn' kunt u ruimte tussen knoppen of links invoegen.
Dit is handig om visuele scheiding te creëren tussen knoppen die dicht bij elkaar staan. Je kunt een scheidingslijn toevoegen vanuit het paneel Knoppen en links, net zoals je andere knoppen toevoegt.
- De ruimte tussen de knoppen wordt bepaald door de Vulling – Boven instelling binnen de scheidingslijn. Door deze waarde aan te passen, vergroot of verkleint u de verticale afstand tussen dicht bij elkaar geplaatste knoppen.
- Een scheidingslijn verbindt nergens mee, maar creëert alleen verticale ruimte.
- U kunt het omhoog of omlaag verplaatsen om de afstand tussen de items naar wens aan te passen.
Stijlopties voor knoppen en links
De stijlopties vind je onder het tabblad 'Stijl ' wanneer je de sectie beheert.
Je hebt als volgt meerdere stijlopties voor de knop en koppelingen:
Knop & koppelingen
- Geef het Ruimte tussen knop/links die zijn toegevoegd.
- Geef het Ruimte boven knop/links.
- Kies de Hover Effect voor de knop/links.
- Kies de grootte van de normale knop die u hebt toegevoegd in de Knop/koppelingen.
- Geef het hoogte van de afbeeldingsknop als je een afbeeldingslink hebt toegevoegd in de Knop/koppelingen.
- Geef het grootte van de pictogramknop als je een sociaal icoon hebt toegevoegd in de Knop/koppelingen.
Als je hierboven een sociaal media-icoon hebt toegevoegd in de sectie Knop/Links , dan geldt het volgende:
- Kies de Type sociaal pictogram/Vorm.
- Kies de Kleurstijl sociaal pictogram. Als u de Merk Kleur:, dan wordt de merkkleur van het pictogram overgenomen.
Als u de Geselecteerde kleur optie hierboven dan:
-
- Geef het Sociale pictogramkleur.
- Geef het Achtergrondkleur sociaal pictogram.
Voorbeeld
Stel dat u een Amazon-sociale link hebt toegevoegd aan de knoppen/links en de pictogramkleur hebt ingesteld op rood en de achtergrondkleur op groen, dan zal het pictogram er als volgt uitzien:
