Studio Editor: Problemen oplossen tussen de editor en de live website
5 min
In dit artikel
- Het breekpunt en de viewport-groottes laten overeenkomen
- Marge-eenheden uitlijnen
- Responsief gedrag op één lijn brengen
- Zichtbaarheid element controleren
Wanneer je de gepubliceerde versie van een Studio Editor-website bekijkt, merk je mogelijk dat deze er anders uitziet dan in je editor. Deze verschillen zijn meestal minimaal, maar kunnen ervoor zorgen dat elementen er slecht uitgelijnd of afgesneden uitzien.
Over het algemeen worden deze verschillen veroorzaakt door enkele instellingen van het element (grootte, positie en gedrag) op viewports. Gebruik de suggesties in dit artikel om mogelijke oplossingen te vinden en de consistentie op verschillende schermformaten te behouden.
Heb je de website onlangs bewerkt?
We raden aan te controleren of je al je wijzigingen hebt gepubliceerd en dat je de nieuwste versie van de website bekijkt. Je kunt ook browsertools gebruiken om verschillende viewports op één apparaat te controleren.
Het breekpunt en de viewport-groottes laten overeenkomen
Als de live website er anders uitziet dan wat je in je editor ziet, kan dit gerelateerd zijn aan breekpunten en de bewerkingsgrootte.
Breekpunten zijn schermgroottebereiken die je gebruikt om een website te ontwerpen voor verschillende apparaten (dat wil zeggen: viewports). Je kunt een specifieke bewerkingsgrootte binnen dit bereik instellen. In een breekpunt van 320-750px kun je bijvoorbeeld de bewerkingsgrootte instellen als 500px.
Kijkvensters die buiten de gedefinieerde bereiken vallen, zijn niet geoptimaliseerd en kunnen uitlijnings- en indelingsproblemen hebben. Als je een probleem opmerkt met een specifieke viewport, raden we aan de bewerkingsgrootte in te stellen zodat deze overeenkomt en aanpassingen aan te brengen.
Om je bewerkingsgrootte in te stellen:
- Ga naar de relevante pagina en het breekpunt in de editor.
- Klik bovenaan op de huidige bewerkingsgrootte.
- Voer de nieuwe waarde in naast Grootte bewerken.
- Klik op Toepassen.
- (Optioneel) Pas de website aan zoals jij wilt.
Ervaar je andere problemen met alle breekpunten?
Gebruik onze gids om problemen met slecht uitgelijnde elementen, tekstgrootte en meer op te lossen.
Marge-eenheden uitlijnen
Het gebruik van verschillende marge-eenheden in zusterelementen (elementen die een bovenliggend onderdeel of een bovenliggende container delen) kan ervoor zorgen dat de inhoud slecht uitgelijnd of vervormd raakt. We raden aan dezelfde marge-eenheden (%, px, px*, enzovoort) te gebruiken voor alle elementen uit de klas in een enkele container of onderdeel.
Om de marge-eenheden van een element te wijzigen:
- Selecteer het element.
- Klik rechtsboven in de editor op het Inspector openen-pictogram
. - Scrol omlaag naar Positie.
- Klik op de dropdown naast Marges.
- Selecteer de betreffende eenheid.
Responsief gedrag op één lijn brengen
Bovenliggende en onderliggende elementen met tegensprekend responsief gedrag kunnen problemen veroorzaken met de inhoud op de live website.
Stel dat er een knop aan een container is gekoppeld. Het responsieve gedrag van de knop is Vast en de container is ingesteld op Proportioneel schalen. Aangezien de knop vast is, wijzigt hij het formaat ervan met de bovenliggende container niet, wat mogelijk leidt tot lege ruimtes, overlappende elementen en afgesneden elementen op de live website. Dit kan ook gebeuren wanneer een van de elementen het gemengd responsieve gedrag heeft.
Om dit probleem op te lossen, raden we aan het responsieve gedrag van de elementen op elkaar af te stemmen.
Om het responsieve gedrag van een element te wijzigen:
- Selecteer het relevante breekpunt.
- Selecteer het element.
- Klik op het Inspector openen-pictogram rechtsboven in de editor.
- Selecteer een optie in de Responsief gedrag-dropdown die is uitgelijnd met het bovenliggende of onderliggende element.
Let op:
Deze verschillen kunnen ook de hoogte van elementen beïnvloeden, wat leidt tot ongewenste lege ruimtes op de website. Lees meer over het oplossen van lege ruimtes.
Zichtbaarheid element controleren
Mogelijk merk je dat je een element op sommige schermformaten kunt zien, maar niet op andere. Dit komt over het algemeen omdat het element verborgen is voor bepaalde breekpunten. Je kunt het Lagen-paneel gebruiken om het element te vinden en het weer te geven in de gewenste viewports.
Om de zichtbaarheid van een element te controleren:
- Ga naar je editor en open de betreffende pagina.
- Selecteer een breekpunt bovenaan de editor.
- Klik links op Lagen
. - Zoek het verborgen element in de lijst.
- (Optioneel) Klik op het Weergeven-pictogram
.
Let op:
Wijzigingen zoals het verwijderen van een element of het naar een andere onderdeel/container verplaatsen, zijn van toepassing op alle breekpunten — aan welk breekpunt je ook werkt. Als je een element alleen op bepaalde breekpunten wilt weergeven, kun je het verbergen via het Rechts klikken-menu.