Cómo diseñar una landing page: pasos y plantillas listas

Una landing page (o página de aterrizaje) es una sola página con una sola misión: que el visitante haga una acción, como registrarse, reservar una llamada o comprar. Para diseñar una landing page, ordena las secciones según llegan las preguntas del visitante (qué es, si puede confiar, qué gana, cómo funciona, cuánto cuesta), dale a cada sección un solo mensaje y termina con el mismo botón con el que empezaste. Si vendes a lectores en árabe, construye la versión árabe de derecha a izquierda desde el primer día, en lugar de traducirla al final.

Esta guía recorre cada sección, los detalles del árabe y del RTL que casi todas las guías omiten, lo básico de velocidad y SEO, y los errores que cuestan registros. Termina con plantillas de landing page listas para usar, de pago y gratis, que ya siguen estos pasos en inglés y en árabe.

Revisado en noviembre de 2026: el 5 de noviembre de 2026 abrimos la versión árabe (/ar) de seis demos de landing pages de Aniq UI y leímos su HTML y su CSS. Los precios salen de las páginas de las plantillas el mismo día.

¿Qué es una landing page?

Una landing page es la página a la que llega un visitante tras hacer clic en un anuncio, un resultado de búsqueda, un correo o una publicación, y está hecha para una sola acción. Una página de inicio sirve a todos y enlaza a todas partes. Una landing page sirve a un tipo de visitante, con una oferta y un botón principal, y normalmente con menos enlaces en el menú.

La acción cambia según el negocio: una prueba gratis para un software, una llamada reservada para una agencia, una compra para un producto, un correo para una lista de espera. Decídela antes de diseñar nada, porque todas las decisiones siguientes (titular, secciones, texto del botón) dependen de ella.

¿Qué secciones necesita una landing page y en qué orden?

La mayoría de las landing pages que convierten usan siete secciones, en este orden. Cada una responde la pregunta que tiene el visitante en ese punto del scroll, así que el orden importa tanto como el contenido.

Sección	La pregunta del visitante	Qué hace que funcione
Hero	¿Qué es esto y es para mí?	Un titular con el resultado, un botón principal, una imagen del producto
Prueba social	¿Puedo confiar?	Logos reales, cifras reales, opiniones con nombre y cargo
Beneficios	¿Qué gano?	De 3 a 6 resultados, cada uno en una frase corta
Cómo funciona	¿Es difícil empezar?	3 o 4 pasos numerados
Precios	¿Cuánto cuesta?	Precios visibles, tres planes como máximo, el habitual destacado
Preguntas frecuentes	¿Y si...?	De 5 a 8 objeciones reales con respuestas claras
Llamada a la acción	Vale, ¿y ahora?	El mismo botón del hero, con una frase que repite el resultado

Hero: di el resultado y muestra el producto

El hero decide si el visitante sigue bajando. El titular dice lo que obtiene el visitante, con sus palabras, no un eslogan. La línea de debajo dice para quién es y cómo funciona. Después, un botón principal con un verbo («Empieza gratis», «Reserva una llamada») y, si hace falta, un segundo botón más discreto. En el móvil, el titular, la línea y el botón deben verse antes de hacer scroll.

Muestra el producto. Las dos landing pages de pago de Aniq UI ponen una vista previa de un panel justo debajo del titular, así el visitante ve lo que usará antes de leer una lista de funciones.

Sección hero de la landing page SaaS Template de Aniq UI en modo oscuro: titular en dos líneas, botón principal para empezar gratis, botón secundario Learn More y la vista previa de un panel de analítica debajo

Prueba social: logos reales, cifras reales

La prueba social va justo después del hero, porque la confianza es la siguiente pregunta. Logos de clientes, una cifra de uso, valoraciones o dos o tres opiniones con nombre, cargo y empresa. Una opinión concreta («pasamos de dos semanas a tres días de alta de clientes») vale más que diez vagas.

