가입 양식에서 사용자 정의 CSS를 사용하는 방법입니다.

사용자 정의 CSS를 사용하여 양식 편집기에서 사용할 수 있는 것 이상으로 Klaviyo 가입 양식의 스타일을 지정하는 방법을 알아보세요. 사용자 정의 CSS를 사용하면 줄 높이, 글자 간격, 요소 간격과 같은 속성을 세밀하게 제어할 수 있으므로 양식이 브랜드와 정확히 일치할 수 있습니다.

시작하기 전에 알아야 할 것

사용자 정의 CSS를 사용하기 전에 다음 사항에 유의하세요.

• 사용자 정의 CSS는 유료 Klaviyo 요금제에서만 사용할 수 있습니다. 이 기능은 점진적으로 제공되고 있으므로 아직 계정에서 볼 수 없을 수도 있습니다.
• Klaviyo 지원팀에서는 사용자 정의 코드 문제를 해결할 수 없습니다. 사용자 정의 CSS로 인해 발생하는 문제(예: 레이아웃 파손, 숨겨진 필드, 렌더링 문제)는 디버그 및 수정 책임이 있습니다. 사용자 정의 CSS가 있는 양식이 표시되지 않거나 올바르게 작동하지 않는 경우 먼저 사용자 정의 CSS를 비활성화하여 코드가 원인인지 확인합니다.
• 사용자 정의 CSS는 스타일링만 적용합니다. 이 기능을 통해 양식 또는 해당 블록의 HTML을 추가하거나 편집할 수 없습니다.
• 게시하기 전에 테스트하세요. 사용자 정의 CSS는 양식 사용 가능성에 영향을 미칠 수 있습니다(예: 필수 필드를 실수로 숨겨도 가입을 방지할 수 있음). 게시하기 전에 항상 양식을 미리 보고 테스트하세요.

사용자 정의 CSS 활성화

양식에 사용자 정의 CSS를 활성화하려면 다음과 같이 하세요.

1. 가입 양식 으로 이동하여 편집기 에서 양식을 엽니다.
2. 스타일 탭을 선택합니다.
3. 패널 하단의 사용자 정의 CSS 섹션으로 스크롤합니다.
4. 사용자 정의 CSS를 켭니다.
5. 경고 메시지를 검토하세요. 사용자 정의 CSS를 활성화하면 Klaviyo 지원 팀에서 사용자 정의 코드로 인한 문제를 해결할 수 없다는 사실을 알게 됩니다.

활성화되면 양식에 사용자 정의 CSS를 작성할 수 있는 CSS 편집기가 나타납니다. 사용자 정의 CSS는 양식마다 활성화되어 있으며, 한 양식에 대해 토글해도 다른 양식에는 영향을 미치지 않습니다.

양식 구성 요소에 클래스 이름을 설정합니다.

사용자 정의 CSS가 활성화되면 양식의 각 구성 요소는 구성 요소의 사이드바 하단에 표시되는 CSS 클래스 필드 를 가져옵니다. 클래스 이름은 기본적으로 구성 요소의 이름으로 설정되며, 더 쉽게 액세스할 수 있도록 직접 이름을 재정의할 수 있습니다.

이러한 클래스 이름을 CSS에서 선택기로 사용합니다. 고유한 클래스 이름을 설정하는 것은 양식 요소를 안정적으로 읽을 수 있기 때문에 가장 안정적으로 타겟팅할 수 있는 방법입니다.

나중에 사용자 정의 CSS를 비활성화하면 클래스 이름이 유지되며 다시 활성화하면 다시 표시됩니다.

CSS를 작성합니다.

CSS 편집기가 비어 있기 시작하면 양식의 현재 스타일이 표시되지 않습니다. 이는 양식이 사이트에서 렌더링될 때 생성되기 때문입니다. 요소를 타겟팅하려면 다음 방법 중 하나를 사용하세요.

• 클래스 이름을 사용하세요. 양식 구성 요소에 설정한 클래스 이름을 참조합니다(권장).
• 라이브 양식을 검사하세요. 웹사이트에서 게시된 양식을 연 다음 브라우저의 개발자 도구(오른쪽 클릭 > 검사)를 사용하여 타겟팅하려는 선택기를 식별합니다.

Klaviyo에서 자동으로 생성된 클래스 이름을 타겟팅하지 마세요. 이는 내부적이며, 해시된 값을 포함할 수 있으며, 예고 없이 변경될 수 있어 CSS가 자동으로 손상됩니다. 대신 고유한 클래스 이름을 사용하세요.

