Cómo pasar tu landing de Elementor a Gutenberg sin perder el diseño

Pasar Landing Page de Elementor a Gutemberg

¿Tienes una landing hecha con Elementor que se ve bien pero va pesada en móvil? Aquí tienes una guía paso a paso, sin complicaciones, para replicarla en Gutenberg (editor nativo de WordPress) manteniendo el mismo look y consiguiendo una web más ligera y fácil de mantener.

Qué vas a conseguir

Mismo diseño (o mejor) pero con menos “peso” y menos líos.
Apertura más rápida en móvil (mejor sensación y menos rebote).
Una landing que tu equipo puede editar sin depender de maquetadores.

Antes de empezar (2 minutos)

Entra a tu WordPress con usuario Administrador.
Ten a mano: logo, tipografías que usas, colores de marca, imágenes originales.
No desactives Elementor aún. Vamos a replicar la página primero y luego haremos el cambio.

Paso 1 — Duplica tu landing como borrador (sin tocar la original)

Crea una página nueva (“Copia Landing – Gutenberg”) y déjala en Borrador.
Abre la landing original en otra pestaña: la tendrás de referencia.

Objetivo: trabajar tranquilos. La web pública seguirá igual hasta el final.

Paso 2 — Traza la estructura en Gutenberg (esqueleto)

Piensa en secciones, no en “piezas sueltas”. Usa estos bloques nativos:

Hero (encabezado grande): Grupo → Encabezado, Párrafo, Botón.
Beneficios (3–4 puntos): Columnas (3) → dentro, Encabezado + Párrafo/Lista.
Prueba social: Citas (testimonios) o logos en Galería.
Cómo funciona: Lista numerada con 3–4 pasos.
FAQ: Detalles (acordeón nativo).
CTA final: Grupo con Encabezado corto + Botón.

Regla de oro: una idea por sección. Así todo respira y se entiende rápido.

Paso 3 — Copia el estilo (colores, tipografías, espacios)

Colores: aplica tu color principal al botón y titulares.
Tipografías: usa máximo 2 (títulos y texto).
Espacios: deja aire. Mejor menos cosas, más grandes.

Si tu tema lo permite, define estos estilos en el Editor del sitio → Estilos. Así todo quedará coherente sin plugins.

Paso 4 — Sustituciones típicas de Elementor → Gutenberg

Acordeones → bloque Detalles (ligero, sin scripts).
Carruseles/Sliders → Galería fija o 3 columnas (ligero y estable).
Iconos → imágenes SVG simples o emojis; no metas librerías enteras.
Separadores/espaciadores → usa el bloque Separador y márgenes del bloque.

¿Efectos tipo “fade” y “parallax”? Mejor quitarlos o dejarlos muy sutiles. La velocidad manda.

Paso 5 — Copia el contenido (titulares, textos, imágenes)

Titular: mismo texto, más corto si puedes.
Botón: acción clara (Reservar | Pedir presupuesto | Comprar).
Imágenes: súbelas al tamaño real de visualización (no gigantes). Si el hero mide 1200×700, exporta así, no a 4000 px.

Consejo rápido: intenta que la imagen principal pese < 250 KB.

Paso 6 — Botones y anclas (que se pulsen de verdad)

Botón del hero y del final apuntan a la misma acción (teléfono, WhatsApp, reserva o formulario).
Si el formulario está más abajo, crea un enlace ancla (el botón baja directamente hasta él).

Paso 7 — Formularios (sin romper nada)

¿Usas Contact Form 7 / Fluent / Gravity? Mantén el plugin y solo inserta su bloque en Gutenberg.
Comprueba que el envío llega a tu email. Haz una prueba real (pon “PRUEBA” en el nombre).

Paso 8 — Afinado visual (10 minutos que marcan la diferencia)

Tamaños: haz los títulos un poco más grandes en móvil y los párrafos más legibles.
Botón: grande, con buen contraste y texto en negrita.
Listas: si quieres check ✅, usa un SVG o el emoji directo (no códigos raros).

Paso 9 — Revisión en móvil real

Desde tu teléfono:

¿Entiendes qué se ofrece en 3 segundos?
¿Ves el botón sin hacer scroll?
¿Se lee sin zoom? Si no, sube un poco el tamaño de letra.