Usa solo lo que sea cierto. Las demos de las plantillas traen cifras de ejemplo (la demo de SaaS Template dice «Trusted by over 4,000 startups») y hay que cambiarlas o borrarlas antes del lanzamiento.

Beneficios: resultados, no funciones

Enumera de tres a seis beneficios. Cada uno lleva un icono, un título corto y una frase que dice qué cambia para el lector. «Informes en tiempo real» es una función; «ver las ventas de hoy sin esperar el informe del mes» es el beneficio. Si enumeras funciones, une cada una al resultado que aporta.

Cómo funciona: tres o cuatro pasos

Una lista numerada corta (regístrate, conecta, lanza) quita el miedo a que empezar sea difícil. Quédate en tres o cuatro pasos, cada uno con un verbo y pocas palabras. La plantilla gratis Company Website, por ejemplo, incluye una sección «cómo funciona» de cuatro pasos.

Precios: muestra el precio

Un precio oculto manda al visitante a buscar en otra parte. Muestra tres planes como máximo, destaca el que debería elegir la mayoría y enumera lo que incluye cada uno. Si ofreces pago mensual y anual, añade un selector e indica el ahorro. Las dos demos de pago de Aniq UI muestran tres planes con el del medio marcado como «Most Popular», y Publino añade un selector mensual y anual.

Preguntas frecuentes: responde a las objeciones

Reúne las preguntas que la gente hace de verdad antes de pagar: ¿puedo cancelar?, ¿hay reembolso?, ¿qué formas de pago?, ¿cuánto tarda la puesta en marcha?, ¿qué soporte hay? Bastan de cinco a ocho respuestas. Deja las respuestas en el HTML (un acordeón está bien) para que los buscadores y los asistentes de IA puedan leerlas.

Llamada a la acción: repite el primer botón

Termina con una frase que repita el resultado y con el mismo botón del hero, con las mismas palabras. Quien llegó al final está listo: no le hagas subir otra vez. Deja el pie de página corto: enlaces legales, contacto y cambio de idioma.

¿Cómo se diseña una landing page en árabe (RTL)?

Una landing page en árabe es la misma página dispuesta de derecha a izquierda: el menú empieza a la derecha, el texto se alinea a la derecha y las flechas de «siguiente» apuntan a la izquierda. Constrúyela con los mismos componentes que la versión en español o inglés, fija la dirección en el HTML, carga una fuente árabe, mantén los números de izquierda a derecha y escribe el texto en árabe en lugar de traducirlo línea a línea.

Lo que encontramos en seis demos de Aniq UI. Las seis páginas árabes envían <html lang="ar" dir="rtl"> en la primera respuesta HTML, ninguna usa cifras arábigo-orientales, y los contadores animados de las dos plantillas de pago se dibujan con direction: ltr, así que una cifra como +127 % conserva su orden.

Dirección: en el elemento html

Pon dir="rtl" y lang="ar" en <html>, renderizados por el servidor para cada URL de idioma (/ar, /en). Es lo que recomienda el W3C, que desaconseja fijar la dirección base solo con CSS. Después escribe los espacios con propiedades lógicas (margin-inline-start, o ms-4 en Tailwind CSS en lugar de ml-4), para que una sola hoja de estilos sirva en los dos sentidos. Nuestra guía RTL de Tailwind CSS tiene el código.

Fuentes: carga una fuente árabe de verdad

La fuente latina de un diseño a menudo no tiene letras árabes, y el navegador recurre a una fuente del sistema que no encaja. Elige una familia árabe y combínala con la latina. En las demos que revisamos, las plantillas gratis combinan Inter con Noto Sans Arabic, la plantilla 3D usa Cairo, SaaS Template carga Noto Sans Arabic y Almarai junto a DM Sans, y Publino usa las fuentes del sistema. Las tres familias árabes están en Google Fonts. Cárgalas con next/font, que aloja los archivos en tu sitio y evita saltos de diseño.

