기존 편집기 이메일 콘텐츠 변환 converting-an-html-content

이메일 Designer 작업을 시작하고 레거시 편집기에서 만든 이메일 HTML에서 재사용 가능한 템플릿 및 조각을 빌드합니다.

이 사용 사례를 사용하면 HTML 이메일을 사용하고 이메일 Designer의 HTML 구성 요소로 분할하여 이메일 Designer 템플릿을 만들 수 있습니다.

NOTE
호환성 모드와 마찬가지로 HTML 구성 요소는 제한된 옵션을 사용하여 편집할 수 있습니다. 즉석 편집만 수행할 수 있습니다.
IMPORTANT
이 섹션은 HTML 코드에 익숙한 고급 사용자를 위한 것입니다.

이메일 콘텐츠 준비

  1. HTML 이메일을 선택합니다.
  2. HTML 이메일을 나눌 섹션을 식별합니다.
  3. HTML에서 다른 블록을 잘라냅니다.

이메일 구조 만들기

  1. Email Designer ​을(를) 열어 빈 전자 메일 콘텐츠를 만듭니다.
  2. 바디 레벨 속성(배경색, 너비 등)을 설정합니다. 자세한 내용은 전자 메일 스타일 편집을 참조하십시오.
  3. 섹션을 가진 수만큼 구조 구성 요소를 추가합니다. 자세한 내용은 전자 메일 구조 편집을 참조하십시오.

HTML 컨텐츠 추가

  1. 각 구조 구성 요소에 HTML 구성 요소를 추가합니다. 자세한 내용은 조각 및 구성 요소 추가를 참조하십시오.
  2. 모든 구성 요소에 HTML을 복사하여 붙여넣습니다.

이메일 스타일 관리 manage-the-style-of-your-email

  1. Mobile view(으)로 전환합니다. 자세한 내용은 이 섹션을 참조하십시오.

  2. 이 문제를 해결하려면 소스 코드 모드로 전환하고 스타일 섹션을 새 스타일 섹션에 복사하여 붙여 넣습니다. 예제:

    code language-none
    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    note note
    NOTE
    다른 사용자 지정 스타일 태그에서 이 항목 뒤에 스타일을 추가해야 합니다.
    이메일 Designer에서 생성한 CSS는 수정하지 마십시오.
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  3. 모바일 보기로 돌아가서 콘텐츠가 올바르게 표시되는지 확인하고 변경 사항을 저장합니다.

사용 사례

기존 편집기에서 만든 이 전자 메일을 Email Designer 템플릿으로 변환해 보겠습니다.

이메일의 섹션 식별

이 이메일에는 11개의 섹션이 있습니다.

HTML의 어느 섹션인지 식별하기 위해 해당 요소를 선택할 수 있습니다.

전자 메일의 HTML 버전을 보려면 Show source ​을(를) 클릭합니다.

이메일 템플릿 및 해당 구조 만들기

  1. 전자 메일 레이아웃을 반영하여 Structure components ​을(를) 끌어서 놓습니다.

  2. 필요한 횟수만큼 반복합니다. 11개의 구조 구성 요소를 만들어야 합니다.

HTML 콘텐츠 구성 요소 삽입

  1. Structure component ​에 HTML component ​을(를) 삽입합니다.

  2. 각 섹션에 대해 Show source code 을(를) 클릭합니다.

  3. HTML 섹션을 삽입합니다.

  4. Save ​를 클릭합니다.

이제 전자 메일 렌더링을 확인할 수 있습니다.

모바일 보기에 맞게 스타일 관리

  1. CSS 요소를 삽입하여 이메일이 모바일 보기에 적합한지 확인합니다.

  2. 소스 코드로 전환한 다음 스타일 섹션을 새 스타일 섹션에 복사하여 붙여넣습니다.

자세한 내용은 전자 메일 스타일 관리를 참조하세요.

이제 이메일 Designer에서 기존 이메일을 사용할 수 있습니다.

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff