Cómo diseñar una landing page que convierte en WordPress
Resumen
Para diseñar una landing page que convierte, elige una sola acción para el visitante, boceta las secciones en gris, escribe primero el titular real y construye un hero con un solo botón. Añade pruebas concretas justo debajo, diseña primero para el móvil, mantén el Largest Contentful Paint por debajo de 2,5 segundos y el contraste del texto en 4,5 a 1. En WordPress, usa una plantilla de bloques dedicada y cambia un solo elemento a la vez antes de medir.
Si quieres saber cómo diseñar una landing page que convierte, empieza por una decisión: la acción única que debe realizar el visitante. Todo lo demás, desde la disposición del hero hasta el color del botón, se deriva de ella. Boceta las secciones en gris, escribe el titular antes de tocar un bloque y elimina lo que no sirva a esa acción. El resto de este folio explica cómo hacerlo dentro de WordPress, con el Editor de sitios, y con los límites con los que te encontrarás.
¿Por qué una landing page necesita un briefing distinto al de la portada?
Una portada atiende a muchos visitantes con muchos objetivos. Una landing page atiende a un solo visitante con un solo objetivo, que normalmente llega desde un anuncio, un boletín o un resultado de búsqueda. Esa diferencia cambia toda la construcción.
La navegación se reduce o desaparece. Los enlaces secundarios se van. El pie pierde el mapa del sitio. En un tema de bloques esto significa una plantilla dedicada, no un menú oculto dentro de una plantilla compartida. Crea una plantilla en blanco en el Editor de sitios, elimina la parte de cabecera y conserva solo el logotipo y el botón de acción.
Evita la tentación de reutilizar el hero de tu portada. En un proyecto de cliente la primavera pasada, un colega freelance reutilizó el bloque Cover de la portada para una página de webinar y dejó el menú completo. Los visitantes se fueron al blog. Quitar siete elementos del menú fue la solución más barata del trimestre.
¿Qué conviene bocetar antes de abrir el editor?
Primero, papel. Dibuja de cinco a seis rectángulos apilados verticalmente y ponles nombre: hero, problema, solución, prueba, detalles de la oferta y llamada final a la acción. La mayoría de guías publicadas, desde HubSpot hasta Unbounce, coinciden en más o menos esta secuencia, y funciona porque imita cómo decide un lector escéptico.
Trabaja en escala de grises. El color oculta una jerarquía débil, y un boceto en gris la expone enseguida. Si no puedes distinguir qué rectángulo importa más cuando todo está en gris, el visitante tampoco lo hará.
Después escribe las palabras: titular, una frase de apoyo y el texto del botón. Diseña con textos reales, porque una maquetación hecha con texto de relleno se rompe siempre que el titular verdadero ocupa tres líneas. En árabe o hebreo, donde la misma frase suele ser más larga, esto no es opcional.
¿Cómo construir un hero que gane el scroll?
El hero tiene cuatro funciones: enunciar el resultado, decir para quién es, ofrecer una sola acción y mostrar algo que haga creíble la promesa. Un titular que nombra un resultado ("Publica un sitio de cliente en una tarde") supera a uno que nombra una característica ("Un constructor de páginas flexible").
En Gutenberg, construye el hero con un bloque Cover que contenga un Group, para poder limitar el ancho del contenido de forma independiente al fondo. Ajusta el Group a un ancho de contenido de entre 640 y 720 píxeles, añade un bloque Heading, un Paragraph y un único bloque Buttons con un solo botón. Un botón. Dos botones significan dos decisiones, y la segunda suele ser la que se pulsa.
Mantén la imagen de apoyo honesta. Una captura real del producto supera a una foto decorativa. Si solo tienes imágenes abstractas, úsalas con menos peso y deja que el titular cargue con la página. Evita los carruseles en el hero: entierran el mensaje en diapositivas que la mayoría de visitantes nunca ve.
Nota al margen: esta disposición funciona desde WordPress 6.5, donde las restricciones de los bloques Cover y Group se comportan de forma previsible en el Editor de sitios.
¿Cuánta prueba necesita la página y dónde va?
La prueba responde a la pregunta que plantea el hero: ¿puedo creerlo? Colócala justo debajo del hero, no al final, donde solo llega el lector que ya está convencido.
Una buena prueba es concreta. Un cliente con nombre y un resultado medido vale más que cinco estrellas genéricas. Una franja de logotipos ayuda si tu audiencia reconoce esas marcas, y un único testimonio con nombre real y cargo pesa más que un carrusel de citas anónimas.
Ten cuidado con las cifras que no puedas comprobar. Algunas guías populares citan tasas de conversión que ninguna herramienta de analítica produciría. Si citas un número, indica de dónde sale y cuándo se midió, o déjalo fuera. Tu propio antes y después, medido en tu sitio, vale más que cualquier estadística prestada.
¿Qué reglas de maquetación importan más en móvil?
Gran parte del tráfico de las landing pages que llega desde anuncios y redes lo hace desde el teléfono, así que diseña primero esa vista y amplía después. Usa una sola columna, líneas de texto cortas y un botón de acción al alcance del pulgar.
Tres reglas cubren la mayor parte del daño. Las áreas de toque deben medir al menos 24 por 24 píxeles CSS, que es el mínimo de WCAG 2.2 en el nivel AA, y preferiblemente mucho más para el botón principal. El texto del cuerpo debe ser legible sin hacer zoom. Y repite la llamada a la acción después de la sección de pruebas, para que nadie tenga que subir a buscarla.
En un tema de bloques, gestiona el espaciado con la escala definida en theme.json en lugar de añadir relleno personalizado a cada bloque. La referencia de theme.json de WordPress documenta los valores predefinidos, y usarlos mantiene el ritmo de móvil y escritorio coherente sin una hoja de estilos llena de sobrescrituras.
¿Qué tiene que ver la velocidad con el diseño?
Todo. Una landing page que se ve excelente pero carga lento pierde al visitante antes de que aparezca el titular. Google considera bueno un Largest Contentful Paint de 2,5 segundos o menos, y en una landing page el elemento más grande suele ser la imagen del hero o el titular. Consulta la explicación de LCP en web.dev para ver cómo se mide.
De ahí se derivan consecuencias prácticas. Comprime la imagen del hero y sírvela en WebP. No la cargues de forma diferida, porque es el elemento que quieres pintar primero. Limita las fuentes web a una sola familia, idealmente una fuente variable alojada en tu propio servidor con un respaldo sensato. Quita de la primera pantalla los controles deslizantes, los vídeos con reproducción automática y los chats de terceros.
Aquí es donde las landing pages en WordPress suelen perder frente a los constructores alojados. Una página hecha con un tema multipropósito pesado puede enviar cientos de kilobytes de CSS sin usar. Un tema de bloques ligero con una plantilla dedicada envía mucho menos, y esa diferencia se nota directamente en el LCP.
¿Cómo tratar el contraste, la accesibilidad y el RTL?
La accesibilidad es una restricción de diseño, no una auditoría de última hora. El criterio de contraste de WCAG 2.2 exige al menos 4,5 a 1 entre el texto normal y su fondo, y la explicación del W3C sobre el criterio de contraste mínimo muestra cómo comprobarlo. Un pie gris claro sobre una tarjeta blanca no lo cumple, y tampoco muchos botones pastel con etiquetas blancas.
Revisa primero el botón. Es el elemento para el que existe toda la página, y a menudo es el que tiene el contraste más débil, porque se eligió por el color de marca y no por su legibilidad.
En audiencias bilingües, o en árabe y hebreo, reflejar la página es más que girarla. Los iconos que indican dirección, como las flechas del botón, deben invertirse. Los márgenes y el relleno deben usar propiedades lógicas (inicio y fin en línea) en lugar de izquierda y derecha. Las fuentes necesitan probarse al tamaño del titular, porque muchas tipografías latinas de display no tienen versión árabe y el respaldo cambia el peso visual.
Prueba la vista RTL en un dispositivo real con texto real. Una maquetación reflejada que parece correcta con texto de relleno puede romperse cuando el titular árabe verdadero se parte de otra manera.
¿Qué herramientas tienen sentido para una landing page en WordPress?
Tienes tres opciones honestas. Construirla de forma nativa en el Editor de sitios con patrones, que da la página más ligera y el máximo control, pero exige más de ti. Usar un constructor visual como Divi, que acelera la maquetación a cambio de algo de peso en la página. O generar un primer borrador con un constructor de sitios con IA y reconstruir a mano las partes importantes.
Desconfía de cualquier herramienta que prometa una página terminada y con conversiones a partir de un solo prompt. La estructura generada es un punto de partida razonable para el orden de las secciones y los textos provisionales. Rara vez es un buen diseño final, y el código suele necesitar limpieza antes de que un cliente pueda mantenerlo.
Si la página vive fuera de WordPress, un constructor alojado como Framer o Webflow es una opción legítima para una campaña que durará seis semanas y después desaparecerá. Elige según cuánto tiempo debe vivir la página y quién la va a editar, no según la demo.
¿Cómo probar y mejorar la página después del lanzamiento?
El lanzamiento es el inicio de la medición. Configura un evento de conversión, conéctalo a tu analítica y comprueba que los envíos del formulario se registran antes de enviar tráfico. Una página que no puede informar de sus propios resultados no se puede mejorar.
Cambia una cosa a la vez. Primero el titular, porque tiene el mayor efecto, después el texto del botón y por último el orden de las pruebas. Mantén cada prueba el tiempo suficiente para reunir un número significativo de conversiones, en lugar de detenerla al primer día prometedor. Con una audiencia pequeña, una prueba puede tardar semanas, y no pasa nada. La paciencia evita los falsos ganadores.
Dos tareas de mantenimiento se olvidan con facilidad. Si la página existe solo para campañas de pago, decide si debe indexarse, porque una copia pobre de tu oferta puede competir con tu página principal. Y si el formulario recoge datos personales, añade el texto de consentimiento que exija tu región antes del lanzamiento, no después de la primera queja.
¿Qué deberías hacer esta semana?
Abre una plantilla en blanco en el Editor de sitios y construye solo el hero, con textos reales y un botón. Después compruébalo en el móvil y mide su LCP. Crea un patrón a partir de él, para que la próxima página de cliente empiece con una sección probada en lugar de un lienzo vacío.