Unlimited PowerPoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Mobile App

Cómo Crear una Aplicación Móvil de Pagina de Aterrizaje con Plantillas

by
Difficulty:BeginnerLength:MediumLanguages:

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

Como está preparándose lanzar su aplicación y soltarlo en los mercados de aplicación, es necesario comenzar la planificación para la promoción y comercialización de su aplicación. Cuando llegue el momento para promover su aplicación, investigue utilizando una página de inicio de la aplicación. Páginas de inicio de la aplicación son mejores porque se centran en conseguir visitantes para tomar una acción específica de marketing que una página web regular.

Puede personalizar su página de inicio basada en sus necesidades — descargas de unidad a través de la aplicación almacenar enlaces o animar a dejar comentarios signo hasta que se le notifique cuando se inicia la aplicación y más.

Páginas de inicio de la aplicación son rápidos y fáciles de crear con la ayuda de una plantilla. Otro beneficio del uso de plantillas de página de inicio de la aplicación es que usted puede concentrarse en terminar tu aplicación y promoverlo en lugar de diseñar una pagina de aterrrizaje.

En este post, vamos a explicar qué buscar en una aplicación de plantilla de página, las características que tienes que incluir en tu página de aterrizaje, de desembarque y le mostraremos cómo crear una página de aterrizaje desde una plantilla.

Qué Buscar en una Aplicación de Plantilla de Página de Aterrizaje

No hay ninguna escasez de plantillas de página de aterrizaje de aplicación muy bien diseñada, que significa que a la hora de elegir la plantilla de página de aterrizaje adecuado para su aplicación podría pasar mucho tiempo pasando por todas las opciones. Aquí están las características más importantes para buscar en una plantilla de página de inicio de la aplicación:

  • Diseño sensible y atractivo. Tener un sitio web atractivo y sensible permite a sus visitantes a disfrutar de su sitio y ver todo lo que no ofrece importa qué dispositivo están usando su aplicación.
  • Posibilidad de personalizar la plantilla con los colores de la marca. Esto hará fácil mantener la coherencia de la marca.
  • Posibilidad de escaparate usuario testimonios. Testimonios ayudarán a construir prueba social, que va un largo camino hacia el establecimiento de confianza y convertir a visitantes en suscriptores.
  • Documentación de la plantilla. Documentación cuidadosa le ayudará rápidamente encontrar respuestas acerca de la plantilla de página de aterrizaje aplicación móvil y guiará en el proceso de instalación.
  • Plantilla que está orientada para su nicho de aplicación. O busque una plantilla versátil que puede usarse en diferentes nichos.

¿Qué Hace una Gran Aplicación de Página de Inicio?

Ahora que hemos cubierto qué características debe buscar en una plantilla de página de inicio de la aplicación, hay algunos elementos que usted necesita tener en su sitio para asegurar la mejor tasa de conversión posible.

1. Obligar a Copia

Uno de los elementos más importantes de su página de aterrizaje es la copia. Su titular, subheadline y el resto de la copia de cuerpo deben compartir los beneficios de usar la aplicación para convencer a los visitantes deben comprar y descargar. Utilice el titular a pique la curiosidad, les anima a seguir leyendo con el subheadline y luego usar el resto de la copia para sellar el acuerdo.

2. Aplicación de Imágenes

No escatimes hacia fuera en las capturas de pantalla de su aplicación sólo porque es un producto digital. Mostrar el icono que te aparece en la pantalla principal y utilizar smartphone maquetas para mostrar la apariencia de la interfaz de la aplicación. Esto le dará a los usuarios un sentido de cómo puede utilizar su aplicación.

3. Opiniones de Usuarios

Como se mencionó anteriormente, opiniones le ayudará a construir la confianza con sus visitantes que ayuda a las tasas de conversión. Una vez que los visitantes ver que otros usuarios estaban contentos con su aplicación, a estar inclinados más a descargarlo y probarlo por sí mismos.

4. Botón Call-to-Action

Por último, desea asegurarse de que su página de inicio de la aplicación tiene múltiples llamadas a la acción que los visitantes al mercado de la aplicación donde se puede descargar la aplicación o regístrese para ser notificado cuando se inicia la aplicación.

Cómo Configurar la Aplicación de Plantilla de Página de Aterrizaje

Antes de configurar la plantilla de página de aterrizaje app, usted necesita entender cómo funcionan las plantillas HTML. Una vez que entienda la estructura de una plantilla HTML, es fácil de configurar.

