Criar um modelo de página de destino guiada create-a-guided-landing-page-template

Os templates de landing page guiados têm uma sintaxe especial. Use essa sintaxe para especificar o que é personalizável e onde o conteúdo acabará em cada página de aterrissagem criada a partir do seu modelo. Somente as regiões ou variáveis especificadas como editáveis estarão disponíveis para personalização no editor de página de aterrissagem "Guiado".

Há duas maneiras de declarar que algo em sua página deve ser editável:

Elementos editáveis editable-elements

Os elementos são declarados adicionando um elemento DOM normal ao modelo e, em seguida, decorando o elemento com um nome de classe específico do Marketo.

Texto text

Se você definir uma região como Rich text, os usuários poderão editar seu conteúdo usando o Editor de Rich Text do Marketo.

Atributos obrigatórios:
classe: "mktoText"
id: string de ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Opcional:
O conteúdo de um elemento com a classe mktoText (se fornecido) será usado como o valor padrão da região editável.

Exemplo:

<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>

Imagem image

Você tem duas opções para definir Elementos de imagem editáveis. Você pode usar um <div>, que especifica um contêiner no qual a imagem será inserida, ou uma marca <img>.

Opção 1: usar um <div> option-use-a-div

Atributos obrigatórios:

class: "mktoImg"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : Cadeia de caracteres. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Opcional:
mktoImgClass: String. O valor aqui será adicionado ao atributo de classe do elemento <img> dentro da div.

Exemplo:

<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>

Opção 2 - Usar um <img> option-use-a-img

Atributos obrigatórios:
class: "mktoImg"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : Cadeia de caracteres. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Opcional:
src: URL da string. Ele será usado como valor padrão para a imagem.

Exemplo:

<img class="mktoImg" id="exampleImg" mktoName="Example Image">

Formulário form

Exemplo de atributos
classe: "mktoForm"
id: string da ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>

Snippet snippet

Atributos obrigatórios:
classe: "mktoSnippet"
id: string de ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Exemplo:

<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>

Compartilhar botão share-button

Atributos obrigatórios:
classe: "mktoShareButton"
id: string da ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Exemplo:

<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>

Vídeo video

Atributos obrigatórios:
class: "mktoVideo"
id: string de ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Exemplo:

<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>

Editable Variables editable-variables

All variable types are used by referencing the value of their id attribute wrapped inside of a ${ } character sequence. They can be used anywhere in the document, except for inside of other variable declarations.

Exemplo:

${var1}

Declaration:

Variables are declared as meta tags inside the <head> element of the template. There are three types of variables available for use: String, Color, and Boolean.

String string

Required Attributes:
class : "mktoString",
id: string da ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Opcional:
default: String value for the attribute. Blank if none provided.
allowHtml: "true" or "false". Controls if the value will be printed without being HTML escaped. Defaults to "false" if unset.

Basic Example:

<meta class="mktoString" id="var1" mktoName="My Variable">

Example with all attributes:

<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">

Cor color

Required Attributes:
class : "mktoColor",
id: string da ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Opcional:
default: A 7-digit HEX character color code. Eg: "#336699"

Basic Example:

<meta class="mktoColor" id="color1" mktoName="My Color Variable">

Example with all attributes:

<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

Booleano boolean

Required Attributes:
class : "mktoBoolean",
id: string da ID. Contém apenas letras, números, traço “-” e sublinhado “_”. Espaços não são permitidos. Precisa ser exclusivo.
mktoName : string. Esse é o nome de exibição que será mostrado no editor de landing page. A prática recomendada é usar um nome descritivo.

Opcional:
default: Boolean string. "true" or "false" controls if the value starts in the ON or OFF position. "false" if not provided.
false_value: String. The value to be inserted for the variable when it is in the OFF position. "false" if not provided.
true_value: String. The value to be inserted for the variable when it is in the ON position. "true" if not provided.
false_value_name: String. O nome de exibição a ser mostrado no editor de landing page quando o valor estiver na posição OFF. "OFF" se não fornecido.
true_value_name: cadeia de caracteres. O nome de exibição a ser mostrado no editor de página de aterrissagem quando o valor estiver na posição LIGADO. "ON" se não fornecido.

Exemplo básico:

<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">

Exemplo com todos os atributos:

<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

Este exemplo mostra um caso de uso comum em que uma variável booleana controla a visibilidade de um elemento css definindo o valor da propriedade de exibição css como "bloquear" ou "nenhum" para mostrar/ocultar um elemento por id com CSS. O editor de página de aterrissagem usará o nome de exibição Mostrar/Ocultar em vez de DESATIVAR/ATIVAR.

<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>