To template designers

If your template has a wonderful editing experience on slidde.co, customers will reach you when they want to change the design or expand the design into multiple pages.

A user without coding or designing experience can use the rich text editor, changing pictures on their own. But sometimes a beautiful template maybe too complex to adjust to their needs easily.

Here's several tips.

Writing tutorials

Use Hidden in Slide to write a tutorial about how to use your templates. Here's an example

Editing animated hidden elements

If you have animations that hides certain text/images, such as opacity: 0 or display: none, you can hover on the CSS style name and click the edit icon. Then select the "hidden in canvas" option to only apply that when exporting a real website. So your user can edit the elements in the editor easily.

Use variables

You can set CSS variables to let your customers easily change the coloring or other attributes of your templates.

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

And you can apply it in all the descendants of the element, including itself

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

Here's the official docs for a more in-depth guide.

Styling list of elements.

When you are styling list of elements, advanced selectors could be applied to enhance the user experience.

If you style a button list with color:red, color:blue, color:green, when the user has count of buttons other than 3 , or accidentally they delete some button, they will need to style the buttons themselves again.

However, if you do the following to a Button list,

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

No matter how many buttons the user have, they always ended up with a button sequence of alternating colors.

The same principle can apply to a list of images.

And you can read more about nth-child and nth-of-type to learn about their specific grammars.