시각적 경험 작성기 옵션
Adobe Target Visual Experience Composer (VEC)에서 페이지 요소를 클릭하면 메뉴에 해당 요소 유형에 사용할 수 있는 옵션이 표시됩니다. 또한 페이지 구조를 쉽게 탐색할 수 있는 DOM 경로가 페이지 하단에 표시됩니다.
다양한 Visual Experience Composer (VEC) 작업은 작업을 보다 빠르고 효율적으로 수행할 수 있도록 적절한 메뉴 옵션으로 그룹화됩니다.
이미지 옵션
A/B Test 활동에서 이미지를 클릭하면 VEC가 다음 그림과 유사합니다.
이미지가 선택된
왼쪽의 구성 요소 프레임에서 구성 요소를 선택하여 다음 요소를 삽입합니다.
이미지 맨 위에 있는 메뉴를 사용하여 다음을 수행할 수 있습니다.
- 링크를 삽입합니다(
- 이미지를 변경합니다(
- 개인화 추가(
- 이미지를 삭제합니다(
오른쪽의 프레임을 통해 이미지의 속성을 추가로 구성할 수 있습니다.
프레임 상단의 아이콘을 사용하면 다음 작업을 수행할 수 있습니다.
- HTML(
- 이미지를 복제합니다(
- 이미지를 삭제합니다(
- 이미지를 숨깁니다(
오른쪽 프레임의 옵션을 사용하면 다음 작업을 수행할 수 있습니다.
- CSS 클래스를 편집합니다.
- 이미지의 속성(소스, 제목, 대체 텍스트)을 구성합니다.
- 링크 URL을 편집합니다.
- 이미지의 크기(높이 및 너비)를 구성합니다. 이미지의 최소 및 최대 크기, 너비, 높이, 오버플로 및 개체 맞춤을 구성하려면 Show Advanced Options을(를) 클릭하십시오.
- 페이지에서 이미지의 위치(절대, 고정, 상대, 정적 또는 고정)를 구성합니다.
- 여백 및 패딩을 포함하여 요소의 간격을 구성합니다.
- 요소의 효과(불투명도)를 구성합니다. 이미지의 세피아, 회색 음영, 대비, 밝기 및 흐림 값을 구성하려면 Show Advanced Options을(를) 클릭합니다. 이미지를 반전하거나 회전할 수도 있습니다.
- 이미지의 인라인 스타일을 구성합니다.
텍스트 옵션
A/B Test 활동에서 텍스트를 클릭하면 VEC가 다음 그림과 유사합니다.
텍스트가 선택된
다음 요소를 삽입하려면 왼쪽의 Components 프레임에서 구성 요소를 선택하십시오.
Show Modifications 아이콘(
텍스트 요소의 맨 위에 있는 메뉴를 사용하여 다음을 수행할 수 있습니다.
- 텍스트 속성(제목 수준, 단락, 블록 인용 또는 고정 폭) 구성
- 텍스트 색상 선택(
- 텍스트의 특성(굵게, 기울임꼴, 밑줄 또는 취소선)을 구성합니다(
- 텍스트의 맞춤을 구성합니다(왼쪽, 가운데, 오른쪽, 양쪽 맞춤)(
- 링크를 삽입합니다(
- 콘텐츠를 HTML 오퍼, 경험 조각 또는 [권장 사항]/help/main/c-recommendations/recommendations-as-an-offer.md)으로 바꾸십시오.
- HTML(
- 개인화 추가(
- 이미지를 삭제합니다(
오른쪽의 프레임을 통해 텍스트의 속성을 추가로 구성할 수 있습니다.
프레임 상단의 아이콘을 사용하면 다음 작업을 수행할 수 있습니다.
- HTML(
- 텍스트를 복제합니다(
- 텍스트를 삭제합니다(
- 텍스트를 숨깁니다(
오른쪽 프레임의 옵션을 사용하면 다음 작업을 수행할 수 있습니다.
- CSS 클래스를 편집합니다.
- 텍스트의 배경색 및 이미지를 구성합니다.
- 텍스트의 타이포그래피(제목 스타일, 글꼴 크기, 글꼴 두께, 줄 높이, 정렬, 텍스트 색상, 텍스트 스타일(굵게, 기울임꼴, 밑줄 또는 취소선) 구성
- 글머리 기호, 번호 매기기 또는 A,B,C를 포함한 목록을 구성합니다.
- 테두리 색상을 선택합니다.
- 텍스트 상자의 크기(높이 및 너비)를 구성합니다. Show Advanced Options을(를) 클릭하여 텍스트 상자의 최소 및 최대 크기, 너비, 높이, 오버플로 및 개체 맞춤을 구성합니다.
- 페이지에서 텍스트 상자의 위치(절대, 고정, 상대, 정적 또는 고정)를 구성하고 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 픽셀 수를 설정합니다.
- 여백 및 패딩을 포함하여 요소의 간격을 구성합니다.
- 요소의 효과(불투명도)를 구성합니다. 이미지의 세피아, 회색 음영, 대비, 밝기 및 흐림 값을 구성하려면 Show Advanced Options을(를) 클릭합니다. 텍스트를 반전하거나 회전할 수도 있습니다.
- 인라인 스타일을 구성합니다.
HTML 편집 html
HTML 코드 외에도, 사용자 지정 자바스크립트를 편집하고 삽입할 수 있습니다.
A/B 및 Experience Targeting 활동에 대한 텍스트와 HTML을 편집할 때 여러 서식 있는 텍스트 서식 옵션을 사용할 수 있습니다. 글꼴을 선택하고, 글꼴 스타일을 선택하고, 텍스트 정렬을 변경하고, 기타 표준 텍스트 서식 옵션을 사용할 수 있습니다. HTML을 수정할 때 HTML의 코드 보기와 리치 편집 보기 간에 전환할 수 있습니다.
다음 HTML5 태그를 중첩할 수 있습니다.
<a>
<h1-h6>
, <p>
, <ul>
, <ol>
, <menu>
, <div>
, <figure>
, <figcaption>
<ins>
<h1-h6>
, <p>
, <ul>
, <ol>
, <menu>
<del>
<ul>
, <ol>
, <menu>
, <h1-h6>
, <p>
<label>
<p>
DOM 경로를 사용하여 요소 탐색 dom-path
페이지에서 요소를 클릭하면 VEC 옵션 메뉴가 표시됩니다. 또한 요소를 클릭하면 해당 DOM 경로가 페이지 하단에 표시됩니다.
DOM 경로가 표시되지 않으면 Show DOM 아이콘(
DOM 경로를 사용하여 선택한 요소(유형, ID 및 클래스)에 대한 정보를 빠르게 확인하고, DOM 경로로 위 또는 아래로 이동하여 원하는 요소를 선택할 수 있습니다.
DOM 경로를 사용하여 VEC 내에서 상위 요소, 동일 수준의 요소 또는 하위 요소로 손쉽게 이동할 수 있습니다.
DOM 경로 기능은 클릭 추적을 설정할 때도 사용할 수 있습니다.