Share
Última actualización: ¡Tenemos más buenas noticias! Unbounce ha agregado varias nuevas características de diseño, dando a los usuarios de Unbounce acceso a algunas herramientas de diseño muy poderosas. Las nuevas características son:
Estas actualizaciones permitirán que los clientes de Unbounce agreguen estas características sin utilizar soluciones provisionales de código de terceros. Todas las operaciones agregadas en esta actualización se pueden realizar de forma rápida y sencilla: los diseñadores web de todas las franjas podrán aprovechar las nuevas características de Unbounce.
Hemos actualizado la publicación de nuevo para reflejar estos cambios recientes. Le mostraremos dónde encontrar las funciones y cómo usarlas. Puede obtener más información sobre las últimas actualizaciones al final de la Parte 2 a continuación.!
Actualizar: ¡Grandes noticias! Las páginas de destino de Unbounce ahora responden a dispositivos móviles, lo que significa que los diseñadores pueden crear y vender plantillas que se ajustarán automáticamente a cualquier dispositivo. Esta es la actualización de productos más grande de Unbounce hasta la fecha y miles de profesionales de marketing buscarán actualizar sus páginas de aterrizaje para que respondan a dispositivos móviles. En otras palabras, van a necesitar nuevas plantillas cuanto antes..
Hemos actualizado esta publicación para mostrarle qué es el dispositivo móvil sensible y cómo puede diseñar una plantilla móvil en Unbounce. Puede pasar a la Parte 4 a continuación si ya ha dominado Unbounce y está listo para comenzar a diseñar para dispositivos móviles.!
En este tutorial, le presentaré Unbounce, una herramienta para crear páginas de destino específicas para campañas. Recorreremos la anatomía de varios tipos de página de destino, veremos las características de la herramienta y luego cubriremos lo que se necesita para vender sus propias plantillas de Unbounce en Themeforest..
Unbounce fue construido para resolver un problema muy específico; para empoderar a los profesionales de marketing para que construyan hermosas páginas de destino específicas para campañas de alto rendimiento. Es decir, sin la ayuda de los desarrolladores o, aquí es donde entran las plantillas, los diseñadores.
Dado que la base de usuarios principal de Unbounce son los profesionales de marketing que pueden no estar familiarizados con las herramientas de diseño robustas, el generador de páginas de destino está diseñado para ser fácil de usar, con una interfaz WYSIWYG, arrastrar y soltar. Dicho esto, los diseñadores expertos también pueden sentirse como en casa; es posible agregar widgets personalizados de JavaScript, CSS y HTML y ajustar los elementos de la página al píxel.
Las páginas de destino son páginas web independientes que sirven para un objetivo específico y predefinido para los vendedores. Si los mercadólogos están tratando de vender un producto o servicio, pueden usar una página de destino para educar al usuario antes de dirigirlo a la página de precios. Si están promocionando un nuevo libro electrónico, necesitarán una página de inicio para recopilar información de contacto de sus visitantes antes de entregar el archivo. Para ambas campañas (¡y para casi todas las campañas!), El simple hecho de enviar visitantes a su página de inicio, en lugar de una página de destino dedicada, supondría un error de marketing..
En resumen, las páginas de destino están diseñadas para empujar a los usuarios hacia un objetivo específico, centrado en la conversión.
Comercializadores profesionales en su mayoría con experiencia. Están ejecutando campañas de marketing constantemente y no pueden / no quieren confiar en sus desarrolladores internos para crear una página de destino única para cada campaña. Alrededor de un tercio de nuestros clientes son parte del equipo de marketing de una empresa, otro tercio trabaja en una agencia de marketing y el tercero restante son empresarios..
Si los clientes de Unbounce no tienen las habilidades de diseño para sentirse cómodos al crear una página desde cero, comenzarán desde una plantilla o harán que su diseñador cree una plantilla para ellos. Después de que hayan personalizado una plantilla para satisfacer las necesidades de su campaña, los clientes a menudo usan la misma plantilla para cada campaña similar que ejecutan.
Las pruebas A / B son una característica fundamental de Unbounce. Los usuarios pueden duplicar su página terminada, realizar un cambio en el diseño o copia de la nueva página, dividir el tráfico entre las dos páginas y usar los informes de Unbounce para determinar qué versión se convierte mejor. Las pruebas A / B permiten a los clientes mejorar constantemente sus páginas de destino y campañas de marketing.
Esta guía le ayudará a diseñar y construir una página de destino de alta conversión para la plataforma Unbounce.
Alentamos a los autores de plantillas a registrarse en la cuenta gratuita de Unbounce y al correo electrónico [email protected] para informarles que está diseñando plantillas para revender. Enviar un correo electrónico a nuestro equipo garantizará que su cuenta siga siendo gratuita si supera los 200 visitantes únicos que normalmente se permiten en el plan gratuito.
Analicemos rápidamente lo que cubriremos en este tutorial..
Comparemos la página de inicio de Webtrends (izquierda) con una de sus páginas de destino (derecha). La página de inicio está bellamente diseñada y le permite al visitante realizar una serie de tareas. Hay cinco conceptos presentados en el área de promoción principal (a través de una pancarta giratoria), cuatro mensajes complementarios debajo de eso y un total de veintiocho puntos de interacción.
Sin embargo, las campañas de marketing deben estar enfocadas en el láser, llevando a los usuarios a una sola acción. Al diseñar una página de destino para ser utilizada en campañas de marketing, el concepto de Relación de atención necesita ser considerado La relación de atención (AR) se define como la proporción de elementos interactivos (enlaces / fugas) en la página, al número de objetivos de conversión de la campaña (que es uno). En esta página de inicio, la proporción de atención es 28: 1, lo que significa que hay veintisiete acciones que distraen y una acción deseada.
Compare la página de inicio con una de las páginas de destino de generación de leads (derecha). En la página de destino, solo hay una acción que realizar; los usuarios deben completar el formulario y hacer clic en el botón de CTA para completar la conversión. Esto produce una experiencia mucho más enfocada para los visitantes, manteniendo la proporción de atención en 1: 1.
Hay cinco elementos básicos que debe tener en cualquier página de destino, que se pueden desglosar en una lista más detallada de componentes básicos:
El siguiente diagrama representa un diseño de muestra. El orden y la ubicación de los 5 elementos serán determinados por la historia que desee contar a sus visitantes, y puede variar de este ejemplo. Pero es útil mirar esto como referencia a medida que caminamos a través de cada elemento.
Hay dos tipos principales de páginas de destino: generación de leads (generación de leads) y click-through.
Las páginas de generación de leads se utilizan para capturar datos de usuario, como un nombre y una dirección de correo electrónico. El único propósito de la página es recopilar información que permitirá una mayor comunicación con el prospecto en otro momento. Una página de generación principal contendrá un formulario junto con una descripción de lo que el visitante obtendrá a cambio de enviar sus datos personales..
Flujo de generación de plomo Las páginas de destino de clics tienen como objetivo persuadir al visitante para que haga clic en otra página.
Normalmente utilizados en los embudos de comercio electrónico, pueden ofrecer detalles sobre un producto o servicio para "calentar" a un visitante y acercarlo a tomar una decisión de compra. Cuando el prospecto haga clic en la página siguiente, estará preparado con toda la información que requiera y será mucho más probable que compre.
En Unbounce utilizamos un sistema de cuadrícula estándar que utiliza 12 columnas, lo que hace un contenedor de 940px. El siguiente ejemplo desglosa las combinaciones de columnas disponibles. Le recomendamos que utilice la cuadrícula Unbounce para obtener los mejores resultados de diseño de la página de destino..
Unbounce ofrece un conjunto estándar de tipos de letra dentro de su creador de páginas de destino, así como un conjunto de fuentes web de Google. Le recomendamos que utilice los siguientes tipos de letra al diseñar para Unbounce.
A continuación se muestra una lista de las fuentes web de Google disponibles en Unbounce. Por favor, use / descargue solo las siguientes fuentes de la biblioteca de fuentes web de Google..
A continuación se muestra una lista de las fuentes estándar disponibles en Unbounce.
Cada página de destino tiene un objetivo en mente; mover a los visitantes para que realicen una llamada a la acción, como completar un formulario o hacer clic en otra página. A continuación encontrará una selección de los tipos más comunes de páginas de destino..
Se muestran tanto diseños minimalistas simples como ejemplos completamente diseñados..
Aprovechar las tendencias populares de diseño web puede ayudar a diferenciar su página de destino de otras, pero la implementación puede ser difícil de codificar. Para permitir que los usuarios de Unbounce se aprovechen de algunas tendencias de diseño recientes y efectivas, hemos incorporado nuevas herramientas en el constructor de Unbounce. Ahora puede integrar funciones como el desplazamiento de paralaje en su página de destino con el clic de un botón sin tener que depender del código de terceros.
Has buscado en internet la imagen perfecta para tu página. Lo agrega a su sección y es más grande que el contenedor. Hay una solución fácil para esto en Unbounce.
Una vez que haya agregado la imagen a la sección de su página, simplemente seleccione Estirar para ajustar la sección de la página. Si desea que llene toda la página puede seleccionar Estirar para adaptarse a la página.
Para crear una imagen fija que permanezca en su lugar mientras los visitantes se desplazan hacia abajo en la página (paralaje), simplemente seleccione la casilla de verificación "Fondo fijo a medida que se desplaza". Un elemento de diseño que puede ser muy impactante en las páginas de destino, el desplazamiento de paralaje generalmente requiere un código personalizado. Unbounce le permite agregar esta función con el clic de un botón.
Nota: Esta función no se mostrará cuando los visitantes estén en la vista móvil.
Al usar la función de superposición de colores, podrá agregar tintes a sus imágenes de fondo que traen un color específico de su elección al primer plano..
Puede ajustar la transparencia de sus imágenes seleccionando la función Opacidad. Una superposición de color de 100 impregnará completamente tu fondo con el color elegido..
Para asegurarse de que su página aún se vea y funcione según lo previsto después de compartirla, evite usar lo siguiente:
La traducción de un diseño a una página de destino en la plataforma Unbounce debe ejecutarse de manera perfecta en píxeles. En el siguiente ejemplo, la página de destino está estructurada por secciones de página y columnas utilizando la cuadrícula Unbounce estándar. Exporte todos sus recursos de imagen en formato .png o .jpg antes de comenzar.
Al crear una página de destino a partir de un archivo de photoshop, recomendamos comenzar desde una "página en blanco" en la plataforma Unbounce.
Utilizando su archivo de Photoshop original como guía, establezca el ancho de la página en el panel de propiedades de la página. Asigna el color de fondo a la página de destino. Sube una imagen de fondo si es necesario. Establezca el color de texto predeterminado para que sea el color de texto más utilizado en su diseño. Asigna el color del enlace para completar las propiedades de tu página..
Ahora es el momento de estructurar la página de destino. Arrastra y suelta secciones de página en tu página. Normalmente, agregaría una sección de página para cada parte vertical claramente definida de su diseño. Por ejemplo, podría agregar secciones de página para: el encabezado, el área de contenido 1, el área de contenido 2, etc., el pie de página. Luego puede establecer la altura de cada sección según las medidas en su archivo de Photoshop. Una vez que se hayan configurado todas las secciones de la página, abra el menú de estructura de árbol a la izquierda y nombre cada sección como corresponda. Esto facilitará la modificación y organización de la página de destino..
Cada elemento nuevo que se crea dentro de la página de destino aparecerá en la estructura de árbol, así que asegúrese de nombrar cada elemento nuevo a medida que se agrega, para futuras referencias y fácil modificación..
Puede asignar un color de fondo o degradado a una sección de la página, o puede cargar una imagen para usarla como fondo. Las imágenes también pueden ser en mosaico. En el siguiente ejemplo, se cargó una textura de fondo para el área principal y otra para las tiras más oscuras arriba y abajo..
Las imágenes que ha cortado y exportado desde Photoshop ahora se pueden cargar y agregar a la página de destino. Arrastre y suelte imágenes con la herramienta de imagen en la barra de herramientas de la izquierda y colóquelas en la página de destino según su diseño de Photoshop
Una vez posicionado, recuerde nombrarlos en la estructura de árbol. Para colocar el video en su página de destino, use la herramienta de video de la barra de herramientas de la izquierda y pegue el código de inserción de YouTube / Vimeo en la ventana emergente. Cambie el tamaño y colóquelo de acuerdo con el tamaño deseado y la relación de aspecto..
Arrastre y suelte la herramienta de texto en la página. Coloque cada bloque de texto de acuerdo con su archivo de Photoshop e inserte su copia utilizando el editor de texto a continuación. Puede ajustar su copia, fuente, tamaño, altura de línea y color para que coincida con su archivo de Photoshop.
Puede usar cuadros como contenedores para elementos como formularios, imágenes o texto. Modifique el trazo, el color y el radio de la esquina para obtener el resultado visual deseado, e incluso gire los cuadros en círculos si es necesario.
Arrastre y suelte el elemento de formulario en la página de destino. Aparecerá la ventana de superposición del creador de formularios. Elige campos prefabricados o crea los tuyos. Cuando utilice el campo de correo electrónico prefabricado, active la opción "Validar como dirección de correo electrónico". Una vez completado, haga clic para seleccionar el formulario y estilizar ajustando el espaciado, las fuentes, los colores, el ancho y la altura en el panel de propiedades de la derecha.
Estilice los botones por color, degradado o agregando una imagen personalizada. También se pueden establecer estados de reinversión. Edite el texto del botón y modifique la configuración de la fuente para que coincida con su diseño.
Si tiene un formulario en su página, se activará una página de confirmación cuando se complete el formulario. Puede acceder a la pestaña de la página de confirmación en la esquina superior izquierda de su página.
Modifique el diseño de la página de confirmación para que coincida con el diseño de su página de destino. Esto asegurará a los usuarios que han seguido la ruta correcta y brindarán una experiencia perfecta desde el aterrizaje hasta la conversión posterior.
Cada página de destino necesita un objetivo de conversión. Puede configurarlo haciendo clic en la pestaña "Objetivo de conversión" en el panel de propiedades. Si tiene un formulario, debe configurarse como "Envío de formulario".
Una vez que todos los elementos de la página de destino estén en la página, simplemente arrastre para reposicionar los elementos para que coincidan con su archivo de Photoshop y crear el diseño final. Utilice el modo de vista previa para hacer una revisión final de su página de destino.
Mobile Responsive in Unbounce le permite servir una versión móvil o de escritorio de su página automáticamente a los visitantes, según el tamaño de su navegador, sin utilizar una redirección. Cuando Mobile Responsive está configurado y habilitado en una página, cualquier visitante que use un dispositivo móvil verá la vista móvil de su página, mientras que cualquier persona que use un dispositivo de escritorio recibirá la vista de escritorio..
Unbounce establece el "punto de interrupción" para sus páginas de respuesta móvil en 600px. Esto significa que cualquier ventana del navegador con una ventana gráfica de 600px o menos recibirá la vista móvil de la página. Cualquier navegador con una vista superior a 600px verá la versión de escritorio de la página..
Nota: las pantallas de retina, como el iPhone, son técnicamente más grandes que 600px debido a su alta resolución, pero la ventana gráfica se comporta como una ventana de navegador más pequeña, por lo que los teléfonos con retina mostrarán la versión móvil de la página
Hay algunas cosas que necesitará para personalizar su página de respuesta móvil y comenzar a servirla a sus visitantes móviles:
Haga clic en los botones en la parte inferior derecha de la ventana del Generador de páginas para alternar entre la vista de Escritorio y Móvil.
Puede cambiar el tamaño del texto de su versión de escritorio para que se ajuste a su versión móvil. Seleccione el cuadro de texto y use la barra de escala en la esquina superior derecha de la página de propiedades. El cuadro de texto también se puede cambiar de tamaño por separado en equipos de escritorio y móviles.
Nota: Cualquier ajuste en la fuente, el tamaño de la fuente, el formato o el alto de línea realizados desde el Editor de texto (en lugar de la barra de escala) afectará a ambas vistas.
Los formularios y los botones serán los mismos en su vista móvil y de escritorio. Puede ocultar un botón en una vista y mostrar uno diferente en la otra vista. Su formulario debe ser consistente en ambas versiones, aunque.
Si tiene objetos que desea ocultar, ya sea en la vista móvil o de escritorio, haga clic en el objeto, luego haga clic en el icono Visibilidad en el Panel de propiedades.
También puede controlar la visibilidad haciendo clic en Contenido de la página en la parte inferior izquierda del Generador de páginas.
Cuando seleccione objetos dentro del Generador de páginas, los verá resaltados en el Panel de contenido de la página. Verás un ojo cuando el elemento sea visible o un círculo sólido si no lo es. Haga clic para alternar entre los dos.
Nota: Si opta por ocultar una sección de cuadro o página con objetos anidados, todos los elementos anidados se ocultarán.
De forma predeterminada, si algún elemento se mueve entre las secciones de la página, se moverá en ambas vistas. Para mover elementos fuera de una sección de la página sin cambiar realmente las secciones de la página, mantenga presionada la tecla Comando (mac) o la tecla Control (Windows) mientras arrastra un elemento. Verá un recordatorio de esto cada vez que mueva un elemento de una sección de página a otra sin mantener presionado Comando o Control.
Si varios elementos están anidados en un cuadro, mover esos elementos en una vista también moverá todos los elementos en la otra vista. También puede usar Comando / Control + clic para separar un elemento en una vista y moverlo independientemente de la otra vista.
Propina: recuerde que también puede presionar Mayús + clic para mover más de un elemento a la vez
Advertencias de fuera de límites: verás una advertencia si alguno de tus objetos está fuera de los límites de tu página de destino. Simplemente mueva el objeto dentro de los límites de su página, u ocúltelo, para eliminar la advertencia. También puede desactivar las advertencias fuera de los límites mediante la casilla de verificación en la parte superior derecha del Generador de páginas..
Cuando haya terminado de diseñar su página móvil, vaya al Panel de propiedades a la derecha y marque Mostrar versión móvil a los visitantes para habilitar la vista móvil. Luego guarda y publica (o vuelve a publicar) tu página.
Nota: La publicación de su página le permite proporcionar un enlace de vista previa en vivo en los mercados de plantillas.
Una plantilla de página de destino debe ser personalizable. El usuario final debe poder intercambiar fácilmente las imágenes de los héroes o los fondos fotográficos. Para garantizar que la calidad de su página de destino permanezca intacta y que su página sea aprobada por ThemeForest, siga estas pautas:
Una vez que haya creado una plantilla de página de destino hermosa y fácil de personalizar, deberá descargarla antes de poder compartirla (o venderla) al mundo. Para descargar una página, acceda a la descripción general de la página (la sección que enumera todas las variantes y estadísticas de su página), busque el icono de engranaje / piñón en la parte superior derecha y haga clic en "Descargar página".
Aparecerá una ventana de diálogo que le enviará un correo electrónico cuando el archivo esté listo para descargar. El archivo tendrá una extensión ".unbounce". Una vez que haya descargado su archivo, no dude en renombrarlo según sea necesario, pero deje intacta la extensión ".unbounce".
¿Quieres empaquetar múltiples diseños de la misma plantilla? Evite el uso de variantes de página para empaquetar varios diseños juntos.
En su lugar, cree cada diseño como una página separada y descargue cada diseño por separado. Esto asegurará
Accentsconagua