기존 편집기 이메일 콘텐츠 변환

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

이 사용 사례를 사용하면 HTML 이메일을 사용하여 이메일 디자이너 템플릿을 만들고 이메일 디자이너의 HTML 구성 요소로 나눌 수 있습니다.

노트

호환성 모드와 마찬가지로 HTML 구성 요소는 제한된 옵션으로 편집할 수 있습니다. 즉석 편집만 수행할 수 있습니다.

중요

이 섹션은 HTML 코드에 익숙한 고급 사용자를 위한 것입니다.

이메일 콘텐츠 준비

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

이메일 구조 만들기

  1. 를 엽니다. Email Designer 빈 이메일 콘텐츠를 만들려면
  2. 본문 수준 속성을 설정합니다. 배경색, 너비 등 자세한 내용은 전자 메일 스타일 편집을 참조하십시오.
  3. 섹션이 있는 만큼 구조 구성 요소를 추가합니다. 자세한 내용은 전자 메일 구조 편집을 참조하십시오.

HTML 컨텐츠 추가

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

이메일 스타일 관리

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

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

    <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>
    노트

    그 뒤에 다른 사용자 지정 스타일 태그에 스타일을 추가해야 합니다.

    이메일 디자이너에서 생성한 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. 삽입 HTML component 각각 Structure component .

  2. 각 섹션에 대해 Show source code .

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

  4. Save​를 클릭합니다.

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

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

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

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

자세한 내용은 이메일 스타일 관리.

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

이 페이지에서는