Samenvatting
Naast hoe iets eruitziet (opmaak), heeft elk element en blok in Mach3Blocks ook instellingen die bepalen hoe het zich gedraagt. Denk aan: op welke schermformaten iets zichtbaar is, waar een klik naartoe leidt, of er een scroll-animatie is, en of schermlezers het kunnen beschrijven. Al deze opties vind je in het Instellingen-tabblad in het rechter paneel.
Let op: dit is het Instellingen-tabblad van een element of blok (rechter paneel van de editor) — niet het onderdeel Instellingen in het zijmenu van je website. Dat laatste zijn de website-instellingen.
Hoe werkt het
Het tabblad openen
- Selecteer een element of blok in de editor
- Kijk in het rechter paneel
- Klik op het tabblad Instellingen (naast Opmaak en Overgangen)
Algemene instellingen (beschikbaar bij de meeste elementen)
Verbergen per schermgrootte
Je kunt een element verbergen op bepaalde apparaten. Dat is handig als je bijvoorbeeld een element alleen op desktop wilt tonen, of als je een aparte versie hebt gemaakt speciaal voor mobiel.
De schermgroottes zijn:
- Desktop (≥ 1280px)
- Laptop (1024–1280px)
- Tablet (768–1024px)
- Telefoon liggend (480–768px)
- Telefoon staand (< 480px)
Vertaalbaar
Met deze instelling geef je aan dat dit element beschikbaar is voor vertalingen. Dit is alleen relevant als je een meertalige website bouwt.
Link-instellingen
Aan veel elementen kun je een link koppelen. Als een bezoeker erop klikt, gaat hij naar de ingestelde bestemming.
| Linktype | Wanneer gebruik je dit |
|---|---|
| Pagina | Link naar een andere pagina binnen je eigen website |
| URL | Link naar een externe website |
| Bij klikken opent het mailprogramma van je bezoeker | |
| Telefoon | Maakt het nummer klikbaar — vooral handig op mobiel |
| Bloklink | Springt naar een ander blok op dezelfde pagina — ideaal voor onepagers |
Bij Link doel kies je waar de link opent: in hetzelfde venster, in een nieuw tabblad, in het hoofdvenster, of in een pop-up (popin).
Media-instellingen
Bij afbeeldingen:
- Afbeelding — selecteer een afbeelding uit je bestandsbeheer
- Afbeelding grootte — kies de breedte waarop de afbeelding wordt geladen: 240, 320, 480, 640, 960, 1280 of 1920 pixels. Een kleiner formaat laadt sneller
- Afbeelding vulkleur — alleen voor SVG-afbeeldingen: hiermee vervang je de kleuren in de SVG door een kleur die je zelf kiest
Bij video:
- Video — kies bij Type of je een URL of een Bestand gebruikt. Bij URL plak je de link van een YouTube-, Vimeo-, bunny.net- of TikTok-video; bij Bestand kies je een geüpload videobestand
- Verhouding — kies de beeldverhouding (16:9, 4:3, 1:1, etc.)
- Positie — waar de video binnen het element staat
- Passend — of de video de container opvult of de originele verhouding behoudt
Toegankelijkheid (Aria label)
Het Aria label is een beschrijving die niet zichtbaar is op je pagina, maar wel door schermlezers wordt voorgelezen. Dit is belangrijk voor bezoekers die je website niet kunnen zien, zoals blinden en slechtzienden.
Voeg een aria label toe aan:
- Knoppen zonder zichtbare tekst (bijvoorbeeld een hamburgermenu-icoon)
- Afbeeldingen die belangrijke informatie bevatten
Beschrijf altijd de actie (bijvoorbeeld "Menu openen"), niet het uiterlijk (bijvoorbeeld "drie streepjes"). Zo weet iemand met een schermlezer wat er gebeurt als hij klikt.
Scroll-animaties
Met scrolleffecten kun je elementen laten animeren wanneer een bezoeker naar beneden scrolt en het element in beeld komt. Dit geeft je pagina een dynamisch, professioneel gevoel.
| Instelling | Wat doet het |
|---|---|
| Scrollsnelheid | Creëert een parallax-effect: het element scrolt sneller of langzamer mee dan de rest van de pagina. 100% is de normale snelheid |
| Effect | Het type animatie dat wordt afgespeeld (zie hieronder) |
| Effect start | Op welk punt het effect begint — als percentage of pixels vanaf de rand van het scherm |
| Effect terugkeren | Of de animatie ook wordt afgespeeld als je bezoeker weer omhoog scrolt |
Beschikbare effecten:
- Infaden (geleidelijk zichtbaar worden)
- Inschuiven van links, rechts, boven of onder
- Inzoomen (van klein naar normaal)
- Uitzoomen (van groot naar normaal)
Performance (Lazy load)
Lazy load zorgt ervoor dat een afbeelding of video pas laadt zodra je bezoeker er bijna is (ernaartoe scrolt). Dit maakt je pagina sneller, omdat niet alles in één keer hoeft te laden.
Lazy load is een aanvinkvakje per element. Bij de kant-en-klare blokken uit de bibliotheek staat het meestal al aan. Zet het uit voor beeld dat meteen bovenaan je pagina zichtbaar is (boven de vouw) — dat wil je juist direct laden, zodat je bezoeker geen lege plek ziet.
Element-specifieke instellingen
Sommige elementen hebben extra instellingen die alleen bij dat type voorkomen:
Formulieren:
Een formulier verstuurt inzendingen via e-mail. De uitgebreide instellingen — ontvanger, bevestigingsmail, spambeveiliging en het overzicht van reacties — stel je in via de formulierbouwer (zie de formulier-artikelen).
Knoppen:
Een knop is een gestileerde link. Je stelt een link in (naar een pagina, URL, e-mail, telefoonnummer of ander blok) en kiest een linkstijl en een link doel. Er zijn geen 'verzend'- of 'reset'-knoptypen zoals in een klassiek HTML-formulier.
Collectie-items:
- Welke collectie gekoppeld is
- Filteropties
FAQ
Wat is het verschil tussen "verbergen" en "verwijderen"?
Verbergen maakt het element onzichtbaar op bepaalde schermformaten, maar het blijft bestaan in je pagina. Verwijderen haalt het element echt weg. Gebruik verbergen als je iets tijdelijk wilt uitschakelen of alleen op bepaalde apparaten wilt tonen.
Moet ik altijd een aria label toevoegen?
Niet overal, maar wél bij knoppen zonder tekst en afbeeldingen die belangrijke informatie bevatten. Het maakt je website een stuk toegankelijker voor mensen met een visuele beperking.
Hoe vind ik een blok terug als ik een bloklink wil maken?
Geef het doelblok eerst een naam via Instellingen → Naam (in onepager menu). Die naam verschijnt dan in de lijst wanneer je een bloklink instelt — veel makkelijker dan zoeken in een lijst zonder namen.