Diseño de una página de aterrizaje designing-a-landing-page

Acerca del diseño de contenido de una página de aterrizaje about-content-design

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.

NOTE
Para el diseño de correo electrónico, si la instancia se instaló antes de la versión 19.0 de Adobe Campaign Standard, seguirá teniendo acceso al editor de contenido de correo electrónico anterior. La interfaz, los principios de uso y la configuración son esencialmente los mismos que se describen a continuación para páginas de aterrizaje. Sin embargo, es posible que todas las funciones no estén disponibles ni se mantengan en el editor de contenido de correo electrónico anterior, que ya no se utiliza en la versión 19.0. Para editar rápidamente el contenido del correo electrónico mediante una interfaz de arrastrar y soltar con funciones extendidas, utilice el Diseñador de correo electrónico.

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:

NOTE
Si tiene una página de aterrizaje que ya está predefinida en formato HTML, puede importarla directamente con el botón Change content.
Antes de importar una página HTML en Adobe Campaign, asegúrese de que se abra y se muestre correctamente en los distintos navegadores. Si la página HTML contiene secuencias de comandos JavaScript, deben ejecutarse sin errores fuera del editor. En general, evite utilizar secuencias de comandos en el contenido del mensaje para asegurarse de que los clientes de correo electrónico lo procesan correctamente.

Interfaz del editor de contenido de página de aterrizaje landing-page-content-editor-interface

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.

IMPORTANT
Algunas funciones de la barra de herramientas permiten dar formato al contenido HTML. Sin embargo, si la página contiene una hoja de estilos CSS, las instrucciones de dicha hoja pueden tener prioridad sobre las instrucciones especificadas con la barra de herramientas.
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 página de aterrizaje managing-landing-page-structure-and-style

Administración de bloques en el editor de contenido managing-blocks-in-the-content-editor

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 adding-a-border-and-a-background-in-the-content-editor

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 changing-the-text-style-in-the-content-editor

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 inserting-images-in-a-landing-page

  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 defining-dynamic-content-in-a-landing-page

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.

NOTE
Si un elemento de variante está delineado en rojo, significa que aún no se ha definido una expresió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.

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff