Criar um modelo de página de aterrissagem 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: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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:
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 "_". Não são permitidos espaços. Deve ser única.
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 de 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 "_". Não são permitidos espaços. Deve ser única.
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:Atributos obrigatórios:
classe: "mktoForm"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

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

Bloco de conteúdo snippet

Atributos obrigatórios:
classe: "mktoSnippet"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

Exemplo:

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

Compartilhar botão share-button

Atributos obrigatórios:
classe: "mktoShareButton"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

Exemplo:

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

Vídeo video

Atributos obrigatórios:
classe: "mktoVideo"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

Exemplo:

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

Pesquisa poll

Atributos obrigatórios:
classe: "mktoPoll"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

Exemplo:

<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>

Indicação referral

Atributos obrigatórios:
classe: "mktoReferral"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

Exemplo:

<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>

Sorteios sweepstakes

Atributos obrigatórios:
classe: "mktoSweepstakes"
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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.

Exemplo:

<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>

Variáveis editáveis editable-variables

Todos os tipos de variáveis são usados referenciando o valor de seu atributo id encapsulado dentro de uma sequência de caracteres ${ }. Elas podem ser usadas em qualquer lugar no documento, exceto dentro de outras declarações de variável.

Exemplo:

${var1}

Declaração:

As variáveis são declaradas como metatags dentro do elemento <head> do modelo. Há três tipos de variáveis disponíveis para uso: String, Cor e Booleano.

Sequência de caracteres string

Atributos necessários:
classe : "mktoString",
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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:
padrão: valor da cadeia de caracteres para o atributo. Em branco se nenhum for fornecido.
allowHtml: "true" ou "false". Controla se o valor será impresso sem ser escapado por HTML. O padrão é "false" se não estiver definido.

Exemplo básico:

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

Exemplo com todos os atributos:

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

Cor color

Atributos necessários:
classe : "mktoColor",
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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:
padrão: um código de cor de caractere HEX de 7 dígitos. Por exemplo: "#336699"

Exemplo básico:

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

Exemplo com todos os atributos:

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

Booleano boolean

Atributos necessários:
classe : "mktoBoolean",
id: cadeia de caracteres de ID. Contém apenas letras, números, traço "-" e sublinhado "_". Não são permitidos espaços. Deve ser única.
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:
padrão: cadeia de caracteres booleana. "true" ou "false" controla se o valor começa nas posições ON ou OFF. "false" se não fornecido.
false_value: cadeia de caracteres. O valor a ser inserido para a variável quando ela estiver na posição OFF. "false" se não fornecido.
valor_verdadeiro: cadeia de caracteres. O valor a ser inserido para a variável quando ela estiver na posição LIGADO. "true" se não for fornecido.
false_value_name: cadeia de caracteres. 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="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

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

Exemplo com todos os atributos:

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>