De Websitemaker Editor 2.0 gebruikt drie verschillende schermformaten: desktop, tablet en mobiel. In dit artikel leggen we uit hoe deze schermformaten werken. Daarnaast lees je hoe je elementen per schermformaat kan aanpassen of verbergen.
-
Schermformaten in de Websitemaker
-
Wijzigingen per schermformaat
-
Elementen verbergen per schermformaat
Schermformaten in de Websitemaker
Editor 2.0 past je website automatisch aan op het scherm van je bezoeker. Daardoor ziet je website er goed uit op elk apparaat, zoals een computer, tablet of mobiele telefoon.
De editor gebruikt hiervoor verschillende schermformaten, ook wel breekpunten genoemd. Elk breekpunt heeft een eigen pixelbereik. Valt het scherm van je bezoeker binnen zo'n bereik, dan past de editor de lay-out van je website daarop aan.
Bijvoorbeeld: als je een website op desktop bekijkt, zie je het volledige navigatiemenu. Op een mobiele telefoon wordt dit menu meestal automatisch vervangen door een hamburgermenu (een ingeklapt menu met drie streepjes).
In Editor 2.0 zijn de volgende breekpunten beschikbaar:
Desktop: 1025 t/m 1399 pixels (dit is het standaard breekpunt)
Tablet: 768 t/m 1024 pixels
Mobiel: 767 pixels en kleiner
Let op: controleer wijzigingen voor mobiel altijd op een echte mobiele telefoon. Het venster van je browser kleiner maken op desktop geeft namelijk niet altijd hetzelfde resultaat.
Wijzigingen per schermformaat
Sommige wijzigingen op je website gelden automatisch voor alle schermformaten. Andere wijzigingen gelden alleen voor het schermformaat waarin je op dat moment werkt (desktop, tablet of mobiel). Dit hangt af van het type wijziging dat je maakt.
Inhoud van je website
Wijzig je de inhoud van je website, bijvoorbeeld door een widget toe te voegen, een sectie te verwijderen of tekst aan te passen? Dan wordt deze wijziging automatisch doorgevoerd op alle schermformaten. Het maakt daarbij niet uit of je de wijziging doet in de desktop-, tablet- of mobiele weergave.
Bijvoorbeeld: je voegt een widget toe in de tabletweergave. Deze widget verschijnt dan ook automatisch op desktop en mobiel.
Stijl van een element
Pas je de stijl van een specifiek element aan, bijvoorbeeld de grootte van een afbeelding? Dan is het effect afhankelijk van het schermformaat waarin je op dat moment werkt:
Maak je de wijziging op desktop? Dan wordt deze automatisch toegepast op alle schermformaten, behalve als je de stijl van het element eerder hebt gewijzigd op tablet of mobiel.
Maak je de wijziging op tablet of mobiel? Dan geldt deze alleen voor dat specifieke schermformaat. Deze aparte wijziging blijft actief, ook als je het element later op desktop aanpast.
Bijvoorbeeld: op desktop staat een afbeelding rechts naast een tekstblok, maar op mobiel wil je de afbeelding juist boven de tekst tonen. In dat geval pas je de afbeelding apart aan in de mobiele weergave.
De volgende stijl-instellingen kan je per schermformaat aanpassen: uitlijning, positie, grootte en ruimte. Meer informatie over deze instellingen vind je in ons artikel over het ontwerppaneel van Editor 2.0.
Let op: heb je de stijl van een element gewijzigd voor tablet of mobiel? Dan kan je dit niet ongedaan maken door het element op desktop aan te passen. Ga in dat geval terug naar de tablet- of mobiele weergave en pas het element daar opnieuw aan.
Elementen verbergen per schermformaat
Je kan specifieke elementen ook per schermformaat verbergen. Zo kan je bijvoorbeeld een afbeelding verbergen op mobiel, terwijl deze wel zichtbaar blijft op desktop en tablet.
Verberg je een element waarin andere onderdelen staan? Dan worden die onderdelen ook verborgen. Verberg je bijvoorbeeld een kolom, dan worden alle widgets in die kolom ook verborgen.
Je kan een element op twee manieren verbergen: via het lagenpaneel of direct in de editor. Hieronder vind je voor beide opties een stappenplan.
Een element verbergen via het lagenpaneel
Volg deze 3 stappen om een element te verbergen via het lagenpaneel:
-
Selecteer linksboven in de editor het schermformaat waarop je het element wil verbergen (desktop, tablet of mobiel).
-
Klik links in het menu op Lagen.
-
Klik naast het element dat je wil verbergen op het doorgestreepte oogicoon. Het element wordt dan verborgen op het gekozen schermformaat.
Een element verbergen in de editor
Volg deze 3 stappen om een element te verbergen in de editor:
-
Selecteer linksboven in de editor het schermformaat waarop je het element wil verbergen (desktop, tablet of mobiel).
- Klik in de editor op het element dat je wil verbergen.
-
Klik in het zwevende menu op de drie puntjes, kies Verbergen voor en selecteer het schermformaat waarop je het element wil verbergen.
