템플릿 디자이너에게

당신의 템플릿이 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에 대해 더 읽어보면서 그들의 특정 문법에 대해 배울 수 있습니다.