Estructura de la Plantilla de HTML

Plantillas HTML consisten en archivos HTML, CSS y JavaScript así como imágenes que agregar a tu sitio. Los archivos HTML de control qué elementos están presentes en tu página de aterrizaje. Esto incluye encabezados, párrafos, testimonios, llamadas a la acción, botones y más. Los archivos CSS son responsables de la apariencia de la plantilla. Ellos controlan los colores, fuentes, espaciado y otros elementos visuales.

Los archivos JavaScript añadir funcionalidad adicional y generalmente control animaciones, transiciones y validación de formularios.

En algunos casos, la plantilla puede incluir PHP archivos que se utilizan para formularios de contacto o boletín Regístrate en formas.

La plantilla va a venir una carpeta que va contener todos los archivos HTML y los archivos CSS y JavaScript, que en sus respectivas subcarpetas. Veamos cómo se estructura una plantilla HTML de ejemplo.

A los efectos de este tutorial, va ser utilizando la Plantilla de Focus. La plantilla de Focus es una plantilla de página de aterrizaje aplicación móvil multipropósito que puede utilizarse para mostrar varias aplicaciones. También es sensible, SEO-friendly y viene con la habilidad de usar fondos de vídeo.

Focus mobile app landing page templateFocus mobile app landing page templateFocus mobile app landing page template

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

  • CSS. Esta carpeta contiene todas las hojas de estilo que utiliza la plantilla.
  • Fuentes. En esta carpeta encontrarás las fuentes que se utilizaron en la plantilla que deben cargarse en el servidor
  • Imágenes. La carpeta de imágenes tiene todas las imágenes de marcador de posición y se puede utilizar para agregar sus imágenes de la plantilla
  • js. Esto contiene el código JavaScript que se necesita para la plantilla
  • php. Esto contiene el código PHP para los formularios de contacto y Boletín
  • Index.html. La Página principal de la plantilla de página de aterrizaje de aplicación móvil.

Como se puede ver en la captura de pantalla siguiente, la plantilla de enfoque también tiene varias versiones diferentes que se encuentran en sus propias carpetas. Cada una de esas carpetas sigue la misma estructura que el anterior.

Focus mobile app landing page template HTML structureFocus mobile app landing page template HTML structureFocus mobile app landing page template HTML structure

1. Crear tu Aplicación de Página de Aterrizaje con una Plantilla

Ahora que usted comprende cómo se estructuran las plantillas HTML, vamos a ir a través de los pasos de configuración de tu página con una plantilla de inicio de la aplicación.

1. para empezar, usted desea abrir el archivo HTML en su navegador. Para ello, haga clic derecho sobre el archivo index.html y seleccione Abrir Con y luego elegir el navegador por defecto. Luego, haga clic derecho en el archivo de nuevo y esta vez elija Abrir Con y elegir un editor de texto como Bloc de notas, Sublime Text o TextEdit. Hacerlo le permitirá ver la plantilla y el código que necesitas para editar:

Inspecting HTML templateInspecting HTML templateInspecting HTML template

2. una vez que tenga el archivo abierto en su navegador, usted necesita inspeccionar el elemento que desea editar. Para ello, haga clic en el título grande y seleccione inspeccione. Notaras un panel aparece en la parte inferior de la pantalla. El panel le permite ver el código HTML que compone su aplicación móvil, plantilla de página, así como la plantilla CSS que controla el aspecto de los elementos en la página de aterrizaje.

Editing HTML templateEditing HTML templateEditing HTML template

Como se puede ver en las imágenes debajo, está rodeada de la partida<h1>etiquetas. El siguiente paso es encontrar las etiquetas en el archivo html y reemplazar el texto.

3. cambiar a su editor de texto y desplácese hacia abajo hasta que vea la misma<h1>. En la plantilla de enfoque, se encuentra alrededor de la línea 105.

Para editar el texto, haga clic en entre el <h1> etiquetas, seleccione eliminar y luego escriba su propio texto.

4. para editar el resto de la aplicación móvil de plantilla de página de aterrizaje, tienes dos opciones. Puede volver a su navegador y seguir inspeccionando las piezas de la página con el Inspector, localizar en el archivo HTML y sustituirlos.

