Diseño de una página de aterrizaje

Acerca del diseño de contenido de una página de aterrizaje

Las páginas de aterrizaje se crean como cualquier actividad de marketing.

Al diseñar una página de aterrizaje, debe definir el contenido de la propia página, la página de confirmación y la página de error. Utilice el selector situado debajo de la barra de acciones para mostrar y configurar cada una de estas páginas.

El contenido de las páginas de aterrizaje se diseña mediante el editor de contenido de Campaign.

En esta página se describen las características específicas del editor de contenido de páginas de aterrizaje. Para obtener más información sobre las acciones comunes para una o varias actividades de marketing, consulte estas secciones en la guía Diseño de contenido de correo electrónico:

• Inserción de un campo de personalización.
• Añadir un bloque de contenido
• Inserción de un vínculo
• Inserción de imágenes
• Prácticas recomendadas generales para el diseño de contenido

Interfaz del editor de contenido de páginas de aterrizaje

El editor de contenido de páginas de aterrizaje le permite definir, modificar y personalizar fácilmente el contenido en Adobe Campaign. Para acceder a él, haga clic en el bloque Content del panel de una página de aterrizaje.

El editor de contenido está organizado en tres secciones diferentes. Estas secciones le permiten ver y editar el contenido.

1. La paleta de la parte izquierda de la pantalla permite modificar las opciones generales vinculadas a un bloque seleccionado. Las opciones que se pueden modificar son: color de fondo, borde, alineación del texto, condición de visibilidad, etc. Consulte Inserción de un campo de personalización.
2. La barra de acciones contiene las opciones generales de la página. Puede seleccionar una plantilla y cambiar el modo de visualización.
3. La zona de edición principal le permite interactuar directamente con el contenido mediante la barra de herramientas contextual: insertar un vínculo en una imagen, cambiar la fuente, eliminar un campo, etc.

La barra de acciones contiene diferentes botones que le permiten interactuar con el contenido que se está creando.

Icono	Nombre del botón	Canal	Descripción
	Cambiar contenido	Página de aterrizaje y correo electrónico	Le permite seleccionar contenido listo para usar o importar su propio contenido HTML. Consulte Carga de contenido existente.
	Deshacer	Todo	Cancela la última acción realizada.
	Rehacer	Todo	Rehace la última acción que se ha cancelado.
	Mostrar bloques	Página de aterrizaje y correo electrónico	Permite mostrar los cuadros alrededor de los bloques de contenido (corresponde a la etiqueta HTML <div>).
	Mostrar origen	Página de aterrizaje y correo electrónico	Permite mostrar el código fuente HTML de la página.

La barra de herramientas es un elemento contextual de la interfaz del editor que incluye varias funciones según la zona seleccionada. Contiene botones de acción y botones que permiten cambiar el estilo del texto. Las modificaciones realizadas se aplican siempre a la zona seleccionada. Una vez seleccionado un bloque, puede eliminarlo o duplicado, por ejemplo. Después de seleccionar el texto dentro de un bloque, puede convertirlo en un vínculo o ponerlo en negrita.

