사용자 정의 가능한 조각 customizable-fragments

이메일 또는 이메일 템플릿에서 조각을 사용하는 경우 상속으로 인해 조각이 기본적으로 잠깁니다. 즉, 조각에 대한 모든 변경 사항은 이 조각이 사용되는 모든 에셋에 자동으로 전파됩니다. 사용자 지정 가능한 조각을 사용하면 조각을 이메일 또는 이메일 템플릿에 추가할 때 조각 내의 특정 필드를 편집 가능한 것으로 정의할 수 있습니다. 예를 들어 배너, 일부 텍스트 및 단추가 있는 조각이 있는 경우 이미지 또는 단추 대상 URL과 같은 특정 필드를 편집 가능한 것으로 지정할 수 있습니다.

사용자 지정 가능한 조각을 사용하면 완전히 새로운 콘텐츠 블록을 만들거나 조각 상속을 중단하지 않고도 콘텐츠를 관리하고 개인화할 수 있습니다. 조각 수준에서 변경한 사항은 계속 전파되지만 이메일 또는 이메일 템플릿 수준에서 사용자 지정할 수 있습니다.

시각적 조각과 표현식 조각을 모두 사용자 지정으로 표시할 수 있습니다.

시각적 조각에 편집 가능한 필드 추가 visual

시각적 조각의 일부를 편집할 수 있도록 하려면 다음 단계를 수행합니다.

조각을 이메일에 추가한 후 사용자는 조각에 구성된 편집 가능한 모든 필드를 사용자 지정할 수 있습니다.

조각에서 편집 가능한 HTML 구성 요소 editable-html

HTML 구성 요소 내에서 다음 유형의 요소를 편집할 수 있습니다.

매개 변수가 있는 각 CSS 속성 값은 접미사, 추가 텍스트, 여러 변수 및 단일 속성 내의 연결 없이 정확히 {{{varName}}}이어야 합니다.

패딩과 같은 다중 측 속성을 매개 변수화하려면 다음 중 하나를 수행합니다.

HTML 구성 요소에서 편집 가능한 필드가 작동하는 방식 components

HTML 구성 요소의 편집 가능한 필드는 구성 요소의 소스 코드 내에서 직접 인라인 변수를 선언하여 만듭니다. 각 변수에는 고유한 ID와 기본값이 있습니다. 그러면 마크업에 편집 가능한 값이 표시되어야 하는 모든 곳에서 변수가 참조됩니다.

조각을 저장하고 게시하면 HTML 구성 요소에서 선언된 모든 변수가 조각이 이메일에 추가될 때 편집 가능한 매개 변수로 자동으로 표시됩니다.

그런 다음 이메일 작성자는 기본 Designer을 수정하지 않고 이메일 HTML에서 변수의 기본값을 재정의할 수 있습니다(예: 배경색 변경, CTA URL 대체 또는 헤드라인 업데이트).

구문 참조 syntax

편집 가능한 필드는 다음 두 가지 패턴을 사용하여 정의되고 참조됩니다.

변수 선언 declaring

인라인 선언을 사용하여 고유 ID와 기본값으로 변수를 정의합니다.

{{#inline "variableID"}}default_value{{/inline}}

variableID을(를) 편집 가능한 필드의 고유 식별자로 바꿉니다. ID는 구성 요소 내에서 고유해야 하며 공백을 포함해서는 안 됩니다.

default_value을(를) 이메일 작성자가 재정의하지 않는 경우 사용해야 하는 값으로 바꿉니다.

변수 참조 referencing

마크업에 값이 표시되어야 하는 모든 위치에서 변수를 참조하려면 세 개의 중괄호를 사용합니다.

{{{variableID}}}

HTML 내에서 동일한 변수 ID를 여러 번 참조할 수 있습니다. 모든 참조는 이메일 작성자가 설정한 값으로 확인됩니다(또는 무시가 제공되지 않은 경우 기본값으로 확인).

선택적 매개 변수 optional

인라인 선언은 편집 가능한 필드가 표시되거나 처리되는 방식을 변경하는 선택적 매개 변수를 지원합니다.

HTML 구성 요소에 편집 가능한 필드 추가 adding-editable-fields

시각적 조각 내의 HTML 구성 요소 일부를 편집할 수 있도록 하려면 다음 단계를 수행합니다.

이메일에서 조각 사용 using-fragment

조각이 게시되면 HTML 구성 요소에서 선언된 모든 변수가 이메일 Designer에서 편집 가능한 매개 변수로 표시됩니다.

이메일에서 조각을 사용할 때 맞춤화하려면 다음을 수행하십시오.

조각은 사용자 지정된 값으로 렌더링되는 동시에 게시된 조각에 대해 수행된 향후 구조적 업데이트를 상속합니다.

예: 편집 가능한 텍스트, 색상 및 URL이 있는 간단한 조각 example

다음 예제에서는 편집 가능한 필드 4개가 있는 작은 홍보 배너를 만듭니다.

조각을 게시한 후 이메일 작성자는 이메일에 조각을 추가할 때 이러한 값을 재정의할 수 있습니다.

간단한 편집 가능한 배너

<!-- Define editable variables -->
{{#inline "bgColor"}}#0057FF{{/inline}}
{{#inline "headlineText"}}Example Headline{{/inline}}
{{#inline "ctaText"}}Learn More{{/inline}}
{{#inline "ctaUrl" assetType="url"}}https://www.example.com{{/inline}}

<!-- Use the variables in the HTML -->
<table width="100%" cellpadding="0" cellspacing="0"
       style="background-color:{{{bgColor}}}; border-radius:8px;" >
  <tr>
    <td style="padding:30px; text-align:center; font-family:Arial,sans-serif;">
      <h2 style="color:#ffffff; font-size:24px; margin:0;">
        {{{headlineText}}}
      </h2>
      <a href="{{{ctaUrl}}}"
         style="display:inline-block; margin-top:16px; padding:12px 28px;
                background:#ffffff; color:{{{bgColor}}};
                font-weight:bold; border-radius:4px; text-decoration:none;">
        {{{ctaText}}}
      </a>
    </td>
  </tr>
</table>

이 예에서,

모범 사례 best-practices

알아야 할 사항 things-to-know