La otra opción es quedarse en su editor de texto y simplemente seguir editando las etiquetas HTML que contienen texto simulado. Como se puede ver en la captura de pantalla a continuación, puede editar el párrafo que está inmediatamente por debajo de la <h1> palabra clave y después continuar editando el texto del botón, el texto de características y así sucesivamente.

Sea cual sea la opción que elija, continuar repitiendo estos pasos hasta que usted ha editado todo el contenido de la demo.

Cuando haya terminado de hacer cambios, haga clic en Archivo > Guardar en su editor de texto y luego actualizar la ficha de plantilla en la ventana del navegador. Verás que todos los cambios se han aplicado.

5. el siguiente paso es reemplazar las imágenes que utiliza la plantilla. Revisaremos los pasos necesarios para reemplazar una imagen, y usted puede repetir los mismos pasos para todas las otras imágenes.

Para comenzar a cambiar las imágenes, usted necesitará agregar todo a la carpeta de imágenes. Una vez más, abrir la plantilla index.html en el navegador, haga clic en la primera imagen en el encabezado y haga clic en inspeccionar.

Verás el código HTML para etiquetas de imagen que se ve así: <img src="images/iphones-hero.png" alt="picture" class="hero-picture width-100">.

6. ahora todo lo que tienes que hacer es editar el archivo index.html en tu editor de texto. Abrir el index.html en el editor de texto y buscar la anterior línea de código. Eliminar todo después de las imágenes / y reemplace el nombre de la imagen con su propia imagen.

2. Estilo de la Plantilla

El paso siguiente después de editar el contenido cambiar la forma de la plantilla se ve. Esto puede hacerse editando el archivo CSS pero en primer lugar, usted necesita saber que estilos se asocian a qué elemento HTML.

1. empiezas haciendo clic derecho sobre un elemento en el explorador y seleccionando Inspeccionar. Esta vez mira a la derecha de la pantalla y usted podrá ver el código CSS para ese elemento, así como la línea donde se encuentra el código en el archivo CSS.

Inspecting CSS fileInspecting CSS fileInspecting CSS file

2. para editar el archivo CSS, ir a la carpeta de la plantilla y abra la carpeta CSS. Ahora, haga clic en el archivo style.css, haga clic en Abrir Con y seleccione su editor de texto.

Editing CSS fileEditing CSS fileEditing CSS file

3. ahora, buscar esa línea de código que usted vio en el Inspector. Por ejemplo, quiero cambiar el color de fondo de fondo recomendado. Esa línea de código está situada en línea de 170 por lo que todo lo que necesito hacer es desplazarse hacia abajo en el archivo CSS y reemplace el código de color. El código tiene este aspecto:

.section-grey{

background: #f2f7f8;

padding: 70px 0;

}

He cambiado el código de color hexadecimal y lo reemplazó con esto:

background: #f4f3f2;

El CSS le permite también cambiar las fuentes y los colores del texto. Simplemente repita los pasos como lo hizo con el archivo HTML y ajustar los estilos a tu gusto.

3. Subir tu Plantilla de Página de Aterrizaje para el Servidor de la Aplicación

Ahora que la plantilla está editada y estilo, necesita subir a su servidor de hosting para que tu página de aterrizaje puede ser vivo y puede empezar a promoverlo. Para ello, necesita la información del FTP de su servidor. Si no has recibido esta información de su anfitrión, usted necesitará comunicarse con ellos. También necesitarás a un cliente FTP que te permitirá conectarte a tu servidor y transferir los archivos desde tu ordenador.

Un buen cliente FTP que puede ser utilizado en plataformas es FileZilla. Descargar y ejecutar y escriba la información de su alojamiento en la barra de Conexión Rápida. A continuación, haga clic en el botón Conectar.

Una vez que estás conectado, localice la carpeta HTML de la plantilla en el lado izquierdo de FileZilla. Seleccione todos los archivos y arrastrarlos sobre a la derecha. Soltar los archivos en la carpeta public_html. Todo lo que queda por hacer es esperar a que el proceso de carga hasta el final y tu página de aterrizaje está listo para los visitantes.

Obtener la Aplicación Página de Aterrizaje y Corriendo Rápidamente Con una Plantilla

Sólo has aprendido cómo crear una landing page con una plantilla. Levantarse tu página de inicio de la aplicación y funcionamiento rápido es fácil cuando tienes la plantilla correcta y saber cómo configurarlo. Empezar por partida a Envato Elements para elegir una plantilla de página de inicio de la aplicación y utilizar este tutorial que le guiará por el proceso de configurarlo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.