Studio Editor: Over CSS-bewerking

Voeg je eigen CSS-code toe aan stijlelementen en hun individuele onderdelen. CSS vergroot je mogelijkheden terwijl je websites voor klanten bouwt, omdat je ontwerpopties en gedragswijzigingen kunt toepassen die niet beschikbaar zijn in de Editor.

Het toevoegen van CSS aan elementen opent een hele reeks nieuwe stijlmogelijkheden. Hiermee kun je het ontwerp van een element naar wens wijzigen, wat vooral handig is voor opties die nog niet beschikbaar zijn in de Editor.

CSS geeft je ook de vrijheid om elementen te animeren zoals je wilt. Maak je eigen animaties met de eigenschappen van je keuze en pas indien nodig meerdere animaties toe op een element.

Een ander belangrijk gebruik van CSS is het maximaliseren van de responsiviteit. Gebruik bijvoorbeeld mediaquery's (op basis van viewport-grootte of apparaatmogelijkheden) om ervoor te zorgen dat een element er op alle schermen ideaal uitziet.

In de Studio Editor worden elementen verdeeld in semantische klassen, zodat je het individuele onderdeel dat je nodig hebt kunt aanpassen. Knoppen hebben bijvoorbeeld 3 CSS-klassen:

Zodra je een klasse uit de lijst kiest, wordt deze automatisch aan de code toegevoegd, zodat je aan de slag kunt.

Je kunt ook eigen CSS-klassen toevoegen aan de global.css-pagina. Hiermee kun je styling en opmaak toepassen op de elementen die je met je aangepaste klasse aanwijst, in plaats van op alle exemplaren van één specifiek element. Lees meer over aangepaste klassen

Het codepaneel in de Editor bevat een algemene CSS-pagina voor al je bewerkingen. De code op deze pagina is globaal van toepassing op elk element met de relevante klasse, op alle websitepagina's.

De CSS-code die je aan deze pagina toevoegt, heeft voorrang op selecties die je in andere panelen in de Editor maakt. Als je bijvoorbeeld CSS gebruikt om de achtergrond van alle knoppen te wijzigen, overschrijft het de achtergrond die je instelt in het Inspector-paneel.