Añadir y Editar Botones y Páginas de Confirmación

Los botones son el objetivo de tu landing page. El momento en que tu visitante dice "¡Sí, suscríbeme por favor!" Esperando que algo increíble pase después. No temas, en Unbounce tienes la posibilidad de personalizar los botones y confirmaciones de tu landing page para obtener el máximo wow!

 Este artículo te enseñará cómo:

  • Insertar campos predefinidos y personalizados en el formulario de tu landing page.
  • Elegir el orden, tipo y estilo de los campos en tu formulario.
  • Identificar los mejores tipos de formularios basados ​​en tus necesidades.

Propiedades del botón

Haz clic en tu botón para mostrar sus propiedades en el panel que aparece a la derecha:

Geometry (Geometría)

Cambia manualmente el tamaño y la posición de tu botón.

Label (Etiqueta)

Cambia el texto y la fuente de tu Llamada a la Acción (Sugerencia: nunca utilices “Enviar”)

Appearance (Apariencia)

Elige un estilo para el botón (color sólido, degradado de color o imagen) y a continuación elige el aspecto de tu botón en tres modos: Up, Hover y Active. Si seleccionas un degradado de color, el Editor de Páginas seleccionará automáticamente el color secundario, aunque siempre podrás cambiarlo manualmente haciendo clic en el botón de bloqueo. También puedes cambiar el color del marco y el radio de las esquinas de tu botón.

Una vez que hayas editado la apariencia de un botón en tu página, Unbounce hará coincidir sus características a cualquier otro botón que agregues (con la excepción de imágenes que uses como botones).


Opciones de confirmación del formulario

Al hacer clic en los campos de texto del formulario, verás su panel de propiedades a la derecha. Busca ahí la sección Form Confirmation (Confirmación del Formulario) y abre la lista desplegable. Allí encontrarás cuatro opciones:

Show form confirmation dialog (Mostrar el diálogo de confirmación del formulario)

Muestra una ventana de confirmación del formulario (más conocido como Thank You Page o Página de agradecimiento) que puedes editar en Unbounce de la misma manera que editas tu landing page.

Para editar el diálogo de confirmación del formulario, haz clic en el botón que se encuentra debajo del cuadro de confirmación de formulario o haz clic en la pestaña Form Confirmation Dialog en la parte superior izquierda del editor de páginas. Aquí puedes utilizar las pestañas para cambiar entre el diálogo de confirmación del formulario y la página principal.

También puedes utilizar una de nuestras Integraciones para recopilar datos del formulario.

  1. Show alert message (Mostrar mensaje de alerta): Muestra un mensaje de tu elección dentro del navegador. 
  2. Go to URL (Ir a un URL): Envía al usuario a otra página (con la opción de agregar los datos del formulario al URL). 
  3. Post form data to a URL (Publicar datos del formulario en una URL): envía los datos del formulario y a tu usuario a otra página.

Cómo mostrar contenido en una Lightbox

El Editor de Páginas admite un máximo de 20 lightboxes por página.

 Para lanzar una lightbox usando un botón:

  1. Si no lo has hecho todavía, agrega un nuevo botón de lightbox arrastrando y soltando el widget desde el panel de la izquierda.

  1. Selecciona tu botón y haz clic en Edit Lightbox (Editar Lightbox).

 

  1. Agrega o edita tu contenido tal como lo harías con tus otras páginas de Unbounce.

Indicadores

 Verás esta imagen si tienes una nueva lightbox que todavía no has editado.

 Verás esto si tienes una lightbox sin enlaces a ella o has alcanzado la cantidad máxima de lightboxes.

Para lanzar un lightbox desde una imagen:

  1. Si no lo has hecho todavía, agrega un nuevo botón de lightbox arrastrando y soltando el widget desde el panel de la izquierda.
  2. En la sección Appearance (Apariencia) del Panel de Propiedades, haz clic en el menú desplegable Style (Estilo) y selecciona Image (Imagen).
  3. En la ventana Choose image (Elegir imagen) que aparece, selecciona o añade la imagen que quieres mostrar como imagen de vista previa de tu lightbox.
    No podrás editar la imagen dentro del Editor de Páginas, por lo que debes asegurarte de que esta ya esté dimensionada cómo quieres.
  1. Edita el estilo del botón (por ejemplo, elimina el borde, elimina el texto de la etiqueta, modifica el radio de las esquinas a "0") como tú desees para crear la apariencia de una imagen.

¡Ahora agrega tus propias imágenes a tus lightboxes!

Artículos relacionados: 

Añadir un formulario a una lightbox

Cómo añadir una vista previa de imagen a una lightbox


