하이브리드 이메일 템플릿을 만드는 방법

예상 4 읽은 시간(분)

업데이트 2024년 12월 17일 오전 10:18 EST

클라비요의 드래그 앤 드롭 편집기와 호환되는 사용자 정의 HTML 템플릿(즉, 하이브리드 템플릿)을 만드는 방법을 알아보세요. 다음 단계를 수행하면 드래그 앤 드롭 편집기에서만 사용할 수 있는 기능(예: 제품 블록 또는 범용 콘텐츠)에 계속 액세스하면서 완전히 사용자 정의된 HTML 이메일을 디자인할 수 있습니다.

사용자 지정 HTML은 기술에 능숙한 마케터나 개발자 액세스 권한이 있는 사람에게만 사용하는 것을 권장합니다. 워드프레스닷컴 제품은 사용자 정의 HTML을 지원하지만, 지원팀은 이 문서에서 다루는 일반적인 지침을 제공하는 것 외에는 사용자 정의 템플릿을 구축하는 데 도움을 드릴 수 없습니다. 도움이 필요하신가요? 클라비요 파트너에게 문의 하세요.

데이터 보안을 유지하기 위해 클라비요의 지원팀은 HTML 파일을 열 수 없습니다.

HTML 템플릿에 코드 스니펫 추가하기

이메일 템플릿당 아래에 설명된 코드 스니펫 중 하나만 추가하세요. 하나의 코드 스니펫으로 여러 개의 드래그 앤 드롭 블록을 추가할 수 있으므로 여러 개의 코드 스니펫을 추가할 필요가 없습니다.

예를 들어 드래그 앤 드롭 편집기를 사용하여 이미지와 표 블록을 추가하려면 아래의 사용자 지정 가능한 이미지 블록 추가 단계를 따르세요. 템플릿을 클라비요에 업로드하고 캠페인이나 플로우에서 사용하면 이미지 블록 위나 아래에 블록을 추가할 수 있습니다.

편집 가능한 텍스트 블록 추가

선호하는 HTML 편집기를 사용하여 사용자 지정 HTML 템플릿을 만듭니다.

HTML 템플릿에 다음 코드 스니펫을 추가합니다. 템플릿에서 텍스트 블록을 추가하고 싶은 위치에 배치합니다.

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
   <div class="klaviyo-block klaviyo-text-block"> 안녕하세요!</div>
</td>

클라비요에서 콘텐츠 > 템플릿으로 이동합니다.
가져오기를 클릭합니다.
템플릿의 이름을 입력하고 HTML 파일을 업로드한 후 가져옵니다.
템플릿 탭에서 템플릿을 열면 클라비요의 HTML 편집기에서 템플릿의 코드를 볼 수 있습니다.
클라비요의 드래그 앤 드롭 에디터에서 템플릿에 액세스하려면 캠페인이나 플로우에 템플릿을 추가합니다.
템플릿 유형으로 끌어서 놓기를 선택합니다.
Hello world라는 텍스트 블록에 주목하세요 ! 편집 가능한 텍스트 블록입니다.
원하는 대로 텍스트 블록 위나 아래에 추가 블록을 끌어다 놓습니다.

사용자 지정 가능한 이미지 블록 추가

선호하는 HTML 편집기를 사용하여 사용자 지정 HTML 템플릿을 만듭니다.

HTML 템플릿에 다음 코드 스니펫을 추가합니다. 템플릿을 가져온 후 이미지 블록을 추가할 위치에 배치하세요.

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
   <div class="klaviyo-block klaviyo-image-block"></div>
</td>

선택 사항으로 div 내에 미리 설정된 이미지를 추가할 수 있습니다. 이렇게 선택하면 코드가 다음과 같이 표시됩니다:

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
   <div class="클라비요-블록 클라비요-이미지-블록">
       <a href="http://klaviyo.com>< img src="example.com/my_image.png" alt="내 이미지" /></a>
    </div>
</td>

클라비요에서 콘텐츠 > 템플릿으로 이동합니다.
가져오기를 클릭합니다.
템플릿의 이름을 입력하고 HTML 파일을 업로드한 후 가져옵니다.
템플릿 탭에서 템플릿을 열면 클라비요의 HTML 편집기에서 템플릿의 코드를 볼 수 있습니다.
클라비요의 드래그 앤 드롭 에디터에서 템플릿에 액세스하려면 캠페인이나 플로우에 템플릿을 추가합니다.
템플릿 유형으로 끌어서 놓기를 선택합니다.
이미지 블록에는 이미지 업로드 버튼 또는 포함된 이미지가 포함되어 있습니다.
원하는 대로 이미지 블록 위나 아래에 추가 블록을 끌어다 놓습니다.

다른 유형의 블록 추가(예: 제품 블록, 테이블 블록, 유니버설 콘텐츠)

선호하는 HTML 편집기를 사용하여 사용자 지정 HTML 템플릿을 만듭니다.

HTML 템플릿에 다음 코드 스니펫을 추가합니다. 템플릿을 가져온 후 블록을 추가할 위치에 배치합니다.

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
   <div class="klaviyo-block klaviyo-text-block"> 안녕하세요!</div>
</td>

클라비요에서 콘텐츠 > 템플릿으로 이동합니다.
가져오기를 클릭합니다.
템플릿의 이름을 입력하고 HTML 파일을 업로드한 후 가져옵니다.
템플릿 탭에서 템플릿을 열면 클라비요의 HTML 편집기에서 템플릿의 코드를 볼 수 있습니다.
클라비요의 드래그 앤 드롭 에디터에서 템플릿에 액세스하려면 캠페인이나 플로우에 템플릿을 추가합니다.
템플릿 유형으로 끌어서 놓기를 선택합니다.
Hello world라는 텍스트 블록에 주목하세요 ! 이 블록 아래에 다른 블록(예: 제품 블록 또는 유니버설 콘텐츠)을 드래그합니다.
텍스트 블록을 삭제하고 원하는 대로 사용자 지정 블록을 추가합니다.

하이브리드 이메일 템플릿 코드 샘플

아래 예시는 텍스트 블록에 대한 하이브리드 코드 스니펫이 포함된 기능적인 HTML 파일을 보여줍니다. 이 코드를 사용하여 하이브리드 편집기 기능을 테스트합니다.

  <html>
  <head>
    <메타 콘텐츠="width=장치 너비, 초기 스케일=1.0" name="viewport" />
    <title>간단한 하이브리드 이메일</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
     <table class="main">
        <tr>
          <td class="wrapper"> 이것은 매우 간단한 HTML 이메일입니다</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align=center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                 <div class="클라비요-블록 클라비요-텍스트-블록">
                    안녕하세요!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

이모티콘 및 하이브리드 이메일 템플릿

2024년 2월부터 모든 이모티콘은 모든 클라비요 이메일 편집기(예: 드래그 앤 드롭 편집기, 하이브리드 편집기, 텍스트 전용 편집기, 사용자 지정 HTML 편집기)에서 지원됩니다.

결과

이 단계를 완료하면 사용자 정의 HTML 템플릿의 특정 영역을 추가하고 편집할 수 있습니다. 초기 블록이 배치된 위치를 제외한 사용자 지정 템플릿의 어떤 영역에서도 드래그 앤 드롭 블록을 추가하거나 편집할 수 없다는 점에 유의하세요.

추가 리소스

이 도움말 문서가 유용했나요?

이 형식은 도움말 문서 피드백 용도로만 사용하세요. 지원 팀에 문의하는 방법.