Ervaar je problemen met het uiterlijk van de website van je klant op alle breekpunten? De Studio Editor geeft je de tools om veelvoorkomende uitdagingen op het gebied van responsiviteit aan te pakken, zoals overlappende, verkeerd geplaatste of slecht uitgelijnde elementen op verschillende schermformaten. Met de juiste aanpassingen kun je een gepolijste, professionele website maken die er op elk apparaat goed uitziet.
Tekst die te klein lijkt op bepaalde breekpunten
Ziet je tekst er te klein uit wanneer je de website van je klant op kleinere schermen bekijkt? Met behulp van het proportioneel
responsieve schalen en de max-min-instelling kun je ervoor zorgen dat je tekst er altijd goed uitziet op elk schermformaat.
Selecteer de tekst en open het Inspector-paneel. Stel eerst het Responsief gedrag in op Proportioneel schalen. Klik vervolgens onder Ontwerp op Max-min om de minimale en maximale lettergrootte in te stellen.
Verkeerd geplaatste elementen op verschillende breekpunten
Als een element op de website van je klant onverwachts van positie verschuift over verschillende schermformaten, komt dit waarschijnlijk door de docking- en marge-instellingen. Volg deze stappen om het probleem op te lossen en ervoor te zorgen dat je elementen op hun beoogde positie blijven.
De docking van het element controleren
Selecteer het relevante element en controleer de dockingpunten (bijvoorbeeld: boven, links, enzovoort) in het Inspector-paneel. Als de docking niet overeenkomt met de gewenste positie (het element is bijvoorbeeld bovenaan gedockt, maar je wilt het onderaan), kan het element verschuiven wanneer de schermgrootte verandert.
De dockingpositie wordt aangegeven door de stippellijnen op het element en de dockingpunten in het Inspector-paneel (onder Positie). Je kunt in het Inspector-paneel op de dockingpunten klikken om ze te selecteren of te verwijderen.
De marges van het element aanpassen
Marges definiëren de afstand tussen het element en de gedockte zijden. Wanneer de schermgrootte verandert, kunnen de marges het element in verschillende richtingen 'duwen'.
Als een element bijvoorbeeld bovenaan is gedockt met een marge van 60%, wordt het automatisch omhoog verplaatst wanneer het onderdeel kleiner wordt (om de ingestelde margewaarde te behouden). Je kunt proberen de marges te verkleinen en de resultaten testen.
Wanneer de marges als percentage worden ingesteld, passen ze zich dynamisch aan de schermgrootte aan, maar tegelijkertijd kan dit onverwachte verschuivingen veroorzaken. Je kunt overwegen over te schakelen naar een eenheid met vaste grootte (dat wil zeggen: pixels) voor een consistentere positionering.
(Onderdeel met vast gedrag) De marges van elementen wijzigen naar pixels
Als je
het responsieve gedrag van je onderdeel instelt op:
'Vast' is het belangrijk om ervoor te zorgen dat de marges van de onderliggende elementen ook op pixels gebaseerd zijn.
Het gebruik van vloeiende marge-eenheden zoals percentage betekent dat de marges groter of kleiner worden afhankelijk van de schermgrootte, waardoor het element beweegt. Door over te schakelen naar marges in pixels, zorgt het element altijd voor dezelfde afstand tot de zijkanten, in plaats van de afstand te berekenen op basis van de breedte van de pagina.
Verkeerd uitgelijnde elementen op verschillende breekpunten
Als elementen in je onderdeel verkeerd worden uitgelijnd of hun indeling breken wanneer de schermgrootte verandert, is dit vaak te wijten aan inconsistente docking- of marge-instellingen.
Volg deze stappen om het probleem te identificeren en op te lossen, zodat je elementen correct worden uitgelijnd op alle schermformaten.
Zorg ervoor dat de elementen aan dezelfde kant zijn gedockt
Als elementen conflicterende docking-instellingen hebben, worden ze mogelijk niet goed uitgelijnd naarmate het scherm groter wordt.
Controleer of elementen in hetzelfde onderdeel verschillende docking-instellingen hebben. Het ene element kan bijvoorbeeld bovenaan zijn gedockt, terwijl een ander element onderaan is gedockt. We raden aan alle gerelateerde elementen aan dezelfde kant van de bovenliggende container te docken (bijvoorbeeld: boven, onder).
De dockingpositie wordt aangegeven door de stippellijnen op het element en de dockingpunten in het Inspector-paneel (onder Positie). Je kunt in het Inspector-paneel op de dockingpunten klikken om ze te selecteren of te verwijderen.
De marge-eenheden standaardiseren
Marges definiëren de ruimte tussen een element en de gedockte kant. Het gebruik van verschillende eenheden (zoals percentage versus pixels) voor marges kan ervoor zorgen dat elementen onjuist worden uitgelijnd wanneer de schermgrootte verandert.
Open het Inspector-paneel en scrol omlaag naar Positie om de huidige marges van het element te zien. Om over te schakelen naar een andere marge-eenheid, selecteer je de relevante marge en klik je vervolgens op de huidige eenheid (bijvoorbeeld: px*, %).
De relatie tussen de elementen controleren
Controleer eerst
het Lagen-paneel om te bevestigen dat de elementen zich in dezelfde bovenliggende container bevinden (bijvoorbeeld: onderdeel, cel, enzovoort). Als dat zo is, maar er geen relatie tussen hen is gedefinieerd, zullen de elementen onafhankelijk werken en kunnen ze elkaar overlappen.
Het verticaal of horizontaal
stapelen van de elementen kan dit probleem oplossen, omdat de stapel zorgt voor een consistente uitlijning op verschillende schermformaten.
Overlappende elementen op breekpunten
Bij het rangschikken van elementen kunnen ze in de editor precies goed uit elkaar staan, maar elkaar overlappen als je de live website bekijkt op verschillende viewports. Overlappen vindt meestal plaats vanwege de manier waarop elementen worden gepositioneerd of hun responsieve gedrag.
Als elementen op de website van je klant elkaar overlappen op verschillende schermformaten, volg dan deze stappen om het probleem te identificeren en op te lossen.
De positionering en docking van de elementen controleren
Wanneer elementen onafhankelijk binnen dezelfde bovenliggende container worden gepositioneerd, kunnen ze elkaar overlappen als de schermgrootte verandert. Bekijk de dockinginstellingen en positioneringseenheden om consistentie te garanderen.
Klik op elk element (bijvoorbeeld: titel, alinea, knop) en controleer hoe het is gedockt in het Inspector-paneel. Zoek naar verschillen in de docking en marges van de elementen (zoals het mixen van percentages en pixels).
Als het ene element een percentagemarge gebruikt en een ander element een vaste pixelmarge gebruikt, zullen hun posities anders verschuiven naarmate de bovenliggende container groter wordt.
Het responsieve gedrag van de elementen aanpassen
Overlappen kan ook optreden als elementen zich anders gedragen bij het wijzigen van de schermgrootte. Het ene element kan bijvoorbeeld proportioneel schalen, een ander element kan teruglopen en een derde kan vast blijven staan.
Selecteer elk element en controleer het
responsieve gedrag in het Inspector-paneel. Zoek naar elementen met gedrag dat niet overeenkomt, omdat deze de overlap kunnen veroorzaken.
De relatie tussen de elementen controleren
Controleer eerst
het Lagen-paneel om te bevestigen dat de elementen zich in dezelfde bovenliggende container bevinden (bijvoorbeeld: onderdeel, cel, enzovoort). Als dat zo is, maar er geen relatie tussen hen is gedefinieerd, zullen de elementen onafhankelijk werken en kunnen ze elkaar overlappen.
Het verticaal of horizontaal
stapelen van de elementen kan dit probleem oplossen, omdat de stapel een consistente afstand tussen de elementen behoudt.