Pídele a dos personas que no sepan de tu negocio que entren y te digan:

“¿Qué vendes?” 2) “¿Qué harías ahora?” (si no lo tienen claro, mejora el titular o el botón).

Paso 10 — Publica sin cortes (cambio seguro)

Cuando el borrador en Gutenberg esté listo, cópialo a una URL temporal (ej. /landing-nueva).
Comprueba todo de nuevo (móvil, formulario, enlaces).
Cambia el enlace de tus campañas/menú para que apunten a la nueva landing.
No desinstales Elementor aún; puede estar en otras páginas.
A la semana, si todo va bien, ya podrás limpiarlo con calma.

Antes / Después (qué deberías notar)

Antes (Elementor)

Más “efectos”, pero más lento en móvil.
Cambiar un texto da pereza (demasiadas capas).
Te planteas “¿por qué a veces se rompe algo al tocar?”.

Después (Gutenberg)

Mismo diseño o más limpio; abre más rápido.
Editar es directo (menos piezas por medio).
Todo consistente: misma tipografía, mismos botones, misma estructura.

Checklist visual (marca y publica)

Tengo la nueva landing en borrador (Gutenberg).
Mismo look: colores, fuentes, logos, espacios.
Hero claro + botón visible arriba.
Beneficios en 3–4 puntos (sin jerga).
Prueba social (2 reseñas o 4 logos).
Proceso en 3–4 pasos.
FAQ con 4–6 dudas reales.
Imágenes al tamaño justo (< 250 KB la principal).
Botones con acción única (tel/WhatsApp/reserva).
Prueba en móvil (tú y dos personas más).
Publico en /landing-nueva y cambio enlaces.
A la semana, limpieza (plugins/constructor que ya no se usan).

Mini-FAQ (problemas típicos)

“Se me rompen iconos al quitar Elementor.”
Usa SVG simples o emojis. Evita librerías pesadas solo para un check.

“El acordeón ya no se abre.”
Cámbialo por el bloque nativo Detalles (funciona igual y pesa menos).

“El slider ya no está.”
¿De verdad te hacía vender? Si no, pásalo a 3 columnas con fotos; es estable y rápido.

“¿Puedo migrar solo la landing?”
Sí. Es lo recomendable. El resto lo vas pasando cuando te venga bien.

Ideas creativas para que tu nueva landing rinda aún más

Oferta única por tiempo limitado (pero real).
Prueba social local: menciona barrio (Eixample, Gràcia…), fotos reales.
Botón “hablar ahora”: WhatsApp o llamada directa.
Sección “Antes/Después” si tu servicio lo permite (las comparativas venden).

Glosario rápido (sin tecnicismos)

Gutenberg: el editor de bloques que viene de serie en WordPress.
Bloque: pieza de contenido (título, párrafo, imagen, botón…).
Patrón: un conjunto de bloques ya maquetados (por ejemplo, un “hero” listo).
Hero: la franja de arriba con el titular grande y el botón principal.
CTA: “Call To Action”; el botón con la acción que quieres (Reservar, Llamar…).
Acordeón / FAQ: lista de preguntas que se despliegan al hacer clic.
SVG: imagen vectorial muy ligera (ideal para iconos).
Carga rápida: que en móvil “se vea ya” sin hacerte esperar.
Landing: página hecha para una sola cosa (captar una acción).

Plantilla de secciones (para que la pegues tal cual)

Hero: Titular + Subtítulo + Botón
Beneficios (3–4)
Prueba social (2 reseñas/4 logos)
Cómo funciona (4 pasos)
FAQ (4–6 preguntas)
CTA final (mismo botón del hero)

Texto del botón (elige uno): “Reservar ahora”, “Pedir presupuesto”, “Hablar por WhatsApp”.

Cierre: haz el cambio con cero sustos

Replicar tu landing de Elementor en Gutenberg no es “tirar tu trabajo”; es hacerlo más ligero y duradero. Empieza con una sola página, comprueba que abre rápido y convierte, y después decide si migras más.

Si te atascas en algún paso, te echo una mano con un “Plan Renove”: replico el diseño en Gutenberg, dejo los botones perfectos en móvil y la página lista para vender sin peso extra.