Diseño de landing page
El diseño de landing page consiste en dar a una página un solo trabajo: un titular que repite la promesa del anuncio, pruebas junto a un único botón y un formulario corto que carga rápido en el teléfono. Abajo encontrarás las partes, ocho reglas, tres ejemplos y una forma gratuita de crearla.
Guía revisada el 13 de octubre de 2026 · Equipo de Mobirise
La anatomía de una landing page
Una landing page es el lugar al que llega alguien desde un anuncio, un correo, una publicación o un código QR concretos, y existe para conseguir de esa persona una sola acción. Seis partes la sostienen, normalmente en este orden.
Un titular que repite la promesa
Reutiliza las palabras del anuncio o del mensaje que trajo al visitante. Si el anuncio ofrece un presupuesto gratis para reparar un tejado, el titular dice exactamente eso, no el lema de tu empresa.
Una línea sobre a quién va dirigida
Un subtítulo de una o dos frases: a quién le conviene la oferta, qué recibe y en cuánto tiempo. Los sustantivos y los números pesan más que los adjetivos; “un precio cerrado para mañana” le dice más al lector que “servicio rápido y amable”.
Una imagen de lo que ofreces de verdad
El producto, el espacio, el equipo o el resultado. Las fotos de stock posadas añaden peso, no información. Comprueba cómo se recorta la imagen en una pantalla estrecha.
Una sola llamada a la acción
Un único botón con un verbo y un resultado, en el único color fuerte de la página. Repítelo más abajo para quienes leen hasta el final, pero nunca añadas un segundo objetivo que compita con el primero.
Pruebas junto a la decisión
Reseñas con nombre, valoraciones con su recuento, logotipos de clientes que puedas usar, certificados. Colócalos junto al botón, donde aparece la duda, y no amontonados al final.
Respuestas y, después, el formulario
Cómo funciona, cuánto cuesta y qué ocurre después del clic. Luego el formulario: solo los campos que necesita el siguiente paso y una frase que diga qué recibe el visitante y cuándo.
Reglas de diseño de landing page que funcionan
Cada una se puede comprobar en la página terminada en uno o dos minutos. Cuando una regla lleva un número, procede de un estándar público con nombre.
Quita las salidas
Elimina el menú principal, los enlaces al blog y los iconos de redes sociales. Cada enlace extra es una salida antes de la acción. Bastan un logotipo, una línea de contacto y los enlaces legales en el pie de página.
Haz que coincida con el origen
Conserva las palabras, la oferta y el estilo visual del anuncio. Google Ads cuenta la experiencia de la landing page, es decir, lo relevante y útil que resulta para quienes hicieron clic, como una de las tres partes del nivel de calidad.
Reúne lo esencial en una sola pantalla
En un teléfono, el titular, el subtítulo y el botón deben verse sin desplazarte. Si la imagen empuja el botón hacia abajo, reduce la imagen, no el texto.
Nombra el resultado en el botón
“Obtener mi presupuesto”, “Reservar una visita”, “Enviarme la lista de precios”. Etiquetas como “Enviar” o “Más información” describen el clic en lugar de lo que recibe el visitante.
Pide menos
Para un primer contacto, suele bastar un nombre más un correo electrónico o un teléfono. Cada campo adicional necesita una razón que puedas explicar; las preguntas de cualificación pueden esperar a la llamada.
Cumple los umbrales de velocidad de Google
Las Core Web Vitals consideran buena una página cuando su elemento más grande se muestra en un máximo de 2.5 segundos, la entrada del usuario recibe respuesta en 200 ms como máximo y el cambio de diseño se mantiene en 0.1 o menos, en el percentil 75 de las visitas.
Supera lo básico de accesibilidad
Las WCAG 2.2 fijan en el nivel AA un contraste de texto de al menos 4.5:1 (3:1 para texto grande) y áreas táctiles de al menos 24 por 24 píxeles CSS. Da a cada campo del formulario una etiqueta visible, no solo un texto de marcador de posición.
Prueba un solo cambio cada vez
Una prueba A/B compara dos versiones que se diferencian en una sola cosa y necesita suficientes visitas y conversiones por versión para descartar el azar. En una campaña pequeña, observar a unas pocas personas usando la página suele enseñar más.
Ejemplos de diseño de landing page con tres temas de Mobirise
Las tres capturas de escritorio bajo el encabezado de esta guía son las primeras pantallas de demos de temas de Mobirise: una organización de voluntariado (HumanityM5), una marca de suplementos alimenticios (EvolveM5) y una clínica médica (SpecialtyM5). Son demos, no páginas de campaña, así que veamos qué hace bien cada primera pantalla y qué conviene cambiar antes de pagar por tráfico.
Organización de voluntariado
Todo está centrado: un titular grande, una frase sobre la causa y un botón oscuro, sobre una foto difuminada de manos que se alcanzan y que deja el texto legible. Para una campaña de captación, cambia “About Organization” por “Inscribirme como voluntario” e indica el próximo evento.
Marca de suplementos alimenticios
Un primer plano de hojas verdes a todo el ancho crea el ambiente antes de que nadie lea una palabra. El nombre del producto aparece en letras blancas muy grandes, con una descripción breve abajo a la izquierda y un botón “About supplement” abajo a la derecha. Para un anuncio, pon el beneficio en el titular en lugar de la categoría y añade una valoración o un certificado junto al botón.
Clínica médica
Una primera pantalla dividida en dos: a la izquierda, un titular con serifa y tres líneas sobre médicos con experiencia, diagnósticos y atención centrada en el paciente; a la derecha, una foto del interior luminoso de una clínica. Un espacio real genera más confianza que una ilustración. Para una campaña de reservas, el botón principal debería decir “Reservar una cita”, con el número de teléfono al lado.
Lo que cambiarían los tres
Cada demo conserva un menú completo (Inicio, Acerca de, Eventos o Precios), como debe tener un sitio web normal. Para una campaña lo eliminarías, dejarías una sola acción y añadirías pruebas y un formulario corto más abajo. Como cada página es una pila de bloques, se trata de una edición, no de un rediseño.
Cómo crear una landing page en Mobirise
Un único editor crea landing pages y sitios completos, en el navegador o en la aplicación descargada. Cuatro pasos llevan una página hasta una dirección publicada.
Consigue un primer borrador
Cuéntale a la IA en una o dos líneas qué ofreces y a quién, en tu propio idioma, o dale en su lugar un boceto dibujado o una captura de pantalla. El generador de sitios web con IA devuelve cuatro diseños, cada uno con textos e imágenes, normalmente en menos de un minuto; Regenerate ofrece más variantes sin consumir un intento. O abre un tema y añade bloques a mano.
Reduce todo a un objetivo
Arrastra los bloques para ordenarlos, elimina los que no sirvan a la acción y deja fuera el menú. Usa Clone Block para repetir la llamada a la acción más abajo y elige la etiqueta H de cada título para que la página tenga un único H1. El texto y las imágenes se editan directamente en la página; los parámetros de cada bloque controlan el espaciado, el fondo, las columnas y los elementos visibles.
Añade el formulario y los extras
Form Builder crea el formulario de captación, Popup Builder añade una ventana emergente y Chat Button abre una conversación en WhatsApp, Telegram, Messenger y otras aplicaciones. Los tres forman parte de KIT, BASE y GROW, los planes de pago.
Revisa en un teléfono y publica
Previsualízala con los anchos de teléfono, tableta y escritorio; las imágenes se convierten a WebP automáticamente. Publica en una dirección de mobirisesite.com con HTTPS o en un dominio propio (planes BASE y GROW). En cualquier plan, FREE incluido, la aplicación de escritorio también puede subirla por FTP o FTPES, publicarla en GitHub Pages o guardarla en una carpeta local.
Mobirise no tiene pruebas A/B integradas. Para comparar dos versiones, publica cada una en su propia dirección, envía la mitad de tus anuncios a cada una y compara los resultados en tu cuenta de anuncios o en tu herramienta de analítica. Editar también es posible en la aplicación de escritorio sin conexión; publicar y usar la IA requieren internet.
Qué creador de landing pages se ajusta a cada trabajo
Las plataformas especializadas en landing pages están pensadas para las pruebas y el tráfico de anuncios. Los creadores de sitios web generales cuestan menos y permiten que una página crezca hasta ser un sitio. Nuestras recomendaciones, incluidos los casos en los que no elegiríamos Mobirise:
- Muchas variantes con tráfico de pago
- Unbounce o Instapage. Ambos incluyen pruebas A/B en sus planes intermedios; Instapage prueba del lado del servidor y añade personalización.
- Pruebas A/B con un presupuesto menor
- Leadpages, donde las pruebas empiezan en el plan Grow.
- Una página sencilla por muy poco
- Carrd: un plan gratuito y planes de pago con precio anual.
- Una página gratis que conservas como archivos
- Mobirise: la aplicación de escritorio no cuesta nada, exporta HTML y publica en cualquier hosting.
- Un diseño con IA antes de pagar
- 8B AI: diseñar no cuesta nada y para publicar hace falta el plan Pro.
- Una página que se convierte en un sitio completo
- Mobirise u otro creador de sitios web, ya que las páginas posteriores viven en el mismo proyecto.
- Dónde se queda corto Mobirise
- Sin pruebas A/B integradas; los formularios y las ventanas emergentes llegan con extensiones de pago; sin un diseño aparte para teléfono; los sitios gratuitos llevan la marca de Mobirise.
Seis creadores de landing pages comparados
Mobirise pierde en la fila de pruebas A/B; las plataformas especializadas pierden en conservar tus archivos y en trabajar sin conexión. Fíjate en la base de facturación de la fila de precios: mensual o anual.
| Mobirise | Unbounce | Leadpages | 8B AI | Carrd | Instapage | |
|---|---|---|---|---|---|---|
| Pensado para | Landing pages y sitios completos a partir de bloques adaptables, con archivos que conservas | Profesionales del marketing y agencias que gestionan páginas de campaña | Pequeñas empresas que publican landing pages, sitios y blogs | Probar sin coste un diseño de sitio completo con IA y publicar más tarde | Sitios sencillos de una sola página y perfiles | Campañas de anuncios a gran escala, con personalización |
| Pruebas A/B | No, no integradas | Sí, ilimitadas, desde el plan Experiment | Sí, desde el plan Grow | No figura | No figura | Sí, del lado del servidor, desde el plan Optimize |
| Formularios | Extensión Form Builder, en KIT, BASE y GROW | Formularios de captación en todos los planes; formularios de varios pasos desde Build | Formularios y webhooks en todos los planes | Formularios de contacto y de captación, en el plan gratuito y en Pro | Desde Pro Standard; formularios avanzados en Pro Plus | Creador de formularios en todos los planes; formularios de varios pasos desde Optimize |
| Ayuda de IA | Cuatro diseños por generación, a partir de texto escrito, un boceto o una captura de pantalla; 3 generaciones con IA gratuitas al mes | Redacción con IA desde Build; optimización del tráfico con IA en Optimize | Creación de páginas con IA en todos los planes | Genera un diseño completo a partir de una sola frase; ediciones con IA por chat en Pro | No figura | Texto con IA para titulares, párrafos y botones |
| Plan gratuito | Sí: la aplicación de escritorio y sus más de 200 bloques, sitios ilimitados en cualquier servidor, más 3 sitios online gratuitos en un subdominio de Mobirise; los sitios gratuitos llevan la marca de Mobirise | No; una prueba de 14 días sin tarjeta, sin dominio propio durante ella | No; una prueba de 7 días, con tarjeta obligatoria | Solo diseño; sin publicación | Sí, hasta 3 sitios con la marca “Made with Carrd” | No; una prueba de 14 días, con tarjeta obligatoria |
| Plan de pago más barato | 149 USD al año por KIT: aplicación de escritorio, todas las extensiones, sin marca. 199 USD al año por BASE, que añade dominios propios en el hosting de Mobirise | Starter, 22 USD al mes facturados anualmente (29 USD con pago mensual): 5 páginas, tráfico de hasta 500 | Pro, 29 USD al mes; con facturación anual ahorras un 20 % | 9 USD al mes por Pro, con pago anual, con hosting y dominio propio | 9 USD al año por Pro Lite (solo dirección de Carrd); 19 USD al año por Pro Standard, que añade dominios propios y formularios | Create, 79 USD al mes facturados anualmente (99 USD con pago mensual): 15 000 visitantes únicos al mes |
| Exportar el código | Sí: archivos HTML, CSS y JS sin formato, gratis desde la aplicación de escritorio; la exportación desde el creador en el navegador requiere BASE o GROW | No; las páginas solo se descargan como archivos .unbounce para Unbounce | Classic Builder: un archivo HTML que carga la página desde Leadpages; no se admite una copia estática | Exportación completa en HTML en Pro | Pro Plus (49 USD al año): HTML, CSS y JS en un zip; los formularios dejan de funcionar | No figura |
| Funciona sin conexión | Sí, en la aplicación de escritorio (Windows, macOS, Linux) | No, solo en el navegador | No, solo en el navegador | No, solo en el navegador | No, solo en el navegador | No, solo en el navegador |
Consultado el 13 de octubre de 2026 en la página de precios y los artículos de soporte de cada proveedor. Precios en dólares estadounidenses; “facturados anualmente” es el equivalente mensual de un único pago anual, mientras que Mobirise y Carrd indican un precio anual. Las cifras en dólares de Leadpages proceden de las preguntas frecuentes de su página de precios. Las reseñas antiguas suelen citar planes anteriores y los precios cambian, así que confirma en cada sitio antes de comprar.
Lista de comprobación de una landing page antes del lanzamiento
Repasa esta lista en un teléfono, con datos móviles en lugar del wifi de la oficina, antes de que llegue el primer clic de pago, y envía tú mismo una entrada de prueba por el formulario.
Corrige cualquier punto que falle antes de gastar en tráfico: los clics de pago en un formulario roto son aquí el error más caro. Si se trata de un sitio web de una sola página y no de una página de campaña, salta el primer punto y el objetivo único.
- Coincidencia con el origen. El titular usa las palabras del anuncio, el correo o la publicación.
- Primera pantalla. El titular, el subtítulo y el botón se ven en un teléfono sin desplazarse.
- Un solo objetivo. El menú y los enlaces ajenos han desaparecido; cualquier botón repetido lleva a la misma acción.
- Texto del botón. Nombra lo que recibe el visitante.
- Pruebas. Están junto al botón y cada cita lleva nombre.
- Formulario. Solo los campos que necesita el siguiente paso, cada uno con una etiqueta visible.
- Entrada de prueba. Llega a la bandeja de entrada correcta y el mensaje de agradecimiento dice qué ocurre después.
- Contraste y tamaño táctil. El texto cumple 4.5:1 y los botones se pulsan fácilmente con el pulgar.
- Velocidad. La página supera las Core Web Vitals en PageSpeed Insights.
- Básicos de búsqueda. El título y la descripción de la página describen la oferta, y hay un solo H1.
- Pie de página. Los enlaces a la política de privacidad y al contacto funcionan.
- Seguimiento. Se cuenta una conversión en tu analítica o en tu cuenta de anuncios.
Preguntas frecuentes sobre diseño de landing page
¿Qué es el diseño de landing page?
Consiste en planificar una página en torno a una sola acción para los visitantes de una fuente concreta: un anuncio, un correo, una publicación o un código QR. Abarca el titular, la maquetación, las pruebas, el formulario y la velocidad, y el resultado se juzga con un único número: el porcentaje de visitantes que actúan.
¿Qué hace buena a una landing page?
Una promesa que coincide con el origen del visitante, una sola acción, pruebas junto a esa acción y un formulario corto. También tiene que cargar rápido y leerse bien en un teléfono, ya que el tráfico de campaña suele llegar desde uno.
¿Cómo diseño una landing page paso a paso?
Anota la única acción que quieres y de dónde viene el tráfico. Redacta el titular con las palabras de la propia fuente, reúne las pruebas que puedas mostrar y esboza el orden de las seis partes. Después constrúyela con bloques o a partir de un borrador de IA y pruébala en un teléfono antes del lanzamiento.
¿Un sitio web de una página es lo mismo que una landing page?
No exactamente. Un sitio web de una página reúne un sitio pequeño entero en una sola página que se recorre desplazándose, normalmente con un menú que salta a sus secciones, y sirve para varios fines. Una landing page tiene un único objetivo, suele hacerse para una campaña y puede estar dentro de un sitio mayor.
¿Debe una landing page tener menú de navegación?
Normalmente no: cada enlace del menú es una forma de irse antes de actuar. Conserva el logotipo, una línea de contacto y los enlaces legales; en una página larga, un botón que salta al formulario sustituye al menú.
¿Qué extensión debe tener una landing page?
Tanta como las preguntas del visitante. Una descarga gratuita necesita una pantalla o dos; un servicio caro necesita precios, proceso, pruebas y respuestas, así que es más larga. Repite el mismo botón en los puntos de pausa naturales.
¿Cuál es el mejor creador de landing pages?
Depende del trabajo. Para pruebas A/B constantes con tráfico de pago, Unbounce, Instapage y Leadpages están diseñados para eso. Carrd es una opción barata para una única página sencilla. Mobirise sirve para una página gratuita que puedes alojar donde quieras y convertir más tarde en un sitio completo, aunque no tiene pruebas A/B integradas.
¿Puedo hacer una landing page gratis?
Sí. La aplicación descargable de Mobirise es gratuita, incluye más de 200 bloques y puede subir la página a tu propio servidor. Online, el plan gratuito cubre 3 sitios en una dirección de mobirisesite.com más 3 generaciones con IA al mes, con la marca de Mobirise en cada sitio. Form Builder y Popup Builder requieren un plan de pago, desde 149 USD al año.
¿Puede la IA diseñar una landing page?
Sí. En Mobirise describes la oferta y el público, eliges uno de cuatro diseños con IA y lo perfeccionas conversando con la IA o editando los bloques tú mismo. Una generación produce una página o una versión aproximada del sitio completo. Tus precios, datos y fotos reales siguen viniendo de ti.
¿Mobirise admite pruebas A/B?
No, no hay pruebas A/B integradas. Puedes publicar dos versiones en direcciones distintas, enviar la mitad del tráfico de tus anuncios a cada una y comparar los resultados en tu cuenta de anuncios o en tu analítica.
Crea tu primera landing page
Empieza con un borrador generado con IA online, o maquétala bloque a bloque en la aplicación gratuita en un equipo con Windows, Mac o Linux, y luego publícala donde la necesite tu campaña.