Aux concepteurs de modèles

Si votre modèle offre une expérience d'édition merveilleuse sur slidde.co, les clients vous contacteront lorsqu'ils voudront modifier le design ou l'étendre sur plusieurs pages.

Un utilisateur sans expérience en codage ou en design peut utiliser l'éditeur de texte enrichi pour changer les images par lui-même. Mais parfois, un beau modèle peut être trop complexe à ajuster facilement à leurs besoins.

Voici quelques conseils.

Rédaction de tutoriels

Utilisez Caché dans Diapositive pour rédiger un tutoriel sur la façon d'utiliser vos modèles. Voici un exemple

Édition des éléments cachés animés

Si vous avez des animations qui cachent certains textes/images, comme opacity: 0 ou display: none, vous pouvez survoler le nom du style CSS et cliquer sur l'icône d'édition. Ensuite, sélectionnez l'option "caché dans le canevas" pour ne l'appliquer que lors de l'exportation d'un vrai site web. Ainsi, votre utilisateur peut facilement éditer les éléments dans l'éditeur.

Utiliser des variables

Vous pouvez définir des variables CSS pour permettre à vos clients de changer facilement la coloration ou d'autres attributs de vos modèles.

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

Et vous pouvez l'appliquer à tous les descendants de l'élément, y compris lui-même

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

Voici la documentation officielle pour un guide plus approfondi.

Styliser une liste d'éléments

Lorsque vous stylisez une liste d'éléments, des sélecteurs avancés peuvent être appliqués pour améliorer l'expérience utilisateur.

Si vous stylisez une liste de boutons avec color:red, color:blue, color:green, lorsque l'utilisateur a un nombre de boutons différent de 3, ou s'il supprime accidentellement un bouton, il devra à nouveau styliser les boutons lui-même.

Cependant, si vous faites ce qui suit à un Liste de boutons,

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

Peu importe combien de boutons l'utilisateur a, il finira toujours avec une séquence de boutons aux couleurs alternées.

Le même principe peut s'appliquer à une liste d'images.

Et vous pouvez en savoir plus sur nth-child et nth-of-type pour apprendre leurs syntaxes spécifiques.