예시

예를 들어 헤드라인 블록에 form-headline 클래스를, 이메일 입력 블록에 email-input 클래스를 설정했다고 가정해 보겠습니다:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

사용자 정의 CSS는 오른쪽에서 왼쪽 쓰기 텍스트와 같이 편집기에서 사용할 수 없는 스타일링도 잠금 해제합니다.

.form-headline {
  direction: rtl;
  text-align: right;
}

미리보기 및 게시

CSS를 작성한 후 다음을 수행합니다.

1. 편집기 미리보기를 사용하여 양식의 모양을 확인합니다.
2. 사용자 정의 CSS는 각각 다르게 영향을 미칠 수 있으므로 데스크톱과 모바일에서 양식을 확인하세요.
3. 비공개 페이지에 양식을 게시하여 사이트에 어떻게 표시되는지 확인합니다.
4. 게시된 양식에 테스트 가입을 제출하여 모든 입력과 버튼이 계속 작동하는지 확인하세요.
5. 양식을 공개적으로 게시합니다.

사용자 정의 CSS를 비활성화합니다.

사용자 정의 스타일링을 제거하려면 스타일 탭에서 사용자 정의 CSS를 끕니다. 양식이 즉시 표준 편집기 스타일링으로 돌아갑니다. 사용자 지정 코드로 인해 표시 문제가 발생했는지 확인하는 가장 빠른 방법이기도 합니다. 사용자 정의 CSS를 다시 사용하도록 선택하면 이전 CSS 코드가 저장됩니다.

문제 해결

내 CSS가 적용되지 않습니다.
사용자 정의 CSS가 켜져 있고, 선택기가 구성 요소에 설정된 클래스 이름과 일치하며, 최신 버전의 양식을 게시했는지 확인합니다. 웹사이트의 스타일도 양식 스타일과 충돌하거나 재정의할 수 있습니다. 브라우저의 개발자 도구를 사용하여 어떤 규칙이 효과적인지 확인하세요.

양식이 손상되었거나 가입 수집이 중지된 것 같습니다.
사용자 정의 CSS를 비활성화하여 원인을 확인한 다음 코드를 검토합니다. 특히 입력 및 버튼을 숨기거나 위치를 변경하는 규칙을 확인하세요.

사용자 정의 CSS 섹션이 표시되지 않습니다.
사용자 정의 CSS는 유료 요금제에서만 사용할 수 있으며 점진적으로 출시되고 있습니다. 유료 요금제를 사용 중인데 아직 표시되지 않으면 곧 다시 확인하세요.

사용자 지정 클래스의 타이포그래피 스타일이 적용되지 않습니다.

margin 같은 레이아웃 스타일은 작동하지만 letter-spacing 또는 line-height 같은 텍스트 스타일은 작동하지 않는다면, 커스텀 클래스가 바깥쪽 래퍼에 연결되어 있고 표시되는 텍스트는 중첩된 하위 요소에서 렌더링되고 있을 가능성이 높아요. 이 경우에는 예를 들어 .form-headline, .form-headline * { ... }처럼 하위 요소도 대상으로 지정하세요.

자주 묻는 질문

양식에 사용자 정의 HTML을 추가할 수 있나요?
아니요. 양식에 HTML 요소를 추가하거나 기존 블록의 HTML을 편집할 수 없습니다. 사용자 정의 CSS는 양식의 기존 구성 요소의 스타일링만 변경합니다.

사용자 정의 CSS가 모든 양식에서 작동하나요?
웹사이트에 표시된 양식의 경우 양식별로 사용자 정의 CSS가 활성화됩니다. 사용자 지정하려는 각 양식에서 개별적으로 활성화합니다.

Klaviyo 지원 팀에서 CSS를 작성하거나 수정하는 데 도움을 주나요?
아니요. Klaviyo 지원팀에서는 사용자 정의 코드를 작성, 검토 또는 문제를 해결할 수 없습니다. 사용자 정의 CSS가 있는 양식에 문제가 있는 경우, 지원 팀에서 추가로 조사하기 전에 사용자 정의 CSS를 비활성화하여 제외하라는 메시지가 표시됩니다.

기능을 비활성화하면 내 CSS는 어떻게 되나요?
양식이 표준 스타일링으로 되돌아갑니다. 사용자 정의 CSS를 다시 활성화하면 구성 요소 클래스 이름이 저장되고 복원됩니다.