La escritura árabe necesita más espacio vertical para sus puntos y signos: da más interlineado a los titulares en árabe y quita cualquier espaciado entre letras, porque separar letras unidas rompe la escritura.

Números: un solo estilo, siempre de izquierda a derecha

Elige un estilo de números y mantenlo en todas partes. Las demos de Aniq UI usan cifras latinas (0 a 9) en árabe, las mismas que en la versión inglesa. Si das formato a los números con Intl.NumberFormat, la configuración regional ar-u-nu-latn mantiene las cifras latinas en cualquier país. Precios, teléfonos, porcentajes y fechas deben quedar de izquierda a derecha dentro del texto árabe: envuélvelos en <bdi> o dales dir="ltr".

Iconos: invierte solo lo que indica dirección

Invierte los iconos que siguen el sentido de lectura: flechas de atrás y adelante, la flecha dentro de «Empieza ahora», botones de anterior y siguiente, pasos de progreso. No inviertas relojes, botones de reproducción, el icono de búsqueda, logos ni nada que represente un objeto físico. La guía de bidireccionalidad de Material Design tiene la lista completa.

Escribir para lectores en árabe

Escribe el texto árabe directamente o pide a un hablante nativo que reescriba la traducción. El árabe estándar moderno se lee bien de Riad a El Cairo y Argel; usa una palabra local solo si la página apunta a un país. Habla directamente al lector, con frases cortas. Los botones van en imperativo: la demo árabe de Publino usa «ابدأ الآن» (empieza ahora) y «احجز مكالمة» (reserva una llamada). Muestra los precios en la moneda con la que paga el visitante, deja los nombres de producto en alfabeto latino y comprueba que un titular árabe más largo sigue cabiendo en el hero en el móvil.

Velocidad y SEO básico para una landing page

Una landing page debe aprobar las Core Web Vitals en móvil y ser fácil de leer para los buscadores en cada idioma. Los umbrales «buenos» de Google, medidos en el percentil 75 de las visitas, son un Largest Contentful Paint de 2,5 segundos o menos, un Interaction to Next Paint de 200 milisegundos o menos y un Cumulative Layout Shift de 0,1 o menos.

Imagen del hero: sírvela al tamaño en que se muestra, en WebP o AVIF, y cárgala primero (priority en el componente Image de Next.js). Suele ser el elemento más grande que se pinta.
Vídeo y 3D: cárgalos después del primer pintado. La plantilla 3D gratis carga sus modelos 3D en diferido por eso.
Fuentes: alójalas con next/font y carga solo los pesos que uses.
Una URL por idioma: /es, /en, /ar, cada una con su título y su meta descripción escritos según lo que la gente busca en ese idioma.
hreflang: cada versión de idioma se enlaza a sí misma y a las demás, con URL completas. Google ignora las etiquetas si dos páginas no se apuntan entre sí.
Un solo h1: el titular del hero. Los títulos de sección son h2.
Texto real: deja titulares y precios como texto HTML, nunca dentro de imágenes, y escribe el texto alternativo en cada idioma.

Prueba la página final con PageSpeed Insights, en la pestaña de móvil, en cada idioma.

Errores comunes en una landing page

Varios objetivos. Un botón de prueba, un cuadro de newsletter y un enlace a «hablar con ventas» compiten entre sí. Deja una acción principal.
Un eslogan como titular. «El futuro del trabajo» no dice nada. Di lo que obtiene el visitante.
Pruebas de ejemplo olvidadas. Logos, opiniones y cifras de la plantilla aún publicados.
Precios ocultos. «Contáctanos para conocer el precio» en un producto que tiene precio.
Formularios largos. Pide solo lo necesario para el siguiente paso.
El árabe al final. Un diseño invertido con flechas al revés, espaciado entre letras en el texto árabe o estilos de números mezclados.
Un hero pesado. Un vídeo con reproducción automática o una imagen sin comprimir que suspende el LCP en móvil.
Sin prueba en móvil. Muchos visitantes llegan desde un anuncio en el teléfono: prueba ahí primero.

