드래그 앤 드롭 편집기 블록

이메일 편집기 블록 사용

편집기 블록은 이메일 메시지의 콘텐츠 섹션 아래에 있습니다. 편집기 블록을 사용하려면 끌어서 놓기 편집기에서 열 안으로 편집기 블록을 끌어다 놓습니다. 열 너비에 맞게 자동으로 조정됩니다. 각 편집기 블록에는 패딩을 세밀하게 제어하는 등의 고유한 설정이 있습니다.

이메일에서 이러한 편집기 블록을 사용하고 커스텀하는 방법에 대한 자세한 내용은 기타 사용자 지정을 참조하세요.

유형

다음 표에서는 사용자가 각 편집기 블록 유형을 사용하는 방법을 설명합니다.

Name	설명
제목	이메일 내 헤더에 텍스트를 추가합니다.
단락	메시지에 텍스트를 입력합니다. 도구 모음은 글꼴 및 텍스트 편집 기능에 도움이 됩니다.
목록	글머리 기호 목록을 추가합니다.
버튼	표준 버튼을 추가합니다. 이 블록의 속성을 사용하면 링크를 쉽게 편집하고 설정할 수 있습니다.
구분선	실선, 점선 또는 파선을 삽입하여 간격을 조정할 수 있습니다.
공백	다른 블록 사이에 공간, 즉 ‘패딩’을 추가합니다.
이미지	미디어 라이브러리에서 이미지를 삽입합니다.
Video	동영상 콘텐츠에 대한 링크를 생성합니다.
소셜	소셜 미디어 플랫폼 아이콘을 삽입합니다. 브랜드별 아이콘에 대한 사용자 지정 이미지를 업로드할 수 있습니다.
아이콘	아이콘을 삽입합니다. 사용자 지정 이미지를 업로드할 수 있습니다. 이미지가 업로드될 때까지 대형 플레이스홀더 아이콘이 사용됩니다.
HTML	원시 HTML을 삽입합니다. 연결된 콘텐츠 또는 조건문과 같은 Liquid에 권장됩니다.
메뉴	디자인 중인 메시지에 맞는 유연한 메뉴를 만듭니다.

등록정보

각 편집기 블록의 속성에 대한 자세한 내용은 다음 표에 나와 있습니다.

제목

Title 편집기 블록 속성에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
제목	제목 스타일을 선택합니다.
Font family	제목의 글꼴 스타일입니다.
Font weight	이것은 글꼴의 전체적인 굵기입니다.
Font size	텍스트 크기를 결정합니다.
Text color	제목의 색상을 수정합니다.
링크 색	링크의 색상을 수정합니다.
맞춤	제목을 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.
Line height	텍스트 줄 사이의 거리를 수정합니다.
줄 간격	각 문자 사이의 거리를 수정합니다.
텍스트 방향	기본값은 왼쪽에서 오른쪽이지만 오른쪽에서 왼쪽으로 편집할 수 있습니다.

단락

Paragraph 편집기 블록 속성에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
Font family	단락 텍스트의 글꼴 스타일입니다.
Font weight	이것은 글꼴의 전체적인 굵기입니다.
Font size	텍스트 크기를 결정합니다.
Text color	제목의 색상을 수정합니다.
링크 색	링크의 색상을 수정합니다.
맞춤	제목을 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.
단락 간격	단락 사이의 공백을 수정합니다.
Line height	텍스트 줄 사이의 거리를 수정합니다.
문자 간격	각 문자 사이의 거리를 수정합니다.
텍스트 방향	기본값은 왼쪽에서 오른쪽이지만 오른쪽에서 왼쪽으로 편집할 수 있습니다.

목록

List 편집기 블록 속성에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
List type	목록 유형입니다. 글머리 기호 또는 번호로 표시할 수 있습니다.
목록 스타일 유형	목록의 스타일을 결정합니다.
시작 목록의 시작 위치	목록의 시작 번호를 결정합니다.
Font family	단락 텍스트의 글꼴 스타일입니다.
Font weight	이것은 글꼴의 전체적인 굵기입니다.
Font size	텍스트 크기를 결정합니다.
Text color	제목의 색상을 수정합니다.
링크 색	링크의 색상을 수정합니다.
맞춤	제목을 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.
목록 항목 간격	목록 항목 사이의 공백을 수정합니다.
목록 항목 들여쓰기	목록 항목의 들여쓰기를 수정합니다.
Line height	텍스트 줄 사이의 거리를 수정합니다.
문자 간격	각 문자 사이의 거리를 수정합니다.
텍스트 방향	기본값은 왼쪽에서 오른쪽이지만 오른쪽에서 왼쪽으로 편집할 수 있습니다.

구분선

Divider 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
투명	활성화하면 ‘선’ 및 ‘너비’ 옵션이 제거됩니다.
LINE	점선, 점선, 실선 등 다양한 선 형식을 지원합니다. 또한 구분선의 두께와 색상을 수정할 수 있습니다.
폭	구분선의 스프레드를 5 단위로 조정합니다.
맞춤	선을 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.

공백

Spacer 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
높이	스페이서 블록의 높이를 조정합니다. 기본값은 60px입니다.

이미지

