DocumentaciónMarketo EngageGuía de Marketo

Crear una plantilla de la página de destino guiada create-a-guided-landing-page-template

Last update: Mon Apr 27 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Las plantillas de página de aterrizaje guiada tienen una sintaxis especial. Utilice esta sintaxis para especificar qué se puede personalizar y dónde terminará el contenido en cada página de aterrizaje creada a partir de la plantilla. Solo las regiones o variables que especifique como editables estarán disponibles para la personalización en el editor de páginas de aterrizaje "Guiado".

TIP
Use buenas convenciones de nomenclatura y su equipo de marketing se enamorará de usted.

Existen dos maneras de declarar que algo en su página debe ser editable:

  • Declare un objeto como un "elemento". El creador de la página de aterrizaje podrá agregar imágenes, texto o recursos de Marketo a esas regiones especificadas.
  • Declare una cadena como "variable". El creador de la página de aterrizaje podrá reemplazar esa variable con una cadena, un color o un estado booleano desde una palanca true/false.

Elementos editables editable-elements

Los elementos se declaran agregando un elemento DOM normal a la plantilla y decorando el elemento con un nombre de clase específico de Marketo.

Texto text

Si define una región como Texto enriquecido, los usuarios podrán editar su contenido con el Editor de texto enriquecido de Marketo.

Atributos necesarios:
class: "mktoText"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Opcional:
El contenido de un elemento con clase mktoText (si se proporciona) se utilizará como valor predeterminado para el área editable.

Por ejemplo:

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

Imagen image

Tiene dos opciones para definir elementos de imagen editables. Puede usar un <div>, que especifica el contenedor en el que se insertará la imagen, o una etiqueta <img>.

Opción 1: usar un <div> option-use-a-div

Atributos necesarios:

clase: "mktoImg"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Opcional:
mktoImgClass: String. El valor aquí se añadirá al atributo class del elemento <img> dentro del div.

Por ejemplo:

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

Opción 2 - Usar un <img> option-use-a-img

Atributos necesarios:
clase: "mktoImg"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Opcional:
src: URL de cadena. Se utilizará como valor predeterminado para la imagen.

Por ejemplo:

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

NOTE
Al utilizar la versión <img>, el HTML procesado contendrá un contenedor div generado alrededor de la etiqueta <img>. Se establecerá en la clase ."mktoImg.mktoGen" y se mostrará:inline-block.

Formulario form

Atributos de ejemplo
class: "mktoForm"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

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

Fragmento snippet

Atributos necesarios:
class: "mktoSnippet"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Por ejemplo:

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

Compartir botón share-button

Atributos necesarios:
class: "mktoShareButton"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Por ejemplo:

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

Vídeo video

NOTE
Al utilizar el elemento de vídeo en una página de aterrizaje, Marketo solo admite vídeos de YouTube. Si utiliza otro servicio, le recomendamos que utilice un cuadro de texto enriquecido y pegue el código incrustado del vídeo.

Atributos necesarios:
clase: "mktoVideo"
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Por ejemplo:

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

Variables editables editable-variables

Todos los tipos de variables se utilizan haciendo referencia al valor de su atributo id dentro de una secuencia de caracteres ${ }. Se pueden utilizar en cualquier parte del documento, excepto en el interior de otras declaraciones de variables.

Por ejemplo:

${var1}

Declaración:

Las variables se declaran como metaetiquetas dentro del elemento <head> de la plantilla. Existen tres tipos de variables disponibles para su uso: cadena, color y booleano.

Cadena string

Atributos necesarios:
clase : "mktoString",
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.

Opcional:
default: valor de cadena para el atributo. Vacío si no se proporciona ninguno.
allowHtml: "true" o "false". Controla si el valor se imprimirá sin omitir HTML. Si no se establece, el valor predeterminado es "false".

Ejemplo básico:

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

Color color

Required Attributes:
class : "mktoColor",
id: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.

Optional:
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: cadena de ID. Solo contiene letras, números, guiones “-” y guiones bajos “_”. No se permiten espacios. El nombre debe ser único.
mktoName : cadena. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.

Optional:
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. Nombre para mostrar que se mostrará en el editor de páginas de aterrizaje cuando el valor esté en la posición OFF. "OFF" si no se proporciona.
true_value_name: String. Nombre para mostrar que se mostrará en el editor de páginas de aterrizaje cuando el valor esté en la posición ON. "ON" si no se proporciona.

Ejemplo básico:

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

Ejemplo con todos los atributos:

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

Este ejemplo muestra un caso de uso común en el que una variable booleana controla la visibilidad de un elemento css estableciendo el valor de la propiedad de visualización css en "block" o "none" para mostrar/ocultar un elemento por ID con CSS. El editor de la página de aterrizaje utilizará el nombre para mostrar Mostrar/Ocultar en lugar de OFF/ON.

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

NOTE
Los tokens de programa (my.token) también se pueden usar en cualquier lugar de las páginas de aterrizaje guiadas o de forma libre.
recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac