Cómo Diseñar una Página de Aterrizaje Genial Rápidamente Utilizando Plantillas

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Una página de aterrizaje es una útil herramienta de marketing que hace más fácil promover un determinado producto o servicio y aumentar las posibilidades de los visitantes registrarse o comprarlo. Pueden ser utilizados para promover los imanes sin plomo así como ofertas pagadas como servicios, cursos y productos digitales o físicos.

Una manera fácil de crear una página de aterrizaje, incluso si usted no tiene ninguna experiencia en diseño, es usar una plantilla de página de aterrizaje de HTML. En este post, analizaremos por qué debe considerar el uso de HTML plantillas de página, lo que hace una gran página, de aterrizaje y guiarte por el proceso de cómo diseñar una página utilizando una plantilla.

¿Por qué Utilizar HTML Plantillas de Página de Aterrizaje?

Si bien hay varias maneras de crear páginas de aterrizaje para sus campañas de marketing, una plantilla de página de aterrizaje de HTML es la manera más fácil. Aquí hay varias razones por qué deberías considerar el utilizar un HTML plantilla de página como las de aterrizaje de Envato Elements.

1. Facilidad de Uso

Plantillas de página de aterrizaje de HTML son fáciles de usar ya que no necesitan aprender a código para usarlos. Todos los elementos ya están en su lugar para todo lo que tienes que hacer es editar el contenido. No hay ninguna instalación complicada proceso como todo tienes que hacer es subirlas al servidor de hosting.

2. Más Rápido Cargando

Al diseñar un sitio web o una página de aterrizaje, te beneficiarás de carga más veces que si diseñaste tu sitio web con un sistema de gestión de contenidos. Esto es porque las plantillas de HTML tienen una estructura más simple y menos archivos general de temas y plantillas de sistemas de gestión de contenidos.

3. No Requerida de Mantenimiento

Por último, plantillas HTML no requieren mantener un ojo hacia fuera para las actualizaciones. Una vez creada la página de inicio, puede fácilmente crear una copia de seguridad de la misma una vez y volver a subirlo si es necesario. A diferencia de sistemas de gestión de contenidos donde tienes continuamente copia de seguridad de su sitio e instalar actualizaciones de software periódicas, plantillas HTML consisten en archivos estáticos que sólo es necesario actualizar si decides cambiar el contenido o el estilo.

Elementos Clave de una Página de Aterrizaje Genial

Ahora que hemos cubierto las ventajas de HTML plantillas de página de aterrizaje, repasemos los elementos clave de una gran página. Esto le ayudará a editar la plantilla a sus necesidades y estructurar de una manera lógica.

1. Titular y Subheadline

El primer elemento en tu página de aterrizaje es su titular y la copia. El titular debe despertar interés en cualquier persona que visita tu página de aterrizaje. El subheadline, por el contrario, debe alentarlos a continuar el desplazamiento hacia abajo y leer el resto de su copia, así que haga clic en el botón de llamada a la acción y la transición de los visitantes en plomos, clientes o clientes.

2. Dolor Puntos

Su copia e idealmente, el primer párrafo deben de referencia o identificar los puntos de dolor de su visitante. Al hacerlo, usted está diciéndoles que usted sabe cuál es su problema, que les hace sentir comprendido y les permite relacionarse con usted.

3. Beneficios de la Oferta

Tu página de inicio del HTML también debe abordar los beneficios de tu oferta. Los visitantes no se preocupan por las características de su producto, más bien les interesa más cómo lo que ofreces pueden ayudar a hacer su vida mejor. Centrándose en los beneficios a posicionar su producto o servicio como la solución perfecta para su problema, que los hace más propensos a comprar.

4. Confiar en las Señales

Tu página de aterrizaje también debe abordar las objeciones del visitante, que les impiden convertir en compradores o suscriptores. Además de su copia, pueden abordar las objeciones usando señales de confianza. Estos pueden incluir:

testimonios de clientes o suscriptores existentes
insignias de confianza como VeriSign, Norton, pago seguro y más
garantía de devolución
Sección de preguntas frecuentes que responde a preguntas adicionales
logos de sitios web que usted o su producto se han ofrecido

5. Llamada a Acción

El último elemento en tu página debe ser una llamada a la acción que indica que los visitantes lo que es el siguiente paso. Idealmente, su llamada a la acción será muy visible en contraste de color y se pueden incluir varias veces en la página para dar a los visitantes varias oportunidades para convertir.

Cómo Configurar una Plantilla de Página de Aterrizaje

Configuración de la plantilla de página de aterrizaje no es difícil, pero antes de profundizar en eso vale la pena tomar un momento para familiarizarse con la estructura de plantillas HTML y cómo funcionan. Aquí le damos algunos pasos a seguir para actualizar su conocimiento de diseño de página de aterrizaje:

Cómo Funcionan los Templates HTML

Plantillas HTML consisten en generalmente dos tipos de archivos:

Archivos HTML
Archivos CSS.

Los archivos HTML contienen la estructura básica de todos los elementos de la página. Son como el marco de su casa y es estos archivos que pasarás la mayor parte de su tiempo a trabajar con. Esos archivos son donde podrá cambiar el contenido y agregar o quitar secciones.

Los archivos CSS de control de la apariencia de tu página de aterrizaje. Son como la pintura que pones en las paredes de su casa. Utilizar los archivos CSS, a modificar los colores y las fuentes que utiliza la plantilla.

En algunos casos la plantilla también contiene archivos de JavaScript, que se utilizan generalmente para validación de formularios o para agregar efectos de animación a la plantilla.

Con eso fuera del camino, vamos a echar un vistazo a cómo se estructura una típica plantilla HTML. Para los propósitos de este tutorial va a utilizar la plantilla de página de aterrizaje HTML punto de Envato Elements, por lo que sus archivos de plantilla pueden no ser enteramente el mismo. En la mayoría de los casos, usted tendrá los archivos CSS, imágenes y carpetas de JavaScript. También se pueden ver más o menos archivos HTML, y en algunos casos, encontrarás una carpeta PHP que añade funcionalidades extra a la plantilla.

Aquí es cómo se organiza la plantilla de punto:

CSS. Esta carpeta contiene todas las hojas de estilo que utiliza la plantilla.
Imágenes. En esta carpeta, encontrará el marcador de posición imágenes usadas en la plantilla
JavaScript. En esta carpeta encontrarás todos los archivos JavaScript que controlan varias animaciones y efectos de transición.
PHP. Contiene el código PHP necesario para el formulario de contacto
Video. Esto contiene el video de muestra utilizado para el diseño de la versión parcial de programa que utiliza el vídeo de fondo.

Aparte de las carpetas anteriores, la plantilla de punto tiene varios ficheros HTML, que representan variaciones de diseño diferente.

Cómo Trabajar con HTML Plantilla de Página de Aterrizaje

La forma más sencilla de empezar a editar y personalizar la plantilla de página de aterrizaje es ver donde se encuentra el código que necesita editar. Para ello, haga doble clic en el archivo index1.html o cualquier archivo HTML en la carpeta de la plantilla que se llama index.html. Este archivo generalmente significa la Página principal y eso es lo que nos va ser editar primero.

Una vez que haga doble clic en el archivo, lo abren en el navegador por defecto. Puede también haga clic derecho sobre el archivo y seleccione Abrir Con y luego elegir su navegador de Internet predeterminado.

Vamos a ver donde la cabecera se encuentra en el archivo HTML por lo que inmediatamente podemos editarlo. Haga clic derecho en el encabezado que dice "Lugar es la mejor manera de presentar su aplicación para el mundo!" y seleccione Inspeccionar.

Un panel de carga en la parte inferior. Este panel es el panel de Herramientas de Desarrollador de Chrome y consta de dos partes: la parte izquierda que muestra el código HTML y la derecha que muestra el código CSS o los estilos asociados con el elemento que estamos inspeccionando:

El título que estamos inspeccionando se anida entre <h2> etiquetas. Ahora, tenemos que encontrar esta parte del código en la plantilla y editarla.

Para ello, volver a la carpeta de plantilla y haga clic derecho en el index1.html otra vez. Elija Abrir Con y, esta vez Seleccione un editor de texto como Bloc de notas.

La plantilla se abrirá y podrás ver todo el código que se utiliza para crear tu landing page. Desplácese hacia abajo y encontrar la misma pieza de código que usted vio cuando estaban inspeccionando el título en el navegador.

En mi caso, esta línea de código está situada en la línea 106.

Ahora, puede empezar a editar el contenido. Seleccione el texto entre la <h2> etiquetas y eliminarlo. A continuación, escriba su propio texto:

Ahora, vaya a su navegador, haga clic en el botón que dice Compra Ahora y seleccione Inspeccionar. Una vez que encuentras el trozo de código que contiene el texto del botón, vamos hacia el editor de texto, localizar la pieza de código y modificar el texto del botón.

Usted puede simplemente Repita estos pasos una y otra vez hasta que has sustituido todo el contenido de la versión parcial de programa con su propio.

Cuando haya terminado de hacer cambios, haga clic sobre Guardar y luego actualizar la ficha de plantilla en la ventana del navegador.

Ahora, echemos un vistazo a cómo reemplazar una imagen con su propio. Luego puede volver a utilizar los mismos pasos para volver a colocar todas las imágenes utilizadas en la plantilla:

En primer lugar, recopilar todas tus imágenes y colocarlas en la carpeta de imágenes. Entonces, cabeza a su navegador, haga clic en la imagen en el área de encabezado y haga clic en Inspeccionar. Como se puede ver en la captura de pantalla abajo, notarás que la imagen de fondo para el encabezado se establece a través del archivo CSS. La pestaña Inspector incluso te dice que archivo CSS debe editar:

Para editarlo, vaya a la carpeta de la plantilla, abra la carpeta CSS y luego abrir el archivo CSS correcto. En este ejemplo, tengo que editar los blue.css de paleta de color. Necesito editar línea 66 en el archivo. Para ello, he borrado todo después /images/ y sustituye el nombre de la imagen con mi propia imagen. Guarde el archivo CSS, luego actualizar la ventana del navegador y verás la nueva imagen de fondo:

Cómo dar Estilo a la Plantilla

Cuando haya terminado modificar el contenido y reemplazar la información de la versión parcial de programa, usted necesita estilo de la plantilla para que coincida con su marca. La plantilla de punto viene con varios esquemas de color hecha de antemano, que se guardan como archivos independientes de la CSS en la carpeta de colores que se encuentra en la carpeta CSS. Esto hace fácil de ajustar todos los colores a la vez sin editar los archivos CSS.

Simplemente puede cambiar el aspecto de la plantilla mediante la sustitución de la hoja de estilos en la cabeza del documento con el nombre de tu hoja de estilo preferido. Desea abrir el archivo index1.html en el editor de texto y localizar la línea de código que lee:

<link href="css/colors/color_palette_blue.css" rel="stylesheet" media="screen">

Cambiar el nombre a su esquema de colores preferido. En este ejemplo, he reemplazado con

<link href="css/colors/color_palette_red.css" rel="stylesheet" media="screen">

Si ninguno de los temas de color es a tu gusto, puede editar el archivo main.css y ajuste manual de las fuentes y los colores. Simplemente Revise el código en la ventana del explorador y mira el lado derecho de la pantalla para ver que estilos se utilizan. A continuación, busque la línea de código CSS y ajústelo. Por ejemplo, puede editar el color del botón en el archivo CSS introduciendo un código hexadecimal de tu color deseado así:

color de fondo: #65b5c1;

Cómo Cargar la Plantilla en el Servidor

Una vez que la plantilla es personalizada y estilo, es hora de subirlo al servidor de hosting. Su empresa de hosting debe ha proporcionado todos los datos necesarios que tienen su nombre de usuario FTP y su contraseña.

Comenzar con el lanzamiento de su cliente FTP como FileZilla, que es gratuito y multiplataforma. Utilice la barra de conexión rápida QuickConnect para ingresar su nombre de usuario FTP y su contraseña y haga clic en Conectar.

Busque la carpeta con su plantilla de página de aterrizaje de HTML en el lado izquierdo de la pantalla. Seleccione todos los archivos y carpetas en arrastrarlos sobre a la derecha de la pantalla y colocarlas en la carpeta public_html.

Espere a que el proceso de carga hasta el final y tu página de aterrizaje será directo.

Más Información sobre Diseño de Página de Aterrizaje

Si desea aprender más sobre diseño de página de aterrizaje, tenemos una serie de recursos útiles en Envato Tuts +. Aquí hay algunos tutoriales para empezar:

El siguiente artículo muestra algunas de nuestras mejores plantillas con diseños de página de aterrizaje grandes que puedes descargar inmediatamente:

Páginas de Aterrizaje

Mejor de 2018: 20+ Geniales Landing Pages para Inspiración de Diseño

Brenda Barron

Haz tu Página de Aterrizaje para Arriba y Corra Rápidamente Utilizando una Plantilla de HTML

Como se puede ver, levantarse tu página de inicio y ejecutar rápidamente es fácil con una plantilla HTML. Empezar a trabajar en el suyo visitando Envato Elements y encontrar la plantilla perfecta. También se pueden encontrar algunos diseños de página de aterrizaje geniales en ThemeForest. Seguir nuestro tutorial para configurarlo y lanzar su página de inicio para que puedas empezar a promover su oferta hoy.