Construyendo su Página de Aterrizaje con Instapage

En la primera parte de esta corta serie, cubrimos los fundamentos de lo que son las páginas de aterrizaje. En esta parte, seguiremos el proceso de construcción de una página de aterrizaje en Instapage.

Cómo Construir su Página

Los diseños que primero construimos dentro de Photoshop debería ser convertidos a una página de aterrizaje de pixeles perfectos. Todas las páginas están estructuradas siguiendo el sistema de guías 960 y usando secciones de páginas horizontales, lo cual se explica a continuación.

Comience con una Página en Blanco

Instapage ofrece a sus usuarios una variedad de plantillas para elegir. A pesar de que nos enfocaremos en plantillas de una industria específica para nuestros usuarios en general, comenzaremos con un cuadro en blanco.

No necesita usar otro programa para completar totalmente su plantilla en Instapage, sin embargo, puede convertir o importar otros temas diseñados anteriormente si así lo desea. CSS y el uso de JavaScript también tienen soporte en esta interfaz.

Añadiendo Elementos a la Página de Aterrizaje

Con Instapage puede comenzar añadiendo elementos a su página de aterrizaje haciendo clic sobre la opción ADD NEW (Añadir Nuevo) que esta en la barra de herramientas principal y luego seleccionar cual elemento añadir a la página.

Normalmente, añadir un elemento sobre una sección de la página claramente definida es ideal. Sin embargo, usted tiene toda la capacidad de estructurar su página como guste. También puede ajustar la altura de las secciones de la página de acuerdo a los elementos que ha añadido.

Dentro de la aplicación hay una información de herramienta para los nodos X/Y, la cual aparecerá siempre que mueva un elemento. Esto ayudará si está acostumbrado a diseñar por este método o si está convirtiendo desde otro tema. Las coordenadas están determinadas por el centro del elemento siendo movido relativamente hasta donde éste está desde la parte superior izquierda de la columna principal de la página.

La columna Principal de la página tiene definido una anchura estándar para la página de 960px.

Puede añadir los siguientes elementos a la construcción personalizada de su página de aterrizaje:

• Secciones de Página
• Encabezados
• Texto (Párrafos).
• Imagenes
• Vídeos
• Botones CTA (Llamado a la Acción).
• Formularios
• Mapas
• Botones de Difusión en las Redes Sociales
• Enlaces HTML
• Formas

Todos son añadidos haciendo clic sobre el elemento que quiere añadir y luego colocarlo o editarlo sobre su página. Hablaremos acerca de añadir elementos con más detalles a continuación.

Secciones de Página y Cajas

Las secciones de páginas son utilizadas para separar diferentes áreas de contenido en su página de aterrizaje. Las secciones siempre se extiende al ancho completo de la página y no se puede cambiar el tamaño horizontalmente. Las secciones de página pueden reubicarse verticalmente en cualquier parte de la página (como se demuestra en el vídeo).

Puede agrupar contenido tanto con las secciones como con las cajas en dos maneras. Si ya tiene contenido en su página entonces puede añadir una caja (seleccionandola desde las formas de elementos) y luego arrastrar su contenido dentro de esa caja. O, puede crear, primero, la caja y luego arrastrar y colocar los objetos directamente dentro de la caja en la cual se acomodarán.

Una vez que los objetos estén acomodados, entonces usted puede moverlos por su página como si fuera un mismo objeto. Seleccionar la caja y seguir desde ahí.

La figura Caja es utilizada, por lo general, para crear un cuadro estándar o un rectángulo que puede usar para resaltar formularios, imágenes, textos y más. No debería extenderse al ancho completo de la página.

Cuando edite las secciones de páginas o las figuras de cajas, debería hacerlo con los siguientes atributos:

• Color de Fondo: Hacer clic sobre está opción para que pueda elegir el color primario para al fondo de la figura.
• Color del Borde: Hacer clic sobre está opción para que elija un color para el borde que rodea la caja.
• Grosor del Borde: Aquí, introduzca un número para determinar el grosor del borde.
• Estilo del Borde: Solido, discontinuo, punteado, doble.
• Imagen de Fondo: Puede ajustar una imagen como un diseño según el fondo de su figura.
• Esquinas Redondeadas: Haga clic sobre las flechas pequeñas en cualquiera de las esquinas, y luego mueva hacia arriba o hacia abajo para ajustar cuánta redondez le gustaría.
• Transparencia: Puede usar este atributo para mejorar la apariencia de sus páginas, por ejemplo, puede revelar el fondo de la página que está debajo.

Añadir Texto a su Página de Aterrizaje

Puede añadir un título y un párrafo de texto al hacer clic sobre las respectivas opciones de la barra de herramientas. Cuando usted hace clic sobre el botón de párrafo o título, verá aparecer un párrafo en la página, entonces puede editarlo de acuerdo a sus características.

El editor de texto le permite modificar el color, el tamaño de fuente, la alineación y puede añadir listas numeradas o crear enlaces.

Añadir imágenes y vídeos.

Después de hacer clic sobre la opción añadir una nuevo elemento de imagen, se le da la opción de escoger una de las imágenes que ya existen en una de las carpetas o puede subir una. Cualquier imagen que suba será guardada en nuestros servidores y puede usarlas en ese momento o posteriormente sin tener que volver a subirlas.

Puede reemplazar imágenes en cualquier momento, solo tiene que seleccionar la imagen por medio de un clic, luego ir a la opción de menú Edit > y escoger la opción; reemplazar.

Use las imágenes para aumentar las presentación de su producto o servicio (las imágenes valen más que mil palabras), pero no se deje llevar demasiado por el uso de las imágenes. Demasiados elementos visuales puede distraer a los usuarios del objetivo de conversión.

Para aprender más sobre cómo usar las imágenes en una página de aterrizaje para que pueda mejorar la conversión, entonces de un vistazo a Use Imágenes en Su Página de Aterrizaje para Impulsar sus Conversiones.

Puede subir un vídeo a su página de aterrizaje al seleccionar la opción de vídeo y enlazarlo hacia su interfaz en YouTube o Vimeo. Puede cambiar el tamaño y la posición del vídeo de acuerdo a sus necesidades. Luego elija ya sea si le gustaría que el vídeo se reproduzca automáticamente o desea ocultar la barra de progreso.

Añadiendo Formularios.

Seleccione ADD NEW (Añadir Nuevo) formulario desde la barra de herramientas principal y luego haga clic sobre FORMS (Formularios). Esta opción colocará un formulario encima de su página de aterrizaje. Puede arrastrarlo y luego soltarlo y cambiar el tamaño de su formulario para adaptarlo de acuerdo a las necesidades específicas de su diseño, también, puede personalizar los estilos de; los botones, el formulario, el color de la fuente, todo esto puede hacer a través de hacer clic sobre el botón EDIT (Editar) después que selecciono el formulario.

Asimismo, puede establecer casillas pre-elaboradas o crear usted mismo sus menús desplegables. Los formularios puede ser enlazados a nuestro servicios integrado de correo electrónico como MailChimp o Aweber o puede trabajar por separado. También ofrecemos una opción de redirigir (tanto la integración y opción de redirigir el formulario no debería ser utilizado en su página).

Añadiendo Botones

Para añadir un botón a su página, basta con hacer clic sobre ADD NEW (Añadir Nuevo) desde la barra de herramientas principal. Esto colocará un botón en su página de aterrizaje. Si hace clic sobre el botón, entonces será capaz de cambiar el tamaño, cambiar el color o la fuente, y arrastrarlo y soltarlo la función dónde usted lo quiera.

Después de hacer clic sobre el botón, arriba verá un icono de enlace. Esto es una función denominada enlace de evento. Esto abrirá un administrador de enlaces que le permitirá añadir un enlace de salida a su botón, una ventana desplegable (Una caja de luz) a su botón, un archivo de descarga, o un enlace a otra página de aterrizaje de Instapage.

Añadiendo Ventanas Desplegables