Image 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요. 동적 이미지(Liquid를 사용한 이미지)의 경우 자동 너비 설정을 사용하려면 대체 이미지를 설정해야 합니다. 이미지 사양은 이메일 이미지 사양을 참조하세요.

등록정보	설명
자동 너비	Modifies the width of the image in pixels.
맞춤	Orients the image to either the left, center or right of the block.
Liquid가 있는 이미지	Liquid 로직을 사용하여 동일한 콘텐츠 블록 내에서 서로 다른 이미지를 동적으로 설정할 수 있습니다.
URL	Set an image using the address to where it’s hosted.
대체 텍스트	A short description of the image that gives users the same information that’s shown in the image. This is essential for screen-reader accessability or when the image fails to load.
모서리가 둥근 이미지	Render the image with rounded corners. By default, images are rendered with squared corners.
Action	Triggers an action when the user clicks the image.
차단 옵션	Sets padding around the image block.

동영상

Video 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
URL	동영상의 URL입니다. 유튜브와 비메오만 지원된다는 점에 유의하세요.
제목	동영상 메타 데이터에서 자동 생성되거나 사용자 지정할 수 있습니다.
아이콘 스타일 재생	동영상 이미지 상단에 위치한 재생 버튼에 대한 다양한 옵션을 포함합니다.
플레이 아이콘 색상	재생 버튼에 라이트 또는 다크를 선택하는 옵션입니다.
재생 아이콘 크기	재생 버튼의 픽셀 크기를 선택합니다. 미리 고정된 범위는 50픽셀에서 80픽셀까지입니다(5픽셀씩 증가).

소셜

Social 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
아이콘 컬렉션 선택	아이콘 컬렉션의 스타일을 설정합니다.
아이콘 컬렉션 구성	각 소셜 아이콘의 URL을 설정합니다. 제목 및 대체 텍스트를 편집할 수 있는 추가 옵션 토글이 포함되어 있습니다.
맞춤	소셜 아이콘을 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.
아이콘 간격	각 소셜 아이콘 사이의 간격을 결정합니다.

아이콘

Icons 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
Font family	단락 텍스트의 글꼴 스타일입니다.
Font weight	이것은 글꼴의 전체적인 굵기입니다.
Font size	텍스트 크기를 결정합니다.
Text color	제목의 색상을 수정합니다.
링크 색	링크의 색상을 수정합니다.
맞춤	아이콘을 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.
문자 간격	각 문자 사이의 거리를 수정합니다.
아이콘 크기	아이콘의 크기를 결정합니다.
아이콘 간격	아이콘의 공백을 수정합니다.
아이콘 패딩	아이콘의 패딩을 수정합니다.

HTML

HTML 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
HTML 편집기	원시 HTML을 입력합니다.

메뉴

Menu 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
메뉴 항목 구성	메뉴 항목을 추가합니다.
글꼴 패밀리	메뉴에 사용할 스타일입니다.
글꼴 크기	메뉴의 크기입니다.
텍스트 색상	메뉴의 색상을 수정합니다.
링크 색상	메뉴 텍스트의 색상을 수정합니다.
맞춤	메뉴를 왼쪽, 가운데 또는 오른쪽 방향으로 이동합니다.
문자 간격	각 문자 사이의 거리를 수정합니다.
레이아웃	레이아웃을 가로 또는 세로로 결정합니다.
구분 기호	메뉴 옵션 사이에 문자를 추가합니다.
모바일 메뉴	모바일 기기에 표시될 때 아이콘 크기, 색상 및 아이콘 유형을 수정하는 옵션이 포함되어 있습니다.
아이템 패딩	+ 또는 - 버튼을 사용하거나 특정 숫자를 입력하여 패딩을 수정합니다.
모든 측면	아이템 패딩이 비활성화된 경우 일관된 패딩 번호를 설정합니다.

행동

사용자가 메시징의 버튼, 링크 또는 이미지를 탭할 때 발생하는 동작을 지정할 수 있습니다. Liquid를 사용하여 작업을 개인화할 수도 있습니다. Details for each editor block’s actions are provided in the following tables.

버튼

Button 편집기 블록에 대한 자세한 내용은 다음 표를 참조하세요.

등록정보	설명
링크 유형	버튼을 클릭할 때 수행할 작업을 결정하고 적절한 프로토콜을 설정합니다.
URL	웹 페이지 링크 열기 유형에 따라 동적으로 변경됩니다.
메일 수신자, 제목 및 본문	이메일 링크 보내기 유형의 경우 사용자가 버튼을 선택하면 초안 이메일에 채워질 수신자 이메일 주소, 제목 및 콘텐츠를 설정합니다.
전화	전화 걸기 및 SMS 보내기 링크 유형의 경우 사용자가 버튼을 선택할 때 전화 또는 문자를 보낼 전화번호를 설정합니다.
메시지	SMS 링크 보내기 유형의 경우 사용자가 버튼을 선택하면 초안 SMS 메시지에 채워질 콘텐츠를 설정합니다.
버튼 옵션	글꼴, 너비, 색상 등 다양한 버튼 옵션을 설정합니다.
버튼 호버	The style of the button when a user hovers over it using a mouse or trackpad. This includes the button’s background color, font color, and border styles.