Studio Editor: Werken met docking, marges en opvulling
Leestijd 9 minuten
In een steeds veranderende wereld van apparaten is het belangrijk om de positie van je elementen te bepalen, zodat ze er op verschillende schermformaten precies zo uitzien als jij wilt. In de Studio Editor worden elementen automatisch gedockt om ervoor te zorgen dat dat gebeurt.
Dit geeft je de vrijheid om elementen te verplaatsen, zonder dat je je zorgen hoeft te maken over positionering op breekpunten. Je kunt de positie, docking en marges echter altijd zelf instellen vanuit het Inspector-paneel.
Ga naar onze Wix Studio Academy om extra Wix Studio-webinars, instructievideo's en cursussen te bekijken.
In dit artikel lees je meer over:
Elementen op het canvas positioneren
Met slepen en neerzetten kun je de positie van je element rechtstreeks op het canvas instellen, afzonderlijk voor elk breekpunt. Zo kun je ervoor zorgen dat het element er op elk scherm echt op zijn plaats uitziet.
Zolang het element binnen dezelfde parent (zoals een onderdeel of cel) blijft, kun je het verplaatsen en heeft het geen invloed op andere breekpunten. Als je een element naar een andere parent verplaatst, is dit van toepassing op alle breekpunten.
X- en Y-coördinaten in het Inspector-paneel
Je kunt de X- en Y-coördinaten van je element controleren om de exacte positie op de huidige canvasgrootte te zien.
- X: Het horizontale vlak, van de linkerrand tot de rechterrand van het parent-element (bijv. onderdeel, container, stapel).
- Y: Het verticale vlak, van de bovenkant naar de onderkant van het parent-element.
In het onderstaande voorbeeld zie je de px*-waarde negatief worden wanneer we het tekstelement buiten het parent-element, de cel, verplaatsen.
Wat is px*?
px* is een maateenheid in de Studio Editor die de 'pixels op canvas' weergeeft. De px*-waarde die je ziet is het pixelequivalent, relevant voor je huidige canvasgrootte. Schakel over naar een ander breekpunt om te zien hoe de px*-waarde automatisch verandert.
Automatische en handmatige docking
Wanneer je een nieuw element in de Editor toevoegt, wordt het automatisch gedockt om ervoor te zorgen dat het op alle schermen en apparaten op zijn plaats blijft. Je kunt automatisch docken echter altijd uitschakelen en de dockingpunten handmatig kiezen.
Klik op een onderwerp hieronder om meer te lezen.
Automatisch docken in de Editor
De docking handmatig aanpassen
klikken zodat het element altijd in het midden staat.Marges gebruiken bij het docken van elementen
Wanneer een element is gedockt, helpen marges om een vaste afstand te houden tussen het element en de randen van het parent-element. Je kunt ook marges toevoegen aan de zijden die niet zijn gedockt. Marges fungeren als een buffer en voorkomen overlap met andere elementen.
In het onderstaande voorbeeld is het tekstelement gedockt aan de boven- en rechterkant van de cel. Als je de marges in het Inspector-paneel aanwijst, worden ze gehighlight op het canvas:
Om een marge te maken of te bewerken:
- Selecteer het element.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram
.
- Scrol omlaag naar Positie.
- Klik op een marge (zoals boven, links) onder Docking, marges en opvulling.
- (Optioneel) Klik op het Individueel bewerken-pictogram
om alleen de geselecteerde kant te bewerken. - Voer een waarde in voor de marge.
Tip: Klik op de meting (bijvoorbeeld px*, %) om dit te wijzigen.
Marge-eenheden:
Marges kunnen worden ingesteld in px*, pixels (px), percentage (%), viewport-hoogte (vh) en viewport-breedte (vb). Elke eenheid heeft een andere uitkomst wanneer het formaat van het scherm wordt aangepast. Bekijk het verschil in het gedrag van de eenheden door je canvas te verslepen om het formaat te wijzigen.
Opvulling toevoegen rond responsieve containers
Voeg opvulling toe aan containers om een ruimte te creëren tussen de randen (bovenkant, onderkant of zijkanten) en de inhoud erin. Opvulling kan worden toegevoegd aan alle soorten responsieve containers, waaronder basiscontainers, stapels, flexboxen, repeaters, cellen, onderdelen en pagina's.
Om opvulling toe te voegen:
- Selecteer het element.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram.
- Scrol omlaag naar Positie.
- Afhankelijk van het type responsieve container volg je de stappen om opvulling toe te voegen:
Pagina, onderdeel of cel
.Andere containers
En nu?
Je kunt de opvulling rechtstreeks op het canvas aanpassen door te slepen en neer te zetten. Selecteer de responsieve container en wijs de opvulling aan om deze optie te zien.
Voorkomen dat elementen elkaar overlappen
Bij het positioneren van elementen is het belangrijk om ervoor te zorgen dat ze elkaar niet overlappen op kleinere breekpunten. Bekijk onze tips hieronder om dit te voorkomen.
Bovenaan docken
Cellen toevoegen om de indeling te organiseren
Een stapel toepassen
Als je momenteel ongewenste overlap tussen elementen ziet, bekijk dan deze instructievideo om het probleem op te lossen.
Vond je dit artikel nuttig?
|