웹 디자이너를 사용하여 작업 work-with-web-designer
Journey Optimizer에서 시각적 웹 작성은 Adobe Experience Cloud Visual Helper Chrome 브라우저 확장 기능을 통해 제공됩니다. 자세히 알아보기
웹 경험 작성 시작
비주얼 웹 디자이너를 사용하여 웹 경험 작성을 시작하려면 아래 단계를 따르십시오.
-
콘텐츠 편집 화면에서 웹 페이지 편집 을 클릭하여 웹 디자이너를 엽니다.
note note NOTE 로드하지 못하는 웹 사이트를 로드하려고 하면 Visual Editing Helper 브라우저 확장 기능을 설치하라는 메시지가 표시됩니다. 이 섹션에서 문제 해결을 위한 팁을 확인하십시오. 비주얼 편집기를 로드하지 않고 웹 콘텐츠를 편집할 수도 있습니다. 이렇게 하려면 시각적 편집기 옵션을 선택 취소하여 비시각적 편집 모드를 대신 사용하십시오. 자세히 알아보기 -
웹 디자이너에 있는 경우 캔버스에서 이미지, 단추, 단락, 텍스트, 컨테이너, 머리글, 링크 등과 같은 요소를 선택합니다. 자세히 알아보기
-
요소를 편집하려면 다음을 사용할 수 있습니다.
-
컨텍스트 메뉴 를 사용하여 콘텐츠, 레이아웃, 링크 또는 개인화 등을 편집할 수 있습니다.
-
오른쪽 패널 상단에 있는 아이콘으로 각 요소를 편집, 복제, 삭제 또는 숨길 수 있습니다.
-
선택한 요소에 따라 동적으로 변경되는 오른쪽 패널. 예를 들어 요소의 배경, 타이포그래피, 테두리, 크기, 위치, 간격, 효과 또는 인라인 스타일을 편집할 수 있습니다.
-
웹 콘텐츠를 편집한 후에는 수정 사항을 관리할 수 있습니다. 자세히 알아보기
구성 요소 사용 content-components
-
왼쪽의 구성 요소 창에서 항목을 선택합니다. 웹 페이지에 다음 구성 요소를 추가하고 필요에 따라 편집할 수 있습니다.
- 구분선
- HTML
- 이미지
- 제목 - 이 구성 요소를 사용하는 것은 이메일 디자이너에서 텍스트 구성 요소를 사용하는 것과 비슷합니다. 자세히 알아보기
- 단락 - 이 구성 요소를 사용하는 것은 이메일 디자이너에서 텍스트 구성 요소를 사용하는 것과 비슷합니다. 자세히 알아보기
- 링크
-
페이지에서 마우스를 가져간 후 다음 항목 앞에 삽입 또는 다음 항목 뒤에 삽입 단추를 클릭하여 구성 요소를 페이지의 기존 요소에 추가하십시오.
note note NOTE 구성 요소의 선택을 취소하려면 캔버스 위에 표시된 파란색 상황에 맞는 배너에서 ESC 단추를 클릭합니다. -
페이지 콘텐츠에서 필요에 따라 구성 요소를 바로 편집합니다.
-
배경, 텍스트 색상, 테두리, 크기, 위치 등과 같이 오른쪽에 있는 상황별 창에서 표시되는 스타일을 조정합니다. - 선택한 구성 요소에 따라 다릅니다.
개인화 추가
개인화를 추가하려면 컨테이너를 선택하고 표시되는 상황별 메뉴 모음에서 개인화 아이콘을 선택합니다. 개인화 편집기를 사용하여 변경 사항을 추가합니다. 자세히 알아보기
웹 디자이너 탐색 navigate-web-designer
이 섹션에서는 웹 디자이너를 탐색할 수 있는 다양한 방법에 대해 자세히 설명합니다. 웹 경험에 추가된 수정 사항을 보고 관리하려면 이 섹션을 참조하세요.
탐색 표시 사용 breadcrumbs
-
캔버스에서 요소를 선택합니다.
-
선택한 요소에 대한 정보를 빠르게 표시하려면 화면 왼쪽 하단의 이동 경로 확장/축소 단추를 클릭합니다.
-
이동 경로를 마우스로 가리키면 편집기에서 해당 요소가 강조 표시됩니다.
-
이를 사용하여 시각적 편집기 내에서 상위 요소, 동위 요소 또는 하위 요소로 쉽게 이동할 수 있습니다.
찾아보기 모드로 전환 browse-mode
전용 단추를 사용하여 기본 디자인 모드에서 찾아보기 모드로 전환할 수 있습니다.
찾아보기 모드에서 개인화할 선택한 구성에서 정확한 페이지로 이동할 수 있습니다.
이 메서드는 인증이 지연되거나 특정 URL에서 처음부터 사용할 수 없는 페이지를 처리할 때 특히 유용합니다. 예를 들어, 원하는 페이지에서 변경을 수행하기 위해 인증하고, 계정 페이지 또는 장바구니 페이지로 이동한 다음, 디자인 모드로 다시 전환할 수 있습니다.
찾아보기 모드를 사용하면 단일 페이지 응용 프로그램을 작성할 때 웹 사이트의 모든 보기를 탐색할 수도 있습니다. 자세히 알아보기
장치 크기 변경 change-device-size
웹 디자이너 디스플레이의 장치 크기를 태블릿 또는 모바일 가로 와 같이 미리 정의된 크기로 변경하거나 원하는 픽셀 수를 입력하여 사용자 지정 크기를 정의할 수 있습니다.
확대/축소 포커스를 25%에서 400%로 변경할 수도 있습니다.
장치 크기를 변경하는 기능은 다양한 장치, 창 및 화면 크기에서 잘 렌더링되는 반응형 사이트를 위해 설계되었습니다. 반응형 사이트는 데스크탑, 노트북, 태블릿 또는 휴대폰을 포함하여 모든 화면 크기를 자동으로 조정하고 적응합니다.
방법 비디오 video
아래 비디오에서는 Journey Optimizer 캠페인에서 웹 디자이너를 사용하여 웹 경험을 만드는 방법을 보여 줍니다.