콘텐츠 구성 요소 사용 content-components

전자 메일 콘텐츠를 만들 때 콘텐츠 구성 요소를 사용하면 전자 메일에 배치한 후 사용할 수 있는 비어 있는 원시 구성 요소를 사용하여 전자 메일을 추가로 개인화할 수 있습니다.

전자 메일 레이아웃을 정의하는 구조 내에 필요한 만큼 콘텐츠 ​를 추가할 수 있습니다.

콘텐츠 구성 요소 추가 add-content-components

이메일에 콘텐츠 구성 요소를 추가하고 필요에 맞게 조정하려면 아래 단계를 따르십시오.

  1. 이메일 Designer에서 기존 콘텐츠를 사용하거나 구조 ​를 빈 콘텐츠로 끌어다 놓아 이메일 레이아웃을 정의합니다. 방법 알아보기

  2. 선택한 콘텐츠 ​를 관련 구조 내부에 끌어다 놓습니다.

    {modal="regular"}

    note note
    NOTE
    여러 구성 요소를 단일 구조 및 구조의 각 열에 추가할 수 있습니다.
  3. 상황별 설정 탭을 사용하여 각 구성 요소에 대한 옵션을 조정합니다. 예를 들어 데스크탑 또는 모바일 디바이스에만 표시하도록 선택하거나 둘 다에 표시하도록 선택할 수 있습니다. 이 탭에서 링크 옵션을 관리할 수도 있습니다. 링크 관리에 대해 자세히 알아보기

  4. 스타일 탭을 사용하여 각 구성 요소의 스타일 특성을 조정합니다. 예를 들어 각 구성 요소의 텍스트 스타일, 패딩 또는 여백을 변경할 수 있습니다. 정렬 및 패딩에 대해 자세히 알아보기

    {modal="regular"}

  5. 오른쪽 창에 있는 콘텐츠 ​의 고급 메뉴에서 필요에 따라 콘텐츠 구성 요소를 쉽게 삭제하거나 복제할 수 있습니다.

컨테이너 container

간단한 컨테이너를 추가하여 다른 콘텐츠 구성 요소를 추가할 수 있습니다. 이렇게 하면 내부에서 사용되는 구성 요소와 다른 특정 스타일을 컨테이너에 적용할 수 있습니다.

예를 들어 컨테이너 구성 요소를 추가한 다음 해당 컨테이너 내부에 버튼 구성 요소를 추가하면 컨테이너에 특정 배경을 사용하고 버튼에 다른 배경을 사용할 수 있습니다.

버튼 buttons

버튼 구성 요소를 사용하여 이메일에 하나 이상의 버튼을 삽입하고 이메일 대상자를 다른 페이지로 리디렉션할 수 있습니다.

  1. 콘텐츠 목록에서 버튼 구성 요소를 드래그하여 구조 구성 요소에 놓습니다.

    {modal="regular"}

  2. 새로 추가된 버튼을 클릭하여 텍스트를 개인화하고 설정스타일 탭에 액세스합니다.

    {modal="regular"}

  3. URL 필드의 설정 탭에서 버튼을 클릭할 때 리디렉션할 URL을 추가합니다.

  4. 대상 드롭다운 목록을 사용하여 콘텐츠가 표시되는 방식을 선택합니다.

    • None: 링크를 클릭한 프레임과 동일한 프레임에서 링크를 엽니다(기본값).
    • Blank: 새 창이나 탭에서 링크를 엽니다.
    • Self: 링크를 클릭한 프레임과 동일한 프레임에서 링크를 엽니다.
    • Parent: 상위 프레임에서 링크를 엽니다.
    • Top: 최상위 창에서 링크를 엽니다.

    {modal="regular"}

  5. 다음에서 테두리, 크기, 여백 등 스타일 속성을 변경하여 버튼을 추가로 개인화할 수 있습니다. 스타일 탭에서

텍스트 text