Plantillas de landing page listas para descargar

Empezar con una plantilla te ahorra la maquetación, el diseño responsive y el trabajo RTL. Aniq UI tiene dos landing pages de pago a 39 $ y cuatro gratis. Las seis usan Next.js y React 19, y las seis tienen una versión árabe en /ar de derecha a izquierda, que abrimos el 5 de noviembre de 2026.

Plantilla	Precio	Stack	Árabe RTL	Qué incluye	Ideal para
SaaS Template	39 $	Next.js 16, Tailwind CSS 4	Sí	Inicio, precios, blog, contacto, registro, páginas legales y de error	Software vendido por suscripción
Publino	39 $	Next.js 16, Tailwind CSS 4	Sí	Inicio, precios mensuales y anuales, página de contacto con formulario validado	Un producto o servicio por suscripción
SaaS Landing Page with Pricing	Gratis	Next.js 15, Tailwind CSS 3	Sí	Una página: funciones, pasos, planes, tabla comparativa, preguntas frecuentes	Una primera página SaaS
Web Design Agency Portfolio	Gratis	Next.js 15, Tailwind CSS 3	Sí	Una página: proyectos, proceso, precios, formulario de contacto	Agencias y freelancers
Company Website	Gratis	Next.js 15, Tailwind CSS 3	Sí	Una página: cómo funciona, integraciones, opiniones, artículos	Una empresa o startup
3D Landing Page	Gratis	Next.js 15, Three.js, GSAP	Sí	Una página: una escena 3D del producto	Un solo producto

SaaS Template (39 $)

Una landing page oscura para un producto de software, hecha con Next.js 16, React 19, Tailwind CSS 4, TypeScript y next-intl. Además del inicio incluye páginas de precios, blog, contacto y registro, páginas legales (privacidad, términos, cookies, RGPD) y páginas de error, con React Hook Form y Zod en los formularios. Su hero lleva la vista previa completa del panel que ves abajo. Ver SaaS Template o abrir su demo en árabe.

Página de inicio de SaaS Template de Aniq UI: hero oscuro con un panel de analítica (estadísticas de usuarios, gráfico de nuevos usuarios, anillo de fuentes de tráfico, tareas y tabla de clientes) y una franja de logos de socios

Publino (39 $)

Una landing page para un producto por suscripción, también con Next.js 16, React 19 y Tailwind CSS 4, en temas oscuro y claro. Tiene un inicio con una maqueta de panel de despliegues, una página de precios con planes mensuales y anuales y un filtro de funciones, preguntas frecuentes agrupadas por categoría y una página de contacto con un formulario validado con React Hook Form y Zod. Ver Publino o abrir su demo en árabe.

Plantilla de landing page Publino en modo oscuro: titular Build and launch in minutes, not days, dos botones y un panel de despliegues inclinado con estadísticas y una tabla

Plantillas de landing page gratis

Tres de las cuatro plantillas gratis son sitios de una página en Next.js 15 con licencia MIT: una página SaaS con planes y tabla comparativa, un portfolio de agencia en blanco y negro con formulario de contacto, y una web de empresa con una sección «cómo funciona» de cuatro pasos. Ninguna tiene back end. Nuestra guía de plantillas de landing page gratis las compara sección por sección y explica cómo conseguir, ejecutar y publicar cada una.

Plantilla gratis de landing page SaaS de Aniq UI en modo oscuro: titular centrado, botón morado para la prueba gratis, botón para reservar una demo y una tarjeta de panel con ventas y visitas

Plantilla gratis de portfolio para agencia de diseño web de Aniq UI: hero brutalista en blanco y negro con un titular grande, un botón para ver los proyectos y formas cuadradas

Para un solo producto: la landing page 3D gratis

Si vendes un solo producto físico, una landing page construida alrededor del producto funciona mejor que una cuadrícula de funciones. La plantilla 3D gratis muestra una rueda de latas que gira con la rueda del ratón o las flechas del teclado, y la página toma los colores del sabor que queda delante. Usa Three.js y GSAP, carga sus modelos 3D en diferido y necesita un modelo 3D de tu propio producto.