Icono	Nombre del botón	Contexto	Descripción
	Vínculo a una URL externa	Cualquier elemento	Permite añadir un vínculo a una dirección URL. Los detalles de cómo configurar un vínculo se describen en la sección Inserción de un vínculo.
	Vincular a una página de aterrizaje	Cualquier elemento	Permite acceder a una página de aterrizaje de Adobe Campaign. Los detalles de cómo configurar un vínculo se describen en la sección Inserción de un vínculo.
	Vínculo de suscripción	Cualquier elemento	Permite insertar un vínculo de suscripción a un servicio. Los detalles de cómo configurar un vínculo se describen en la sección Inserción de un vínculo.
	Vínculo de cancelación de suscripción	Cualquier elemento	Permite insertar un vínculo para cancelar la suscripción a un servicio. Los detalles de cómo configurar un vínculo se describen en la sección Inserción de un vínculo.
	Quitar vínculo	Vínculo	Permite eliminar el vínculo, así como todas las configuraciones enlazadas a él, después de confirmarlo.
	Insertar un campo personalizado	Elemento de texto	Permite añadir un campo de la base de datos al contenido. Consulte Inserción de un campo de personalización.
	Insertar un bloque de contenido	Elemento de texto	Permite añadir un bloque de personalización al contenido. Consulte Añadir un bloque de contenido.
	Habilitar contenido dinámico	Elemento de texto	Permite insertar contenido dinámico en el contenido. Consulte Definición de contenido dinámico.
	Deshabilitar contenido dinámico	Elemento de texto	Permite eliminar contenido dinámico.
	Ampliar fuente	Elemento de texto	Aumenta el tamaño del texto seleccionado (añade <span style="font-size:">).
	Reducir fuente	Elemento de texto	Reduce el tamaño del texto seleccionado (añade <span style="font-size:">).
	Negrita	Elemento de texto	Añade el estilo en negrita al texto seleccionado (ajusta el texto con las etiquetas <strong></strong>).
	Cursiva	Elemento de texto	Añade el estilo en cursiva al texto seleccionado (ajusta el texto con las etiquetas <em></em>).
	Subrayado	Elemento de texto	Subraya el texto seleccionado (ajusta el texto seleccionado con la etiqueta <span style="text-decoration: underline;">).
	Cambiar color de fondo	Elemento de texto	Permite cambiar el color de fondo del bloque seleccionado (añade style="background-color: rgba(170, 86, 255, 0,87)).
	Cambiar color de fuente	Elemento de texto	Permite cambiar el color de todo el texto del bloque o solo el texto seleccionado (<span style="color: #56ff56;">).
	Imagen	Bloque que contiene una imagen	Permite insertar una imagen de un archivo guardado localmente.
	Eliminar	Cualquier bloque	Elimina el bloque y su contenido.
	Duplicar	Cualquier bloque	Duplica el bloque, incluidos los estilos vinculados a él.

Administración de la estructura y el estilo de la página de aterrizaje

Administración de bloques en el editor de contenido

Los diferentes elementos de contenido HTML se muestran en la página de aterrizaje como bloques, correspondientes a la etiqueta <div> </div>. Seleccione un bloque para interactuar con él. Después, aparece rodeado por un recuadro azul.

Si se selecciona un bloque, los objetos principales del elemento HTML correspondiente se muestran en una ruta de exploración ubicada en la parte inferior de la zona de edición.

Cuando el ratón se sitúa sobre uno de los elementos de la ruta de exploración, este aparece resaltado. Por lo tanto, puede desplazarse fácilmente entre los diferentes bloques y seleccionar exactamente el elemento HTML que desea modificar.

Utilice las opciones de la paleta y la barra de herramientas contextual para modificar, eliminar o duplicado el bloque.

Para los bloques que contienen texto, vuelva a hacer clic en el bloque para activar el modo de edición de texto. El marco alrededor del bloque se vuelve verde. A continuación, puede seleccionar o introducir texto. Utilice las opciones de la paleta y la barra de herramientas contextual para añadir un vínculo o modificar el formato del texto.

Los parámetros definidos para un elemento de un bloque (vínculos, campos de personalización, bloques de contenido, etc.) pueden modificarse en cualquier momento desde la paleta.

Añadir un borde y un fondo en el editor de contenido

Asimismo, se puede definir un de fondo seleccionando un color en la tabla de colores. Este color se aplica al bloque seleccionado.

Se puede añadir un borde al bloque seleccionado.

Cambio del estilo de texto en el editor de contenido

Para cambiar el estilo del texto, debe hacer clic dentro de un bloque de texto.

Para cambiar la alineación del texto, seleccione uno de los tres iconos siguientes en la paleta de la izquierda:

• Alinear a la izquierda: alinea el texto a la izquierda del bloque seleccionado (añade style="text-align: left;").
• Centrar: centra el texto en el bloque seleccionado (añade style="text-align: center;").
• Alinear a la derecha: alinea el texto a la derecha del bloque seleccionado (añade style="text-align: right;").

También puede utilizar la barra de herramientas para cambiar los atributos de la fuente: adaptar el tamaño de letra, poner el texto en negrita o en cursiva, subrayar o cambiar el color del texto. Consulte esta sección.

Inserción de imágenes en una página de aterrizaje

1. En el contenido de una página de aterrizaje, seleccione un bloque que contenga una imagen.

2. Seleccione el botón Insert.

   

3. Elija Local image en la barra de herramientas contextual.

   

4. Seleccione un archivo.

   

5. Ajuste las propiedades de la imagen según sea necesario.

   

Definición de contenido dinámico en una página de aterrizaje

Para definir contenido dinámico en una página de aterrizaje, seleccione un bloque con la ruta de exploración o haga clic directamente en un elemento.

Algunos bloques, como las imágenes, no se pueden seleccionar directamente. En este caso, seleccione el bloque principal mediante la ruta de exploración. A continuación, puede modificar todos los elementos incluidos en este elemento principal, incluidas las imágenes. La condición se aplica a todos los elementos secundarios dentro del bloque principal.

La ruta de exploración se presenta en la sección Administración de bloques.

Los siguientes pasos para definir contenido dinámico en una página de aterrizaje son similares a los pasos que se deben seguir para un correo electrónico. Consulte esta sección.

Puede desplazarse entre los distintos elementos del contenido dinámico de un bloque. Para ello:

1. Seleccione el bloque.

   Aparecen flechas a ambos lados de la imagen.

2. Haga clic en la flecha derecha para navegar por el contenido dinámico disponible.

   

   Las flechas de cada lado se atenúan según se haya alcanzado el último o el primer elemento del contenido dinámico disponible.

   

3. Para eliminar todas las condiciones aplicadas a un bloque, selecciónelo y haga clic en el icono Disable dynamic content.

4. Seleccione el contenido dinámico que desea conservar.

   

En la paleta:

• El contenido que tiene una expresión incluida ya no está delineado en rojo y se muestra en gris.
• El contenido seleccionado actualmente aparece en azul.

Recursos de Business.Adobe.com

Campaign Reporting Email Creation Campaign Management Email Deliverability Data Connectors Email Marketing