Дизайнерам шаблонов

Если ваш шаблон обеспечивает замечательный опыт редактирования на slidde.co, клиенты будут обращаться к вам, когда захотят изменить дизайн или расширить его на несколько страниц.

Пользователь без опыта в кодировании или дизайне может использовать текстовый редактор, самостоятельно изменяя изображения. Но иногда красивый шаблон может быть слишком сложным для легкой настройки под их нужды.

Вот несколько советов.

Написание руководств

Используйте Скрытый в Слайд, чтобы написать руководство о том, как использовать ваши шаблоны. Вот пример.

Редактирование анимированных скрытых элементов

Если у вас есть анимации, скрывающие определенный текст/изображения, такие как opacity: 0 или display: none, вы можете навести курсор на имя стиля CSS и нажать на значок редактирования. Затем выберите опцию "скрыто на холсте", чтобы применять это только при экспорте реального веб-сайта. Таким образом, ваш пользователь сможет легко редактировать элементы в редакторе.

Использование переменных

Вы можете установить CSS-переменные, чтобы ваши клиенты могли легко изменять цветовую гамму или другие атрибуты ваших шаблонов.

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

И вы можете применить это ко всем потомкам элемента, включая сам элемент

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

Вот официальная документация для более подробного руководства.

Стилизация списка элементов

Когда вы стилизуете список элементов, можно использовать продвинутые селекторы для улучшения пользовательского опыта.

Если вы стилизуете список кнопок с color:red, color:blue, color:green, когда у пользователя количество кнопок отличается от 3, или случайно удаляется какая-то кнопка, им придется снова стилизовать кнопки самостоятельно.

Однако, если вы сделаете следующее для Список кнопок,

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

Независимо от того, сколько кнопок у пользователя, они всегда получат последовательность кнопок с чередующимися цветами.

Тот же принцип можно применить к списку изображений.

Вы можете узнать больше о nth-child и nth-of-type, чтобы изучить их специфические грамматики.