Plantilla gratis de landing page 3D de Aniq UI: lata 3D de limón y jengibre sobre fondo verde con limones, botones de tamaño a un lado y flechas abajo

Para compararlas con plantillas de otros creadores, mira nuestras mejores plantillas de landing page Next.js 2026.

De la plantilla a una landing page publicada

Abre la demo en tu teléfono, en inglés y en árabe (/ar), y comprueba que sus secciones encajan con tu oferta.
Compra la plantilla o pulsa Get Free en una gratis. El ZIP aparece en tu panel de Aniq UI.
Ejecútala en local siguiendo la documentación de la página de la plantilla.
Reescribe los textos en los archivos de cada idioma. Empieza por el titular y el botón, en cada idioma.
Sustituye cada logo, opinión, cifra y precio de ejemplo por los tuyos, o bórralos.
Pon la dirección de tu sitio en los ajustes que indica la documentación, para que los enlaces canonical y de idioma apunten a tu dominio.
Publica y prueba cada idioma con PageSpeed Insights en móvil.

Preguntas frecuentes

¿Cómo crear una landing page gratis?

Empieza con una plantilla gratis, cambia textos e imágenes y publícala en cualquier hosting que ejecute Next.js. Aniq UI tiene cuatro plantillas de landing page gratis, cada una en inglés y en árabe; la guía de plantillas gratis explica cómo conseguirlas y ejecutarlas.

¿Qué diferencia hay entre una landing page y una web?

Una web tiene muchas páginas para muchos visitantes. Una landing page es una sola página para un tipo de visitante y una acción, como un registro o una compra, a la que se llega casi siempre desde un anuncio, un correo o un resultado de búsqueda.

¿Cuántas secciones necesita una landing page?

Normalmente siete: hero, prueba social, beneficios, cómo funciona, precios, preguntas frecuentes y llamada a la acción final. Una página de captación sencilla puede prescindir de los precios; una página de producto puede unir beneficios y cómo funciona. Mantén el orden.

¿Dónde descargar landing pages listas en árabe?

Las seis plantillas de landing page de Aniq UI traen una versión árabe de derecha a izquierda: SaaS Template y Publino a 39 $ cada una, y cuatro gratis. Puedes abrir cada demo en /ar antes de descargar.

¿Qué fuente usar para una landing page en árabe?

No hay una sola mejor. Noto Sans Arabic, Cairo y Almarai son opciones habituales y son las que usan las demos que revisamos. Elige una que combine con tu fuente latina, cárgala con next/font y da más interlineado a los titulares en árabe.

¿Cuánto cuesta una plantilla de landing page?

En Aniq UI, las dos landing pages de pago cuestan 39 $ cada una, en un solo pago, y cuatro plantillas de landing page son gratis. Si además necesitas guardar registros o pedidos, los paquetes Full Stack (web, panel y API) cuestan 149 $.

Conclusión

Una buena landing page responde las preguntas del visitante en orden y le pide una sola cosa. Escribe primero el titular y el botón, añade solo pruebas reales, muestra el precio y haz que cargue rápido en el móvil. Para lectores en árabe, fija la dirección en el HTML, carga una fuente árabe, mantén los números de izquierda a derecha y escribe el texto en árabe. Una plantilla te da todo eso desde el primer día, y tu tiempo va a las palabras.

Para qué sirve cada una y cuánto cuesta, en un solo pago:

SaaS Template (software por suscripción, inglés y árabe): 39 $.
Publino (producto o servicio por suscripción, inglés y árabe): 39 $.
Cuatro plantillas de landing page gratis (SaaS, agencia, empresa, producto en 3D): gratis.
Full Stack (web, panel y API, cuando necesitas back end): 149 $.

Explora las plantillas y abre cualquier demo en árabe antes de comprar.

Fuentes

Revisado en noviembre de 2026.