가이드 랜딩 페이지 템플릿 만들기 create-a-guided-landing-page-template
안내식 랜딩 페이지 템플릿에는 특수 구문이 있습니다. 이 구문을 사용하여 사용자 지정할 수 있는 항목과 템플릿으로 만든 각 랜딩 페이지에서 콘텐츠가 표시될 위치를 지정할 수 있습니다. 편집 가능으로 지정한 지역 또는 변수만 "안내가 있는" 랜딩 페이지 편집기 내에서 사용자 지정할 수 있습니다.
두 가지 방법으로 페이지에 있는 항목을 편집할 수 있다고 선언할 수 있습니다.
- 개체를 "element"로 선언합니다. 랜딩 페이지 작성자는 이미지, 텍스트 또는 Marketo 에셋을 지정된 영역에 추가할 수 있습니다.
- 문자열을 "변수"로 선언합니다. 랜딩 페이지 작성자는 true/false 레버의 문자열, 색상 또는 부울 상태로 해당 변수를 대체할 수 있습니다.
편집 가능한 요소 editable-elements
일반 DOM 요소를 템플릿에 추가한 다음 Marketo 관련 클래스 이름으로 요소를 장식하여 요소를 선언합니다.
텍스트 text
영역을 리치 텍스트로 정의하면 사용자가 Marketo의 리치 텍스트 편집기를 사용하여 콘텐츠를 편집할 수 있습니다.
필수 속성:
클래스: "mktoText"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
선택 사항:
mktoText 클래스(제공된 경우)가 있는 요소의 콘텐츠가 편집 가능 영역의 기본값으로 사용됩니다.
예:
<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>
이미지 image
편집 가능한 이미지 요소를 정의하는 두 가지 옵션이 있습니다. 이미지가 삽입될 컨테이너를 지정하는 <div> 또는 <img> 태그를 사용할 수 있습니다.
옵션 1 - <div> 사용 option-use-a-div
필수 속성:
클래스: "mktoImg"
id: ID 문자열. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
선택 사항:
mktoImgClass: 문자열 여기에 있는 값이 div 내에 있는 <img> 요소의 클래스 특성에 추가됩니다.
예:
<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>
옵션 2 - <img> 사용 option-use-a-img
필수 속성:
클래스: "mktoImg"
id: ID 문자열. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
선택 사항:
src: 문자열 URL 이 값은 이미지의 기본값으로 사용됩니다.
예:
<img class="mktoImg" id="exampleImg" mktoName="Example Image">
<img> 버전을 사용하는 경우 렌더링된 HTML에 <img> 태그 주위에 생성된 div 래퍼가 포함됩니다. 클래스로 설정됩니다 ."mktoImg.mktoGen"으로 설정되며, display:inline-block이 됩니다.양식 form
예:필수 속성:
클래스: "mktoForm"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>
코드 조각 snippet
필수 속성:
class: "mktoSnippet"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
예:
<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>
공유 단추 share-button
필수 속성:
클래스: "mktoShareButton"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
예:
<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>
비디오 video
필수 속성:
클래스: "mktoVideo"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
예:
<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>
여론 조사 poll
필수 속성:
클래스: "mktoPoll"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
예:
<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>
레퍼러 referral
필수 속성:
클래스: "mktoReferral"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
예:
<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>
경품 추첨 sweepstakes
필수 속성:
클래스: "mktoSweepstakes"
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
예:
<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>
편집 가능한 변수 editable-variables
모든 변수 유형은 ${ } 문자 시퀀스 안에 래핑된 해당 id 속성의 값을 참조하여 사용됩니다. 이 변수는 다른 변수 선언 내부를 제외하고 문서의 모든 위치에서 사용할 수 있습니다.
예:
${var1}
선언:
변수가 템플릿의 <head> 요소 내에 메타 태그로 선언되었습니다. 사용할 수 있는 변수에는 문자열, 색상 및 부울의 세 가지 유형이 있습니다.
문자열 string
필수 속성:
class : "mktoString",
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
선택 사항:
default: 특성의 문자열 값입니다. 아무 것도 제공되지 않으면 비어 있습니다.
allowHtml: "true" 또는 "false"입니다. 값이 HTML 이스케이프되지 않고 인쇄되는지 여부를 제어합니다. 설정하지 않으면 기본값이 "false"입니다.
기본 예:
<meta class="mktoString" id="var1" mktoName="My Variable">
모든 속성을 사용한 예:
<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">
색상 color
필수 속성:
클래스: "mktoColor",
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
선택 사항:
기본값: 7자리 16진수 문자 색상 코드입니다. 예: "#336699"
기본 예:
<meta class="mktoColor" id="color1" mktoName="My Color Variable">
모든 속성을 사용한 예:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
부울 boolean
필수 속성:
class : "mktoBoolean",
id: ID 문자열입니다. 문자, 숫자, 대시 "-" 및 밑줄 "_"만 포함합니다. 공백은 허용되지 않습니다. 고유해야 합니다.
mktoName : 문자열입니다. 랜딩 페이지 편집기에 표시되는 표시 이름입니다. 가장 좋은 방법은 수사적 이름을 사용하는 것입니다.
선택 사항:
기본: 부울 문자열입니다. true 또는 false는 값이 ON 또는 OFF 위치에서 시작하는지 여부를 제어합니다. 제공되지 않으면 "false"입니다.
false_value: 문자열입니다. 변수가 꺼짐 위치에 있을 때 변수에 삽입할 값입니다. 제공되지 않으면 "false"입니다.
true_value: 문자열입니다. 변수가 ON 위치에 있을 때 변수에 삽입할 값입니다. 제공되지 않으면 "true"입니다.
false_value_name: 문자열입니다. 값이 꺼짐 위치에 있을 때 랜딩 페이지 편집기에 표시할 표시 이름입니다. 제공되지 않으면 "꺼짐"입니다.
true_value_name: 문자열. 값이 ON 위치에 있을 때 랜딩 페이지 편집기에 표시할 표시 이름입니다. 제공되지 않을 경우 "켜기".
기본 예:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">
모든 속성을 사용한 예:
이 예는 부울 변수가 css 표시 속성의 값을 "block" 또는 "none"으로 설정하여 CSS를 사용하는 id별로 요소를 표시하거나 숨김으로써 css 요소의 가시성을 제어하는 일반적인 사용 사례를 보여줍니다. 랜딩 페이지 편집기에서 표시 이름 OFF/ON 대신 Show/Hide를 사용합니다.
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show"> <style> #myConditionalDisplayArea { display: ${boolean1}; } </style>