랜딩 페이지 템플릿 디자인

콘텐츠 디자인을 시작하려면 Structures​에서 항목을 드래그하여 캔버스에 놓습니다.

구조​에서 필요한 만큼 항목을 추가하고 오른쪽 창에서 각 항목의 설정을 편집합니다.

{width="800" modal="regular"}

각 열 크기는 구조 구성 요소의 전체 너비의 10%보다 작을 수 없습니다. 빈 열만 제거할 수 있습니다.

콘텐츠 섹션을 확장하고 하나 이상의 구조 구성 요소에 필요한 만큼 콘텐츠 구성 요소를 추가합니다.

{width="800" modal="regular"}

필요한 경우 설정 또는 스타일 탭에서 각 구성 요소를 추가로 사용자 지정할 수 있습니다.

예를 들어 각 구성 요소의 텍스트 스타일, 패딩 또는 여백을 변경할 수 있습니다.

조건부 콘텐츠를 추가하고 조건부 규칙에 따라 타겟팅된 프로필로 콘텐츠를 조정하려면 콘텐츠 구성 요소를 선택하고 구성 요소 도구 모음에서 조건부 콘텐츠 활성화 아이콘을 클릭합니다.

자세한 내용은 조건부 콘텐츠​를 참조하세요.

오른쪽에 표시되는 스타일 탭에서 사용자 지정 CSS 추가​를 클릭합니다.

사용자 지정 CSS 추가 팝업 편집기에 자리 표시자 코드 주석이 표시됩니다.

편집기에 CSS 코드를 입력합니다.

사용자 지정 CSS가 올바르고 적절한 구문을 따르는지 확인하십시오. 입력한 CSS가 올바르지 않으면 오류 메시지가 표시되고 CSS를 저장할 수 없습니다. 자세한 내용은 CSS 유효성을 참조하세요.

사용자 지정 CSS를 저장하려면 저장​을 클릭합니다.

사용자 지정 스타일 시트가 기존 콘텐츠에 적용됩니다. 사용자 지정 CSS가 필요에 따라 적용되는지 확인할 수 있습니다. 스타일 시트 응용 프로그램을 변경하고 조정하는 방법에 대한 자세한 내용은 문제 해결을 참조하십시오.

콘텐츠 섹션에서 양식 항목을 페이지 디자인 공간의 구조적 구성 요소에 끌어 놓습니다.

{width="600"}

구성 요소 도구 모음에서 양식 아이콘을 클릭하거나 오른쪽의 양식 포함 속성을 사용하여 게시된 양식을 선택합니다.

{width="600"}

양식에 대한 기본 후속 작업 형식​을(를) 재정의하려면 페이지나 템플릿의 요구 사항에 따라 설정을 변경합니다.

이는 양식에 대한 감사 페이지​라고도 하며, 이 설정은 방문자가 양식을 제출할 때 수행되는 작업을 결정합니다.

• 페이지에서 유지 - 양식을 제출할 때 방문자를 동일한 페이지에 유지하려면 이 옵션을 선택하십시오.

• 랜딩 페이지 - 후속 작업으로 Journey Optimizer B2B edition 또는 Marketo Engage 랜딩 페이지를 선택하려면 이 옵션을 선택하십시오.

• 외부 URL - URL을 후속 페이지로 지정하려면 이 옵션을 선택하십시오. 방문자가 양식을 제출하면 브라우저가 지정된 URL을 로드합니다.

  note tip
  TIP
  파일 다운로드에 양식을 사용하려는 경우 호스팅된 파일의 URL을 지정할 수 있습니다. 이 구성에서 제출 버튼은 다운로드 버튼으로 작동합니다.

{width="280"}

장치 유형별로 양식 표시를 제한하려면 표시 옵션 설정을 변경합니다.

• 데스크톱 장치에서만 표시
• 모바일 장치에서만 표시
• 모든 장치에서 표시(기본값)

필요한 경우 오른쪽 패널의 스타일 탭을 선택하여 페이지 내에서 양식 여백을 설정합니다.

캔버스에서 구조 구성 요소의 열을 직접 선택하거나 왼쪽에 표시된 탐색 트리​를 사용합니다.

열 도구 모음에서 열 선택 도구를 클릭하고 편집할 열을 선택합니다.

구조 트리에서 선택할 수도 있습니다. 해당 열에 대한 편집 가능한 매개 변수는 오른쪽의 설정 및 스타일 탭에 표시됩니다.

{width="800" modal="regular"}

열 속성을 편집하려면 오른쪽의 스타일 탭을 클릭하고 필요에 따라 변경합니다.

• Background​의 경우 필요에 따라 배경색을 변경합니다.

  투명 배경에 대한 확인란 선택을 취소합니다. 단색 대신 이미지를 배경으로 사용하려면 배경 이미지 설정을 사용하도록 설정하십시오.

• 정렬​에 대해 위쪽, 중간 또는 아래쪽 아이콘을 선택합니다.

• 패딩​에 대해 모든 면에 대한 패딩을 정의합니다.

  패딩을 미세 조정하려면 각 면에 대해 다른 패딩을 선택하십시오. 동기화를 중단하려면 잠금 아이콘을 클릭하십시오.

• 고급 섹션을 확장하여 열의 인라인 스타일을 정의합니다.

{width="700" modal="regular"}

필요한 경우 이 단계를 반복하여 구성 요소의 다른 열에 대한 맞춤 및 패딩을 조정합니다.

변경 내용을 저장합니다.

텍스트 구성 요소를 선택하고 도구 모음에서 개인화 추가 아이콘을 클릭합니다.

{width="600"}

이 작업은 Personalization 편집 대화 상자를 엽니다.

+ 또는 …​을(를) 클릭하여 빈 공간에 토큰을 추가합니다.

{width="700" modal="regular"}

저장​을 클릭합니다.

추적할 콘텐츠에 연결된 모든 URL을 표시하려면 왼쪽의 링크 아이콘( )을 클릭하십시오.

필요한 경우 편집( ) 아이콘을 클릭하고 추적 유형 또는 레이블​을(를) 수정합니다.

링크에 태그​를 추가할 수도 있습니다.