Muchas páginas de aterrizaje usan dos niveles para el proceso de registro donde un visitante hace clic sobre un botón que abre una ventana. Dentro de la ventana esta el formulario para generar prospectos. Debido a esto y porque las ventanas emergentes pueden ser utilizadas para revelar más información, hemos hecho realmente fácil añadir ventanas, que aparecen automáticamente, a los botones, imágenes y enlaces de texto.

Solo haga clic sobre uno de estos tres tipos de elementos > clic en el botón de enlace > y luego seleccione la opción pop up(o ventana emergente).

Como con cualquier otro elemento, usted puede cambiar el tamaño. Cualquier tipo de contenido se puede añadir dentro de éstas ventanas.

Implementando la Versión para teléfonos Móviles (Requerida).

A pesar de que Instapage ofrece una total personalización de arrastrar y soltar, de momento no ofrecemos soporte para el diseño flexible. Debido a esto, usted debe reconstruir su página de escritorio en una vista para dispositivos móviles en una pantalla con un tamaño más pequeño que tenga sentido dentro del contexto de un teléfono portátil.

Puede mover elementos entre su versión de escritorio y la de teléfono a través de copiar y pegar.

Usuarios Mac:

• ⌘Command-C = Copiar
• ⌘Command-V = Pegar

Usuarios PC:

• Ctrl-C = Copiar
• Ctrl-P = Pegar

Vista previa de su Página

Para ver el diseño final de su propia plantilla de Instapage haga clic en la opción Preview (Vista Previa) y revise su plantilla antes de hacer clic en Publish (publicar).

Su listado

• Revise las Imágenes y el Diseño
• Revise la Copia de texto y las Fuentes
• Pruebe los enlaces
• Prueba los Formularios y los Botones
• Publique la Página
• Cuando éste creando su documento de ayuda para la plantilla, por favor incluya éste enlace para las instrucciones de uso. Si ha incluido cualquier código de JavaScript o CSS en su plantilla, entonces debería incluir instrucciones detalladas acerca de cómo usar o actualizar la secuencia de comandos y la funcionalidad.

Nota: Al publicar su página le permite proporcionar un enlace a la vista previa en vivo en el mercado de plantillas.

Requerimientos de Aprobación de ThemeForest

Todas las plantillas de páginas de aterrizaje deber ser ajustables. Los usuarios de Instapage debería ser capaces de intercambiar fácilmente cualquier elemento que deseen.

Para asegurarse que las plantillas no pierden su calidad cuando el usuario final hace cambios, es importante que su página pase la aprobación de ThemeForest. Por favor, tengan en mente las siguientes normas:

• Las imágenes debería intercambiarse con facilidad
• Las secciones de página deberían ser usadas adecuadamente para segmentar su página.
• El código JavaScript necesita comenzar con un comentario que incluya la información de contacto del autor y instrucciones de soporte.
• No debería haber elementos dañados.
• Los botones de los formularios necesitan estar adjuntados firmemente a sus respectivos formularios.
• Su página debería tener activada un versión para dispositivos móviles.

Descargando su Plantilla

Para usar, compartir o vender su plantilla final, necesitará descargarla. Para descargarla, haga clic sobre el botón more options (más opciones) que se encuentra en su panel de control y seleccione Descargar Página.

El archivo tendrá una extensión “.instapage”. Una vez que haya descargado su archivo, no dude en renombrarlo según sea necesario, pero deje la extensión “.instapage” intacta.

Empacando Varios Diseños

¿Quiere empaca varios diseños de la misma plantilla? Por favor evítese usar varias páginas para empacar varios diseños a la vez.

En vez de eso, cree cada diseño como una página separada y descarga cada página separadamente. Esto asegurará que tiene un enlace funcional de vista previa para cada composición y reducirá la confusión de los descargadores, como variantes usadas especialmente para pruebas A/B

En Conclusión.

Ojala esto le haya dado una introducción a través de Instapage y la autoría de plantillas en Instapage para ventas o comercializarlas en mercados como ThemeForest. Hay mucho más por aprender, sin embargo, si tiene alguna pregunta, por favor, no dude en dejar una en la sección de comentarios.

Además, revise lo que está ocurriendo ahora mismo con la competencia Las Plantillas de Instapage Más Buscadas por Envato.