Ejemplos y plantilla de landing page para apps móviles
Ejemplos de landing page para apps móviles
Landing page para apps móviles: secciones en vivo + reglas de insignias | We.Inc
Secciones originales de landing page para apps móviles que puedes editar en vivo: hero con maqueta de móvil, funciones, pasos y franja de descarga, con las reglas oficiales de las insignias de App Store y Google Play.
Una landing page de app tiene una sola tarea: conseguir que las personas adecuadas la instalen. Empieza diciendo en una frase lo que hace la app, muéstrala funcionando dentro de un marco de móvil y coloca las insignias oficiales de App Store y Google Play cerca de la parte superior y otra vez al final. Sigue las reglas de cada tienda sobre tamaño y espaciado de las insignias.
Reglas de las insignias de las tiendas de un vistazo (revisadas en octubre de 2026)
Regla
Insignia de App Store
Insignia de Google Play
Texto
Descárgalo en el App Store
Disponible en Google Play
Altura mínima en pantalla
40 px
28 px
Espacio libre alrededor
Un cuarto de la altura de la insignia
Un cuarto de la altura de la insignia
Junto a otras insignias
Colócala primero; usa la insignia negra
Del mismo tamaño o mayor que las demás
Cambios permitidos
Ninguno: no la modifiques, inclines ni animes
Ninguno: sin cambiar colores ni reordenar
La mayoría de las recopilaciones de páginas de apps son galerías de capturas. Esta página te da las secciones en sí en HTML y CSS puros, creadas para apps inventadas, además de un pequeño generador para el hero. Los huecos de las insignias son marcadores de posición porque el diseño real tiene que venir de Apple y Google.
Escribe el nombre de tu app, su promesa en una línea y el color de tu marca en el generador del hero, y copia el HTML.
Recorre los ejemplos de secciones: funciones, cómo funciona y la franja final de descarga.
Descarga las insignias oficiales desde las páginas de marketing de Apple y Google y colócalas en los huecos reservados.
Enlaza cada insignia directamente a la ficha de tu app en esa tienda.
Di lo que hace la app antes de decir cómo se siente. Una frase como Reparte el alquiler y las facturas con tus compañeros de piso gana a un eslogan.
Muestra pantallas reales de la app dentro del marco del móvil. Los datos de ejemplo están bien; las funciones inventadas no.
Las directrices de Apple piden una sola insignia de App Store por diseño y que quede en una posición secundaria respecto al mensaje principal.
En móviles, plantéate mostrar solo la insignia de la plataforma del visitante, ya que la otra tienda no puede instalar nada en su dispositivo.
Añade un pequeño bloque con código QR en escritorio para que los visitantes pasen a su móvil en un solo paso.
Preguntas frecuentes
¿Qué debe incluir una landing page de app móvil?
Un titular de una frase que diga lo que hace la app, una maqueta de móvil con una pantalla real, tres o cuatro funciones escritas como resultados, una breve franja de cómo funciona, las insignias oficiales de las tiendas y un enlace a la política de privacidad. Una franja final de descarga repite las insignias.
¿Puedo crear mi propio botón de App Store o Google Play?
No. Ambas empresas exigen su diseño oficial de insignia, sin cambios. La página de Apple dice que no se modifique, incline ni anime la insignia, y la de Google dice que no se alteren los colores ni se reordenen los elementos. Descarga los archivos desde sus recursos de marketing.
¿Qué tamaño deben tener las insignias de las tiendas?
Apple fija una altura mínima en pantalla de 40 píxeles para la insignia de App Store, y Google fija 28 píxeles para la de Google Play. Cuando aparecen juntas, Google pide que su insignia sea del mismo tamaño o mayor que las demás.
¿Necesito una web si mi app ya está en las tiendas?
Una página en tu propio dominio es donde puedes enlazar desde anuncios, correos y publicaciones en redes, alojar tu política de privacidad y posicionar en la búsqueda web por lo que hace la app. Las fichas de las tiendas por sí solas no pueden hacer todo eso.
Una estructura que funciona para la mayoría de apps
Arriba: titular, una línea de apoyo, insignias y la maqueta del móvil. En medio: funciones como resultados y luego una franja de cómo funciona en tres pasos. Abajo: las insignias repetidas con una razón breve para instalar hoy.
Mantén la página corta. Un visitante que ya se ha decidido quiere la insignia, no seguir desplazándose.
Insignias y ubicación
Ambas tiendas piden un espacio libre de un cuarto de la altura de la insignia alrededor del diseño. Apple prefiere la insignia negra cuando aparecen varias insignias de tiendas juntas y pide que la suya vaya primero.
Usa un texto alternativo que coincida con el texto de la insignia, como Descárgalo en el App Store, para que los usuarios de lectores de pantalla oigan adónde lleva el enlace.
Secciones de landing page de app para copiar
Hero con maqueta de móvil y huecos para insignias
Un marco de móvil hecho solo con CSS junto al titular. En pantallas estrechas el móvil pasa debajo del texto.
Funciones escritas como resultados
Cada tarjeta empieza con lo que obtiene la persona, no con el nombre de la función.
Cómo funciona en tres pasos
Los pasos numerados hacen que el onboarding parezca corto. Usa una lista ordenada para que se anuncie el orden.
Franja final de descarga con hueco para QR
Repite las insignias al final. El hueco del QR es para visitantes de escritorio que quieren pasar a su móvil.
Tira desplazable de pantallas de la app
Una tira horizontal que se desplaza dentro de su propia caja, para que la página nunca se desplace de lado.
Lista de comprobación de la landing page de app
Antes de publicar
Elemento
Detalle
El titular dice lo que hace la app
Una frase sencilla
Pantallas reales en la maqueta
Ninguna función que la app no tenga
Insignias oficiales, sin cambios
Descargadas de Apple y Google
Cada insignia enlaza a su ficha en la tienda
No a la página principal genérica de la tienda
El texto alternativo coincide con el de la insignia
Para usuarios de lectores de pantalla
Política de privacidad enlazada en el pie
Fácil de encontrar para visitantes y revisores
Insignias repetidas al final
Para quienes leen hasta abajo
Generador de hero para apps
Escribe un titular, una línea de apoyo y un color de pantalla para crear una sección hero con un marco de móvil en CSS y dos huecos para insignias, y luego copia el HTML.
Titular
Línea de apoyo
Color de pantalla
Planifica tu semana en cinco minutos
Weekbird convierte tu lista de tareas en un calendario tranquilo y realista.
El hero de tu app
Cópialo y luego sustituye los huecos punteados por el diseño oficial de las insignias.