Cómo añadir botones para marcar un número “Click to Call”

Los botones para marcar un número ofrecen al visitante una manera rápida y sencilla de llamarte.

Una vez que tu botón tiene la apariencia que deseas en tu Editor de Páginas, haz clic sobre él para revelar sus propiedades a la derecha de la interfaz.

Selecciona Go to URL (Ir a URL) como acción del clic del botón.

Para el enlace, utiliza el formato "tel:[código de país][código de área][número de teléfono]".

Por ejemplo, el código de Canadá es 1, nuestro código de área es 604, y nuestro número de teléfono es 484-1354, por lo que nuestro enlace sería tel:16044841354.

A continuación, haz clic en la pestaña Conversion Goals (Objetivos de conversión) en la parte superior derecha y selecciona el vínculo recién creado como tu objetivo de conversión. Esto garantizará que las llamadas se registren correctamente como conversiones en tus estadísticas.

Por último, publica tu página.


Cómo pasar parámetros de URL de entrada a vínculos de botones de salida

Si estás utilizando una página click through, puede que te interese enviar a tu visitante junto con los parámetros de URL con los que llegó.

Cuando agregues tu botón, dirígete a sus propiedades a la derecha y busca Click Action. Desde allí, selecciona Pass through URL parameters (Pasar parámetros de URL) y se pasarán al siguiente destino de tu visitante.


Añadir Descargas de Archivos

Cómo añadir descargas de archivos (PDF, eBook, reportes, etc.)

Atraer a los clientes con contenido espectacular es una gran estrategia para recoger leads. ¡¿Quién no quiere descargar un documento técnico de lo más sexy?!

Una forma de configurar este proceso es incorporar una descarga de archivos en la página de confirmación de generación de leads. De esta manera, cuando el lead proporciona su información, es recompensado ​​con tu maravilloso contenido. Además de ser eficiente, añadir descargas de archivos a tus páginas de confirmación de generación de leads es una manera encantadora de decir "¡oye, muchas gracias!" a tus clientes potenciales.

Unbounce te permite compartir descargas de archivos en tus páginas de confirmación de generación de leads. Esto te permite administrar fácilmente tus campañas de captura de leads y los archivos que estás obsequiando cuando la gente completa tus formularios.

Para hacer esto, sigue los pasos siguientes

  1. Elige una plantilla que tenga un formulario o agrega un formulario a tu página existente.
  2. Haz clic en Form Confirmation dialog (Diálogo de confirmación de formulario) en la parte superior izquierda del Editor de Páginas para editar la página de confirmación de formulario.
  3. Agrega un botón a tu página arrastrando el icono de botón verde en la paleta de objetos hacia la página.
  4. Selecciona el botón y modifica su acción a Download File (Descargar archivo) en el Panel de Propiedades a la derecha.
  5. Elige el archivo que quieres que tus visitantes descarguen o agrega un nuevo archivo (límite de 200MB).
  6. Personaliza la apariencia de tu botón y guarda tu página.

¡Listo!

Ahora, tu landing page para la generación de leads está lista para que tus visitantes puedan descargar un archivo después de completar el formulario.

¡Adelante!

¿Cómo redirigir a otra página después de enviar el formulario?

Si quieres configurar tu formulario para que redirija al usuario a otra página después de hacer clic en el botón, sigue estos pasos:

  1. Haz clic en uno de los campos del formulario (no en el botón) para seleccionar el formulario.
  2. En el Panel de Propiedades a la derecha, selecciona Go to URL en el menú desplegable de Form Confirmation (Confirmación de formulario).
  3. Introduce el URL de tu página de destino en el campo de texto proporcionado.

Cómo añadir una ventana estilo Lightbox (para Política de privacidad, Normas, Condiciones, etc.)

Esta función requiere Javascript personalizado. Si no estás familiarizado con Javascript, ponte en contacto con uno de nuestros asesores técnicos para encontrar una solución alternativa.

Paso A: Crea y publica una página con tu política de privacidad (reglas, términos y condiciones, etc.)

Es eso, crear y publicar una landing page con tu Política de Privacidad, etc. Asegúrate de cambiar el tamaño de los márgenes de la página para ajustarla al contenido de tu página principal y a continuación anota el URL de la nueva página publicada.

