Ai designer di template

Se il tuo template offre un'esperienza di modifica meravigliosa su slidde.co, i clienti ti contatteranno quando vorranno cambiare il design o espanderlo in più pagine.

Un utente senza esperienza di codifica o design può utilizzare l'editor di testo ricco, cambiando le immagini da solo. Ma a volte un template bello può essere troppo complesso da adattare facilmente alle loro esigenze.

Ecco alcuni suggerimenti.

Scrivere tutorial

Usa Nascosto in Diapositiva per scrivere un tutorial su come utilizzare i tuoi template. Ecco un esempio

Modifica di elementi animati nascosti

Se hai animazioni che nascondono determinati testi/immagini, come opacity: 0 o display: none, puoi passare il mouse sul nome dello stile CSS e cliccare sull'icona di modifica. Quindi seleziona l'opzione "nascosto nel canvas" per applicarla solo quando esporti un vero sito web. In questo modo, il tuo utente può modificare facilmente gli elementi nell'editor.

Usa variabili

Puoi impostare variabili CSS per permettere ai tuoi clienti di cambiare facilmente i colori o altri attributi dei tuoi template.

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

E puoi applicarlo a tutti i discendenti dell'elemento, incluso se stesso

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

Ecco la documentazione ufficiale per una guida più approfondita.

Stile per liste di elementi

Quando stai stilizzando liste di elementi, selettori avanzati potrebbero essere applicati per migliorare l'esperienza utente.

Se stili una lista di pulsanti con color:red, color:blue, color:green, quando l'utente ha un numero di pulsanti diverso da 3, o accidentalmente elimina qualche pulsante, dovrà stilizzare di nuovo i pulsanti da solo.

Tuttavia, se fai quanto segue a un Lista di pulsanti,

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

Indipendentemente da quanti pulsanti l'utente abbia, finiranno sempre con una sequenza di pulsanti dai colori alternati.

Lo stesso principio può essere applicato a un elenco di immagini.

E puoi leggere di più su nth-child e nth-of-type per conoscere le loro grammatiche specifiche.