Para designers de templates

Se o seu template oferece uma experiência de edição maravilhosa no slidde.co, os clientes irão procurá-lo quando quiserem alterar o design ou expandi-lo para várias páginas.

Um usuário sem experiência em codificação ou design pode usar o editor de texto rico, alterando imagens por conta própria. Mas, às vezes, um template bonito pode ser muito complexo para ajustar facilmente às suas necessidades.

Aqui estão algumas dicas.

Escrevendo tutoriais

Use Oculto em Slide para escrever um tutorial sobre como usar seus templates. Aqui está um exemplo

Editando elementos ocultos animados

Se você tiver animações que ocultam certos textos/imagens, como opacity: 0 ou display: none, você pode passar o mouse sobre o nome do estilo CSS e clicar no ícone de edição. Em seguida, selecione a opção "oculto na tela" para aplicar isso apenas ao exportar um site real. Assim, seu usuário pode editar os elementos no editor facilmente.

Use variáveis

Você pode definir variáveis CSS para permitir que seus clientes alterem facilmente a coloração ou outros atributos dos seus templates.

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

E você pode aplicá-las em todos os descendentes do elemento, incluindo ele mesmo

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

Aqui estão os documentos oficiais para um guia mais detalhado.

Estilizando lista de elementos.

Quando você está estilizando uma lista de elementos, seletores avançados podem ser aplicados para melhorar a experiência do usuário.

Se você estilizar uma lista de botões com color:red, color:blue, color:green, quando o usuário tiver uma quantidade de botões diferente de 3, ou acidentalmente excluir algum botão, ele precisará estilizar os botões novamente.

No entanto, se você fizer o seguinte em um Lista de botões,

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

Não importa quantos botões o usuário tenha, eles sempre acabarão com uma sequência de botões de cores alternadas.

O mesmo princípio pode ser aplicado a uma lista de imagens.

E você pode ler mais sobre nth-child e nth-of-type para aprender sobre suas gramáticas específicas.