Samenvatting
De editor in Mach3Blocks is de werkplek waar je pagina's opbouwt, bekijkt en bijstuurt. In dit artikel krijg je een globaal overzicht van de belangrijkste knoppen en functies: het canvas, de bovenste toolbar, apparaatweergaven, preview, kleurmodus, blokknoppen, elementselectie, het rechter paneel, codefuncties, debug-modus en automatisch opslaan. Voor de uitgebreide uitleg verwijzen we naar de bijbehorende artikelen.
Hoe werkt het
De editor in grote lijnen
De editor bestaat uit een paar vaste onderdelen:
| Onderdeel | Waarvoor gebruik je het? |
|---|---|
| Canvas | Het midden van het scherm. Hier zie en bewerk je de pagina zoals die is opgebouwd uit blokken en elementen. |
| Bovenste toolbar | Snelle functies zoals preview, apparaatweergaven, kleurmodus en debug. Afhankelijk van je rechten en context kunnen hier ook code- of themafuncties staan. |
| Blokbediening | Knoppen die verschijnen wanneer je met je muis over een blok beweegt. Hiermee beheer je het hele blok. |
| Elementselectie | Klik op een tekst, afbeelding, knop of ander element om alleen dat onderdeel te bewerken. |
| Rechter paneel | Hier pas je opmaak, instellingen, overgangen en element-specifieke opties aan. |
| Breadcrumb | De balk onderaan waarmee je snel naar een hoger of lager niveau in de paginastructuur gaat. |
Gebruik dit artikel als orientatie. Wil je precies weten hoe een onderdeel werkt, open dan het gerelateerde artikel onderaan.
Canvas en selectie
Het canvas is het bewerkbare voorbeeld van je pagina. Beweeg je muis over de pagina om blokken en elementen te herkennen.
- Beweeg over een element om de selectierand te zien.
- Klik op een element om het te selecteren.
- Klik op de rand of bediening van een blok om het hele blok te selecteren.
- Gebruik de breadcrumb onderaan als een element lastig aanklikbaar is of diep in een container, rij of kolom zit.
Na selectie opent rechts het paneel met de opties die bij dat blok of element horen.
Bovenste toolbar
In de bovenste toolbar staan functies die invloed hebben op hoe je werkt in de editor, hoe je de pagina bekijkt of hoe je problemen opspoort.
| Knop of functie | Wat doet het? | Verdieping |
|---|---|---|
| Preview / oog-icoon | Opent een voorbeeld van de pagina zoals bezoekers die zien. | Responsive design en breakpoints |
| Apparaatweergaven | Schakelt het canvas tussen desktop, laptop, tablet en telefoon. | Responsive design en breakpoints |
| Kleurmodus / zon- of maan-icoon | Wisselt tussen lichte en donkere editorweergave. Dit verandert alleen je editor, niet de website voor bezoekers. | Dit artikel |
| Thema / verfkwast | Opent de thema-instellingen voor websitebrede stijl. | Thema instellingen, Werken met het thema |
| Website code | Opent code die voor de hele website geldt. | Code invoegen (website, pagina en blok) |
| Pagina code | Opent code die alleen voor de huidige pagina geldt. | Code invoegen (website, pagina en blok) |
| Debug / kever-icoon | Opent hulpmiddelen om fouten in blokken of content sneller te vinden. | Dit artikel en later Debug-modus en snelle diagnose in editor |
Niet elke knop is altijd zichtbaar. Sommige functies verschijnen alleen wanneer ze relevant zijn voor de pagina, je rechten of het type website waar je aan werkt.
Apparaatweergaven en preview
Met de apparaatknoppen bekijk je hoe het canvas reageert op verschillende schermgroottes. Dit is vooral belangrijk bij responsive opmaak.
Mach3Blocks gebruikt vijf hoofdweergaven:
| Weergave | Schermgrootte |
|---|---|
| Desktop | Groot scherm (≥ 1280 px) |
| Laptop | 1024–1280 px |
| Tablet | 768–1024 px |
| Telefoon liggend | 480–768 px |
| Telefoon staand | < 480 px |
Belangrijk: als je opmaak aanpast terwijl een specifieke apparaatweergave actief is, kan die instelling voor dat schermformaat gelden. Controleer daarom bij responsive werk altijd of je in de juiste weergave zit.
Gebruik de preview-knop om te controleren hoe de pagina buiten de editor wordt getoond. De editorweergave is handig tijdens het bouwen; de preview is beter voor de eindcontrole.
Blokknoppen
Wanneer je over een blok beweegt, verschijnt er een verticale werkbalk bij het blok. Daarmee beheer je het blok als geheel.
| Knop of optie | Wat doet het? |
|---|---|
| Globaal maken | Maakt een blok herbruikbaar op meerdere pagina's. Wijzigingen werken dan door op alle plekken waar dat globale blok staat. |
| Naar favorieten | Bewaart het blok als favoriet zodat je het later sneller kunt invoegen. |
| Blok selecteren | Selecteert het hele blok voor opmaak en instellingen in het rechter paneel. |
| Verplaatsen | Zet het blok in verplaatsmodus, zodat je het ergens anders op de pagina kunt plaatsen. |
| Hover-preview | Laat zien hoe hover-states eruitzien, bijvoorbeeld bij knoppen of kaarten. |
| Code bewerken | Opent de blokcode voor HTML, LESS en JavaScript van dat specifieke blok. |
| Meer opties | Opent extra acties zoals kopieren, opslaan in een bibliotheek, verborgen elementen tonen, blokinformatie bekijken of verwijderen. |
Voor alle details per knop gebruik je het artikel Blok knoppen.
Elementen en de breadcrumb
Een blok bestaat uit elementen, zoals headings, tekst, afbeeldingen, iconen, knoppen, containers, rijen en kolommen. Klik op een element om alleen dat onderdeel aan te passen.
Soms klik je niet meteen het juiste niveau aan. Gebruik dan de breadcrumb onderaan het scherm. Daarmee kun je bijvoorbeeld van een knop naar de kolom, rij, container of het hele blok gaan.
Dit is handig bij:
- elementen die over elkaar heen liggen;
- kleine onderdelen zoals iconen of inline links;
- geneste structuren met containers, rijen en kolommen;
- het verschil tussen een element aanpassen en het hele blok aanpassen.
Rechter paneel
Het rechter paneel verandert mee met je selectie. Selecteer je een blok, dan zie je blokopties. Selecteer je een knop, afbeelding of formulier, dan zie je opties voor dat specifieke element.
Veelgebruikte tabbladen zijn:
| Tabblad | Wat stel je hier in? |
|---|---|
| Opmaak | Visuele stijl, zoals kleur, ruimte, grootte, rand, schaduw en positie. |
| Overgangen | Animaties en hover-overgangen, bijvoorbeeld een knop die vloeiend van kleur verandert. |
| Instellingen | Gedrag en eigenschappen, zoals verbergen per schermgrootte, linkdoel, media, aria-label of lazy load. |
| Selecteer een subelement | Snel wisselen naar een onderdeel binnen een samengesteld element. |
Bij sommige elementen verschijnen extra knoppen of popups. Een formulier heeft bijvoorbeeld een formulier-builder; codefuncties openen een aparte code-editor.
Blokken invoegen en beheren
Nieuwe content voeg je meestal toe als blok. Dat kan via de blokbibliotheek of via een plusknop op de plek waar je het blok wilt plaatsen.
Globaal werkt de flow zo:
- Open de pagina in de editor.
- Kies waar het nieuwe blok moet komen.
- Open de blokbibliotheek of gebruik de plusknop bij de gewenste positie.
- Kies een blok uit een bibliotheek, favorieten of globale blokken.
- Voeg het blok in en pas daarna tekst, afbeeldingen, opmaak en instellingen aan.
Gebruik Blokken in Mach3Blocks: plaatsen, verplaatsen en beheren voor het volledige stappenplan.
Thema, opmaak en kleurmodi
Niet elke visuele aanpassing hoort op hetzelfde niveau. Mach3Blocks werkt met meerdere lagen:
| Niveau | Wanneer gebruik je dit? |
|---|---|
| Thema | Voor de algemene stijl van de hele website, zoals kleuren, lettertypes en formulieren. |
| Blok | Voor aanpassingen aan een volledige sectie op een pagina. |
| Element | Voor een losse knop, heading, afbeelding of ander onderdeel. |
Daarnaast hebben blokken kleurmodi zoals licht, licht tint, donker tint en donker. Die bepalen hoe tekst, knoppen en iconen zich gedragen op lichte of donkere achtergronden.
Let op het verschil met de editor-kleurmodus: de zon/maan-knop verandert alleen de interface waarin jij werkt. De blokkleurmodi veranderen de uitstraling van de website zelf.
Codefuncties
Mach3Blocks heeft codefuncties op meerdere niveaus:
| Codeplek | Bereik |
|---|---|
| Website code | Geldt voor alle pagina's van de website. |
| Pagina code | Geldt alleen voor de huidige pagina. |
| Blok code | Geldt alleen voor het geselecteerde blok. |
Gebruik code alleen als je weet wat je aanpast. Een fout in HTML, LESS of JavaScript kan ervoor zorgen dat een blok anders reageert in de editor of op de live website.
Bij codeproblemen kun je de debugfuncties gebruiken om sneller te zien waar het misgaat.
Debug-modus
Klik op het debug- of kever-icoon om het debug-menu te openen. Dit menu is bedoeld voor controle en probleemdiagnose.
Belangrijke opties zijn:
Valideren
Controleert blokken op fouten in HTML en LESS. Blokken met een fout worden gemarkeerd, zodat je gericht kunt zoeken.
Content uitschakelen
Schakelt de inhoud tijdelijk uit en geeft blokken een vaste hoogte. Dit is handig als een codefout ervoor zorgt dat je een blok of element niet meer goed kunt aanklikken.
Gebruik debug-modus vooral wanneer:
- een blok niet meer goed aanklikbaar is;
- custom code onverwacht gedrag veroorzaakt;
- de editorweergave anders reageert dan verwacht;
- je snel wilt controleren of blokken codefouten bevatten.
Een later taakgericht troubleshootingartikel kan dieper ingaan op diagnoseflows. Dit artikel blijft het algemene interface-overzicht.
Automatisch opslaan
Wijzigingen in de editor worden automatisch opgeslagen. Je hoeft dus niet na elke tekst- of opmaakwijziging zelf op te slaan.
Werk wel zorgvuldig bij grotere wijzigingen:
- controleer tussendoor de preview;
- test belangrijke pagina's op meerdere schermformaten;
- wees voorzichtig met verwijderen, code en globale blokken;
- publiceer of controleer de live website pas wanneer de pagina goed staat.
Wanneer gebruik je dit artikel?
- Je bent nieuw in de editor en wilt weten waar alle hoofdknoppen voor zijn.
- Je zoekt het verschil tussen canvas, toolbar, rechter paneel en blokknoppen.
- Je wilt weten waar preview, apparaatweergaven, kleurmodus en debug-modus voor dienen.
- Je wilt bepalen welk vervolgartikel je nodig hebt voor een specifieke handeling.