Studio Two-editor: Met het Inspector-paneel werken

Bewerk de eigenschappen van een element, onderdeel of pagina vanuit het Inspector-paneel. Stel in hoe elementen het formaat ervan op breekpunten wijzigen, pas het ontwerp aan, voeg beweging toe en koppel inhoud aan een gegevensbron, allemaal vanaf één plek.

Bepaal hoe een element eruitziet en zich gedraagt op breekpunten vanaf het Ontwerp-tabblad. Dit is het eerste tabblad dat je in het Inspector-paneel ziet en het bevat alles, van grootte en afstand tot kleur, typografie en aangepaste CSS.

Klik op de pictogrammen bovenaan het tabblad om het geselecteerde element op het bovenliggende element uit te lijnen. Onder die pictogrammen zijn de beschikbare onderdelen afhankelijk van het element dat je selecteert:

• Grootte: Stel de breedte en hoogte van het element in en kies hoe het formaat op verschillende schermen wordt gewijzigd.
• Ontwerp element: Stel het uiterlijk van het element in, inclusief kleuren, randen, hoeken, schaduwen en typografie. Wanneer elementen uit meerdere onderdelen zijn opgebouwd (bijvoorbeeld: menu) of hun eigen aanwijs- en uitgeschakelde statussen hebben (bijvoorbeeld: knop), kies je eerst het onderdeel of de status die je aan het stylen bent.
• Indeling (containers en onderdelen): Pas de manier waarop elementen in hun bovenliggende element zijn gerangschikt aan. Kies een rasterindeling, stel de opvulling in en beslis wat er gebeurt met overlopende inhoud. Door Verticale afstand te veranderen van Automatisch naar Handmatig kun je elementen op elk breekpunt anders plaatsen.
• Positie: Kies een positietype (bijvoorbeeld: sticky, vastgezet) en stel de marges en docking in om ervoor te zorgen dat het element op zijn plaats blijft terwijl de schermgrootte verandert.
• Uiterlijk: Stel de dekking en rotatie van het element in.
• Cursor: Voeg een aangepaste cursor toe aan een element, onderdeel of pagina.
• Anker: Voeg een anker toe zodat je rechtstreeks naar het element kunt linken en de anker-URL kunt kopiëren.
• Custom CSS: Schrijf je eigen CSS voor het geselecteerde element.

Voeg beweging toe aan elementen en onderdelen vanaf het Beweging-tabblad. Je kunt verschillende soorten animaties toepassen op hetzelfde element. Een element kan bijvoorbeeld infaden terwijl het wordt geladen, reageren op de cursor van de bezoeker en verschuiven terwijl ze scrollen.

Kies het gewenste type beweging:

• Entree: Animatie van het element terwijl het voor het eerst wordt geladen. Laat het bijvoorbeeld vergroten, infaden of onder een hoek draaien.

• Loop: animeer het element in een doorlopende loop, die niet wordt getriggerd door een specifieke actie.

• Scrollen: Animatie van het element terwijl de bezoeker op en neer op de pagina scrolt.

• Muiseffecten: Laat het element reageren op de beweging van de cursor met een animatie.

• Klikken: animeer het element wanneer een bezoeker erop klikt.

• Aanwijzen: animeer het element wanneer een bezoeker het aanwijst.
  Let op: Sommige elementen, zoals knoppen en menu's, bieden een ingebouwde aanwijsstatus, zodat je niet de optie ziet om nog een aanwijsanimatie toe te voegen. Om de aanwijsstatus aan te passen, ga je naar het Ontwerp-tabblad en selecteer je Aanwijzen onder Status.

Stel geavanceerd gedrag in voor het door jou gekozen element op het Instellingen-tabblad.

• Gegevensbronnen: Koppel een pagina, onderdeel of container aan een gegevensbron. De elementen erin kunnen dan de gegevens, acties en functionaliteit van die bron gebruiken. Klik op Bron koppelen om aan de slag te gaan.

• Eigenschappen: Bewerk de inhoud en het gedrag van het geselecteerde element. De opties zijn afhankelijk van het element. Bij het selecteren van een knop kun je bijvoorbeeld de tekst en link aanpassen, of uitschakelen. Klik naast een veld op het Aan gegevens koppelen-pictogram  om het aan een gegevensbron te koppelen in plaats van handmatig een waarde in te voeren, of op Instellen met AI om hulp van Aria te krijgen.

• Toegankelijkheid: Maak het element gemakkelijker te gebruiken met ondersteunende technologie. Afhankelijk van het element kun je de rol instellen, het als decoratief markeren, een toegankelijke naam toevoegen en kiezen hoe schermlezers updates aankondigen.

• Geavanceerd:

  • Zichtbaarheidsvoorwaarde: Verberg het element wanneer een voorwaarde uit een gegevensbron waar / onwaar is.

  • Gebeurtenis-handlers: Voer een functie uit wanneer er iets met het element gebeurt, zoals een klik of een muisaanwijzing. Gebeurtenis-handlers zijn beschikbaar voor bepaalde elementen, zoals knoppen.

Klik op een vraag hieronder om meer te lezen.