Aan sjabloonontwerpers

Als uw sjabloon een geweldige beleving biedt op slidde.co, zullen klanten u benaderen wanneer ze het ontwerp willen wijzigen of uitbreiden naar meerdere pagina's.

Een gebruiker zonder programmeer- of ontwerpvaardigheden kan de rijke teksteditor gebruiken en zelf afbeeldingen wijzigen. Maar soms kan een mooi sjabloon te complex zijn om gemakkelijk aan hun behoeften aan te passen.

Hier zijn enkele tips.

Tutorials schrijven

Gebruik Verborgen in Dia om een tutorial te schrijven over hoe je je sjablonen kunt gebruiken. Hier is een voorbeeld

Bewerken van geanimeerde verborgen elementen

Als je animaties hebt die bepaalde tekst/afbeeldingen verbergen, zoals opacity: 0 of display: none, kun je over de CSS-stijlnaam zweven en op het bewerkpictogram klikken. Selecteer vervolgens de optie "verborgen in canvas" om dit alleen toe te passen bij het exporteren van een echte website. Zo kan je gebruiker de elementen gemakkelijk in de editor bewerken.

Gebruik variabelen

Je kunt CSS-variabelen instellen zodat je klanten gemakkelijk de kleuring of andere attributen van je sjablonen kunnen wijzigen.

--primary-fg: #000
--primary-bg: #fff

En je kunt het toepassen op alle afstammelingen van het element, inclusief zichzelf

color: var(--primary-fg)
background-color: var(--primary-bg)

Hier zijn de officiële documentatie voor een meer diepgaande gids.

Stijlen van lijsten met elementen.

Wanneer je lijsten met elementen stijlt, kunnen geavanceerde selectoren worden toegepast om de gebruikerservaring te verbeteren.

Als je een knoppenlijst stijlt met color:red, color:blue, color:green, en de gebruiker heeft een aantal knoppen anders dan 3, of per ongeluk verwijdert hij een knop, dan moeten ze de knoppen zelf opnieuw stijlen.

Echter, als je het volgende doet aan een Knoppenlijst,

&>*:nth-child(3n+1).color: red
&>*:nth-child(3n+2).color: green
&>*:nth-child(3n+3).color: blue

Ongeacht hoeveel knoppen de gebruiker heeft, eindigen ze altijd met een knoppenreeks van afwisselende kleuren.

Hetzelfde principe kan worden toegepast op een lijst met afbeeldingen.

En je kunt meer lezen over nth-child en nth-of-type om meer te leren over hun specifieke grammatica's.