A los diseñadores de plantillas

Si tu plantilla ofrece una experiencia de edición maravillosa en slidde.co, los clientes te contactarán cuando deseen cambiar el diseño o expandirlo a múltiples páginas.

Un usuario sin experiencia en codificación o diseño puede usar el editor de texto enriquecido, cambiando imágenes por su cuenta. Pero a veces, una plantilla hermosa puede ser demasiado compleja para ajustarse fácilmente a sus necesidades.

Aquí tienes varios consejos.

Escribir tutoriales

Usa Oculto en Diapositiva para escribir un tutorial sobre cómo usar tus plantillas. Aquí tienes un ejemplo

Editar elementos ocultos animados

Si tienes animaciones que ocultan ciertos textos/imágenes, como opacity: 0 o display: none, puedes pasar el cursor sobre el nombre del estilo CSS y hacer clic en el icono de edición. Luego selecciona la opción "oculto en el lienzo" para aplicarlo solo al exportar un sitio web real. Así, tu usuario puede editar los elementos en el editor fácilmente.

Usar variables

Puedes establecer variables CSS para que tus clientes cambien fácilmente el color u otros atributos de tus plantillas.

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

Y puedes aplicarlo en todos los descendientes del elemento, incluido él mismo

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

Aquí están los documentos oficiales para una guía más detallada.

Estilizar listas de elementos.

Cuando estés estilizando listas de elementos, se pueden aplicar selectores avanzados para mejorar la experiencia del usuario.

Si estilizas una lista de botones con color:red, color:blue, color:green, cuando el usuario tenga un número de botones diferente a 3, o accidentalmente elimine algún botón, necesitarán estilizar los botones nuevamente.

Sin embargo, si haces lo siguiente a un Lista de botones,

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

No importa cuántos botones tenga el usuario, siempre terminarán con una secuencia de botones de colores alternos.

El mismo principio puede aplicarse a una lista de imágenes.

Y puedes leer más sobre nth-child y nth-of-type para aprender sobre sus gramáticas específicas.