Studio Editor: Ontwerpen voor meerdere breekpunten
Leestijd 4 minuten
Met de Studio Editor kun je websites per breekpunt aanpassen, zodat ze er altijd goed uitzien. Breekpunten zijn schermgroottebereiken, die de mogelijke schermen en apparaten vertegenwoordigen die bezoekers meestal gebruiken (zoals tablet, mobiel).
Het ontwerp dat je op desktop maakt, sijpelt door naar tablet en mobiel. Je kunt echter wel overschrijvingen maken om het ontwerp op kleinere schermen te laten passen. Klik bovenaan op een breekpuntpictogram om aan de slag te gaan.
In dit artikel lees je meer over:
Tip:
Elk breekpunt heeft een standaard bewerkingsgrootte (schermbreedte) die je naar behoefte kunt wijzigen.
Breekpunten definiëren
De Studio Editor wordt geleverd met 3 ingebouwde breekpunten, die je op elk moment kunt aanpassen en opnieuw definiëren:
- Desktop: 1001px en hoger
- Tablet: 751px - 1000px
- Mobiel: 320px - 750px
Je kunt maximaal drie extra breekpunten toevoegen om je ontwerp nog preciezer te maken voor bepaalde schermformaten.
Je definieert de breekpunten afzonderlijk voor elke websitepagina en elk Master-onderdeel. Dit betekent dat een Master-onderdeel en de pagina waarop het zich bevindt compleet verschillende breekpunten kunnen hebben.
De onderstaande pagina heeft bijvoorbeeld 5 breekpunten gedefinieerd:
... Terwijl de Master-koptekst op die pagina 3 breekpunten heeft gedefinieerd:
Trapsgewijs ontwerp
De Studio Editor gebruikt een trapsgewijs concept als het gaat om ontwerpen voor breekpunten. Wijzigingen die je aanbrengt op grotere breekpunten, werken door op kleinere breekpunten, maar wijzigingen op kleinere breekpunten hebben geen invloed op grotere breekpunten.
Een knop die bijvoorbeeld paars is ontworpen op desktop, is automatisch paars op tablet en mobiel. Als je de kleur op mobiel wijzigt, is de knop nog steeds paars op tablet en desktop.
Let op:
Sommige wijzigingen gelden voor alle breekpunten, bijvoorbeeld wanneer je elementen vervangt of verwijdert. Lees meer over deze wijzigingen in het onderstaande gedeelte.
Wijzigingen die van toepassing zijn op alle breekpunten
Sommige soorten acties worden automatisch toegepast op alle breekpunten en kunnen niet worden aangepast aan een bepaalde viewport.
Gegevenswijzigingen
Wanneer je de inhoud van een element bewerkt, wijzig je in feite de gegevens ervan. Het wijzigen van de link van een element of de bron van een afbeelding is bijvoorbeeld van toepassing op alle breekpunten.
Een ander voorbeeld is wanneer je elementen van de pagina vervangt of verwijdert – het element wordt automatisch vervangen / verwijderd op alle breekpunten.
Wist je dit al?
Je kunt elementen verbergen voor specifieke breekpunten. Ga naar het relevante breekpunt, klik met de rechtermuisknop op het element en selecteer Niet weergeven.
Structurele wijzigingen
Wijzigingen in de plaats van een element in de hiërarchie van je pagina. Wanneer je bijvoorbeeld elementen op elkaar stapelt of een element naar een andere cel, verander je de paginastructuur en dit wordt weergegeven op alle breekpunten.
Overschrijvingen maken met breekpunten
Een overschrijving vindt plaats wanneer je op een specifiek breekpunt wijzigingen aanbrengt in het ontwerp van een element. Dit betekent dat het geen ontwerpwaarden meer haalt uit het grotere breekpunt erboven. Deze overschrijvingen werken wel door naar kleinere breekpunten.
Er zijn twee soorten overschrijvingen die je kunt maken:
- Ontwerp: Wijzigingen in de eigenschappen van een element, zoals kleur, rand en lettertype.
- Indeling: Wijzigt de positie en grootte van een element, zolang het niet naar een ander parent-element wordt verplaatst.
Tip:
Elementen en onderdelen in de Studio Editor worden geleverd met ingebouwd responsief gedrag. Dit bepaalt de manier waarop ze worden aangepast op kleinere breekpunten, zodat je je geen zorgen hoeft te maken over het handmatig instellen.
Ontwerpoverschrijvingen voor een specifiek breekpunt verwijderen
Je kunt het ontwerp en de indeling van een element altijd terugzetten naar de eigenschappen op het grootste breekpunt.
De eigenschappen van het element op kleinere breekpunten worden niet beïnvloed, alleen het breekpunt dat het element bevat dat je terugdraait. Als je bijvoorbeeld overschrijvingen verwijdert op tablets, heeft dit geen invloed op mobiel.
Om ontwerpoverschrijvingen op een breekpunt te verwijderen:
- Selecteer het relevante element.
- Klik op het Meer acties-pictogram
. - Klik op Overschrijvingen verwijderen.
Vond je dit artikel nuttig?
|