텍스트 구성 요소를 사용하여 이메일에 텍스트를 삽입하고 설정스타일 탭 사용.

  1. 콘텐츠 메뉴에서 텍스트 ​을(를) 구조 구성 요소로 끌어다 놓습니다.

    {modal="regular"}

  2. 새로 추가된 구성 요소를 클릭하여 텍스트를 개인화하고 설정스타일 탭에 액세스합니다.

  3. 상황별 도구 모음에서 다음 옵션을 사용하여 텍스트를 변경합니다.

    {modal="regular"}

    • 텍스트 스타일 변경: 텍스트에 볼드체, 이탤릭체, 밑줄 또는 취소선을 적용합니다.
    • 정렬 변경: 왼쪽, 오른쪽, 가운데 또는 양쪽 정렬 중에서 텍스트 정렬 방식을 선택합니다.
    • 목록 만들기: 텍스트에 글머리 기호 또는 번호 목록을 추가합니다.
    • 제목 설정: 텍스트에 최대 6개의 제목 수준을 추가합니다.
    • 글꼴 크기: 텍스트의 글꼴 크기를 픽셀 단위로 선택합니다.
    • 이미지 편집: 텍스트 구성 요소에 이미지 또는 자산을 추가합니다.
    • 소스 코드 표시: 텍스트의 소스 코드를 표시합니다. 소스 코드는 수정할 수 없습니다.
    • 복제: 텍스트 구성 요소의 복사본을 추가합니다.
    • 삭제: 이메일에서 선택한 텍스트 구성 요소를 삭제합니다.
    • 개인화 추가: 개인화 필드를 추가하여 프로필 데이터의 콘텐츠를 사용자 정의합니다.
    • 조건부 콘텐츠 활성화: 조건부 콘텐츠를 추가하여 타겟팅된 프로필에 구성 요소의 콘텐츠를 적용합니다.
  4. 다음에서 텍스트 색상, 글꼴 패밀리, 테두리, 패딩, 여백 등 다른 스타일 속성을 조정합니다. 스타일 탭에서

    {modal="regular"}

구분선 divider

구분선 구성 요소를 사용하여 이메일의 레이아웃과 콘텐츠를 구성하기 위한 구분선을 삽입할 수 있습니다.

스타일 탭에서 선 색, 스타일, 높이 등의 스타일 특성을 조정할 수 있습니다.

HTML HTML

HTML 구성 요소를 사용하여 기존 HTML의 다른 부분을 복사하고 붙여넣을 수 있습니다. 이렇게 하면 무료 모듈식 HTML 구성 요소를 만들어 일부 외부 콘텐츠를 재사용할 수 있습니다.

  1. 구성 요소 ​에서 HTML 구성 요소를 드래그하여 구조 구성 요소에 놓습니다.

    {modal="regular"}

  2. 새로 추가된 구성 요소를 클릭한 다음 상황별 도구 모음에서 소스 코드 표시 ​를 선택하여 HTML을 추가합니다.

    {modal="regular"}

NOTE
외부 콘텐츠를 전자 메일 DesignerAdobe 을 준수하도록 하려면 메시지를 처음부터 만들고 기존 전자 메일의 콘텐츠를 구성 요소로 복사하는 것이 좋습니다.

이미지 image

이미지 구성 요소를 사용하여 이메일에 컴퓨터의 이미지 파일을 삽입할 수 있습니다.

  1. 콘텐츠 메뉴에서 이미지 ​를 드래그하여 구조 구성 요소에 놓습니다.

    {modal="regular"}

  2. 에셋에서 이미지 파일을 선택하려면 찾아보기 ​를 클릭하십시오. 미디어 가져오기 ​를 선택할 수도 있습니다.

    Adobe Experience Manager에서 에셋을 업로드하고 추가하는 방법에 대한 자세한 내용은 Adobe Experience Manager as a Cloud Service 설명서를 참조하세요.

    {modal="regular"}

  3. 폴더를 탐색하여 필요한 특정 에셋을 찾거나 검색 창을 사용하여 에셋을 효율적으로 찾습니다.

    찾고 있는 자산을 찾으면 선택 ​을 클릭하세요.

    {modal="regular"}

  4. 새로 추가한 구성 요소를 클릭하고 설정 탭을 사용하여 이미지 속성을 설정합니다.

    • 이미지 제목 속성을 사용하면 이미지의 제목을 정의할 수 있습니다.
    • 대체 텍스트 속성을 사용하면 이미지에 연결된 캡션을 정의할 수 있습니다. 이는 대체 HTML 속성에 해당합니다.

    {modal="regular"}

  5. 링크를 추가하여 대상자를 다른 콘텐츠로 리디렉션할 수 있습니다. 자세히 알아보기

  6. 여백, 테두리 등 다른 스타일 속성을 조정하거나 스타일 탭을 사용합니다.

소셜 social

소셜 구성 요소를 사용하면 이메일 콘텐츠에 소셜 미디어 페이지에 대한 링크를 삽입할 수 있습니다.

  1. 구성 요소 메뉴에서 소셜 구성 요소를 드래그하여 구조 구성 요소에 놓습니다.

  2. 새로 추가된 구성 요소를 클릭합니다.

  3. 설정 탭의 소셜 필드에서 추가 또는 제거할 소셜 미디어를 선택합니다.

    {modal="regular"}

  4. 이미지 크기 필드에서 아이콘의 크기를 선택합니다.

  5. 각 소셜 미디어 아이콘을 클릭하여 대상자가 리디렉션되는 URL ​을 구성합니다.

    {modal="regular"}

  6. 필요한 경우 Source 필드에서 각 소셜 미디어의 아이콘을 변경할 수도 있습니다.

  7. 다음에서 스타일, 여백, 테두리 등 다른 스타일 속성을 조정합니다. 스타일 탭에서

recommendation-more-help
c39c2d00-ba9a-424b-adf9-66af58a0c34b