Paso B: Agrega los scripts necesarios a tu landing page principal 

  1. Accede a tu página en el editor Unbounce y haz clic en el botón Javascripts en la parte inferior izquierda del editor.
  2. En la parte inferior izquierda del cuadro Javascripts, habilita jQuery y jQuery Fancybox.
  3. Haz clic en el botón Add (Agregar) en la parte superior izquierda del cuadro de diálogo para agregar un nuevo script.
  4. Nombra a este nuevo script como FancyBox y para la ubicación selecciona Before Body End Tag.
  5. Pega el código siguiente:



  1. Ten en cuenta que el fragmento #lp-pom-text-22 en el script anterior debe cambiarse a la ID de tu cuadro de texto. Para encontrar el ID de tu cuadro de texto, haz clic en el cuadro de texto y dirígete a la pestaña Properties (Propiedades) en la parte superior derecha del editor. En la parte inferior de Properties hay un encabezado denominado Advanced (Avanzado). Debajo de este encontrarás el ID del cuadro de texto junto a ID. Copia este ID y colócalo en el script donde se encuentra actualmente #lp-pom-text-22. A continuación, haz clic en Done (Hecho).

 

No elimines la 'a' del fragmento. Por ejemplo, si tu ID de texto es '#lp-pom-text-155', tu código se verá como:

 $('#lp-pom-text-155 a').fancybox({

Paso C: Agrega un enlace para activar el Lightbox

  1. Resalta el texto que quieres que active la Lightbox.
  2. Selecciona ‘Action’ en el panel de propiedades de la derecha.
  3. Pega tu URL en el campo "URL" y pulsa Enter.
  4. Comprueba que hayas seleccionado Same tab or window (Misma pestaña o ventana) en el menú desplegable Target.
  5. Guarda los cambios y publica tu página. ¡Presto! ¡Terminaste!

Nota: En este ejemplo usamos un plugin de jQuery llamado Fancybox, pero cualquier otra opción de javascript overlay/dialog/lightbox puede funcionar (hay muchísimas en el mercado).

Échale un vistazo a Fancybox y descubre lo que puedes hacer con él.

Algo a tener en cuenta es que el script lightbox es muy específico y la versión utilizada aquí solo funcionará para enlaces de texto con la clase iframe fancybox.

Si necesitas ayuda para desarrollar una Política de Privacidad adaptada a tu empresa y uso, te recomendamos iubenda.


Cómo añadir vínculos y botones de desplazamiento suave

Esta función requiere JavaScript personalizado. Si no estás familiarizado con Javascript, ponte en contacto con uno de nuestros asesores técnicos para encontrar una solución alternativa.

Puedes agregar enlaces y botones de desplazamiento suaves a tu landing page con un poco de Javascript.

Abre tu diálogo Javascripts a través de la pestaña que se encuentra en la parte inferior izquierda del

Editor de Páginas de Unbounce y pega el código siguiente:

 

Ahora puedes seleccionar cualquier objeto o sección de página como destino para un enlace de desplazamiento suave.

Copa el ID del objeto en el Panel de Propiedades a la derecha del Editor de Páginas (por ejemplo, #lp-pom-block-9).

Para un botón: pega el ID como enlace para tu Acción de Clic. Asegúrate de no seleccionar Pass through URL parameters.

Para un enlace de texto: Pega el ID como URL para tu enlace.

Ahora sólo tienes que guardar y publicar tu página ¡y ver el desplazamiento suave en acción!


Cómo mostrar valores del formulario en tu diálogo de confirmación (usando texto dinámico)

Para personalizar la confirmación del formulario (página de agradecimiento) con Reemplazo de Texto Dinámico, dirígete al Editor de Páginas y navega hasta el cuadro de Confirmación de formulario haciendo clic en la pestaña que se encuentra en la esquina superior izquierda. Cuando te encuentres satisfecho con la apariencia de tu texto (puedes utilizar texto provisional si tu campo de formulario es requerido):

  1. Abre el editor de texto haciendo doble clic en el cuadro de texto.
  2. Selecciona el texto que quieres que sea dinámico. 
    • Si el campo de formulario que estás pasando no es requerido, querrás asegurarte de tener un texto por defecto que tenga sentido, de lo contrario puedes usar un texto provisional como NOMBRE, ya que los visitantes nunca lo van a ver.
  3. Nombra al parámetro con el mismo nombre del campo de formulario de tu landing page.
    • Generalmente es el nombre, en minúsculas, con guiones bajos en lugar de espacios (por ejemplo first_name) pero siempre podrás comprobar el nombre del campo en el Editor del formulario, verás el nombre del campo debajo del campo en gris.

Una vez que guardes y publiques la página, tu confirmación de formulario (página de agradecimiento) se actualizará automáticamente según la información en el formulario.


Glosario

Botón: normalmente el botón es tu llamada a la acción, lo único sobre lo que quieres que la gente haga clic en tu landing page.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 6 de 14
Tecnología de Zendesk