Elementor MCP: convertir HTML creado con IA en páginas de Elementor editables

Elementor ya tiene una forma oficial de convertir una página HTML diseñada por una IA en una página de Elementor real y editable: el Elementor MCP, que llegó con Elementor 4.3. Lo configuramos en un sitio de WordPress limpio, reconstruimos con él una landing page de diez secciones y anotamos todo lo que nos hizo tropezar. Este es ese resumen: qué es, cómo conectarlo, el flujo de trabajo que funciona y los pequeños detalles que conviene conocer antes de empezar.

Qué es el Elementor MCP

MCP (Model Context Protocol) es una forma estándar de que las herramientas de IA llamen a acciones de otro software. El Elementor MCP pone las acciones de creación de páginas de Elementor a disposición de la herramienta de IA que ya usas —Claude Code, Claude Desktop, Codex, Cursor o cualquier otro cliente MCP—, de modo que el asistente puede crear páginas, añadir y dar estilo a elementos, gestionar tus clases y variables globales y guardar el resultado dentro de tu propio sitio. No se pega ni se importa nada a mano: la IA construye directamente en Elementor, y todo lo que crea es un elemento normal que luego puedes seleccionar y editar en el panel.

Construye con los elementos atomic más recientes de Elementor —contenedores Flexbox, Div block y Grid, Heading, Paragraph, Button, Image, SVG, Tabs, Accordion y otros—, con estilos aplicados mediante clases y variables globales en lugar de ajustes por widget. Es lo más importante que debes entender antes de empezar, porque define tanto los requisitos como el flujo de trabajo.

Qué necesitas

• WordPress 6.8 o posterior y Elementor 4.3 o posterior. El plugin gratuito basta para conectar y construir; Elementor Pro y el plugin gratuito Angie añaden más capacidades, como formularios, plantillas de tema y widgets personalizados.
• El Atomic Editor activado. En los sitios instalados desde el principio con Elementor 4 suele estar activo. En sitios más antiguos actualizados a la 4.3 empieza desactivado, y las herramientas de construcción del MCP siguen bloqueadas hasta que lo actives en Elementor → Settings → Atomic Editor.
• Una herramienta de IA compatible con MCP. Elementor no cobra por el MCP; lo que pagas es lo que tu herramienta de IA cobre por el trabajo.

Conectarlo lleva alrededor de un minuto

1. En WordPress, abre Elementor → Elementor MCP y haz clic en Enable MCP access.
2. Elige tu herramienta: Claude Code, Claude Desktop, Codex, Cursor u Other.
3. Marca la casilla que confirma que se creará una contraseña de aplicación para el sitio.
4. Haz clic en Generate Prompt, cópialo y pégalo en tu herramienta de IA. Se encarga de configurar la conexión; algunas herramientas necesitan reiniciarse después.

La conexión actúa con los permisos del usuario de WordPress que la creó, así que una cuenta de editor solo puede hacer lo que puede hacer un editor. Puedes revocar una conexión concreta en Usuarios → Perfil → Contraseñas de aplicación, o desactivar el MCP para todo el sitio desde la misma pantalla de Elementor.

El flujo de trabajo que funciona

La demostración de Elementor y nuestra prueba apuntan al mismo orden de trabajo. La idea importante es que cada paso le da al siguiente una referencia fija, de modo que la IA copia decisiones en lugar de inventarlas. Si quieres verlo de principio a fin, el webinar de Elementor sobre este flujo (unos 45 minutos, en YouTube) sigue a un product manager del equipo del editor mientras construye una página completa de esta manera.

1. Define primero el aspecto. Explora direcciones con imágenes rápidas y luego pide a la IA que escriba la página en HTML y CSS sencillos. El HTML es barato de cambiar: aquí es donde iteras el diseño, los textos y los colores.
2. Sube tus imágenes. Coloca las imágenes de la página en la Biblioteca de medios antes de construir, para que la IA pueda usarlas en lugar de improvisar.
3. Crea el sistema de diseño. Pide a la IA que lea el HTML y cree tus colores y fuentes como variables globales, y tus estilos repetidos —botones, títulos de sección, tarjetas— como clases globales. Mantenlo ligero: en la propia demostración de Elementor, la primera pasada generó más de cien clases, que redujeron a unas sesenta de uso general.
4. Construye una sección cada vez, con una instrucción breve como «construye la sección de precios a partir del HTML con nuestras clases». Los pasos pequeños son más fáciles de revisar y más baratos de rehacer.
5. Revisa cada sección en el editor y en ancho móvil antes de seguir. El equipo de Elementor deja claro que el resultado sigue necesitando una revisión final de una persona: en su demostración, una imagen necesitó ajustes en móvil y un hero con pestañas necesitó retoques.

Siete cosas que aprendimos en la prueba

Usamos Elementor 4.3.5 en una instalación nueva de WordPress, sin Pro ni Angie, y reconstruimos una landing page con un hero, una franja de logos, seis tarjetas de funciones, cifras, un testimonio, tres planes de precios, una sección de preguntas frecuentes, una franja de llamada a la acción y un pie de página. El resultado quedó muy cerca del original. Estos son los detalles que nos costaron tiempo:

• Subir iconos SVG requiere un ajuste. El elemento SVG solo muestra iconos que están en la Biblioteca de medios, y WordPress rechaza por defecto las subidas de SVG. Activa el ajuste Enable Unfiltered File Uploads de Elementor y sube los iconos desde el selector de medios de Elementor.
• Los iconos de contorno pueden salir rellenos. El elemento SVG asigna al relleno del icono el color de texto actual, así que los iconos solo de trazo —el estilo que usan la mayoría de las páginas generadas con IA— se ven como formas sólidas. Dar al elemento SVG un color de texto transparente recuperó los contornos.
• El orden de las clases es su prioridad. Cuando dos clases globales definen la misma propiedad, gana la que está más arriba en la lista. Las clases se listan en el orden en que se crearon, así que una clase de botón pequeño creada después de la clase de botón base perdería su relleno más pequeño. Pedimos a la IA que moviera las clases modificadoras por encima de las clases base antes de construir.
• Atención a los estilos que se descartan en silencio. La mayoría del CSS no compatible se notifica como advertencia en la respuesta de la herramienta: colores de borde por lado, un degradado radial con tamaño, un espaciado de filas por separado. Pero algunas cosas se perdieron sin aviso: una palabra destacada dentro de un titular perdió su color, y una regla anidada que daba estilo a un span dentro de un precio no se aplicó. Para detectarlo hay que mirar la página, no solo la respuesta.
• Los elementos de texto tienen etiquetas fijas. El elemento Paragraph solo acepta p o span, así que una cita marcada como <blockquote> se convierte en un párrafo.
• Planifica el indicador del acordeón. En nuestra prueba, el indicador de abrir y cerrar de las preguntas frecuentes no apareció, tanto si dejábamos vacío el hueco del icono como si lo omitíamos por completo. Según las propias instrucciones de la herramienta, ese hueco contiene un elemento SVG, así que dale un icono subido o añade el indicador después en el editor.
• Usa el enlace de vista previa para revisarte. El MCP puede crear una URL temporal de vista previa del borrador actual. Pedir a la IA que la mire después de cada sección es la forma más barata de detectar problemas a tiempo.

Para hacerse una idea de la escala, la página entera llevó unas treinta llamadas a herramientas —dos fallaron por errores nuestros (un nombre de elemento duplicado y una etiqueta que el elemento Paragraph no acepta) y hubo que reenviarlas— y aproximadamente un cuarto de hora de trabajo del asistente en un servidor de pruebas local lento. Además, cada sesión nueva empieza leyendo la lista de herramientas que ofrece el MCP, que es bastante texto, así que las sesiones cortas y bien acotadas salen más económicas que una sola muy larga.

Cuándo encaja mejor una vía más sencilla

El MCP es la opción más potente si ya trabajas con una herramienta de programación con IA y quieres una página construida sobre un sistema de diseño en condiciones. Si solo necesitas pegar un bloque en una página existente, no usas una herramienta de IA o necesitas el resultado en un sitio que sigue con el editor clásico, un convertidor que genere widgets clásicos es el camino más sencillo; eso es lo que hace el convertidor de este sitio, en local en tu navegador. Los dos también se combinan bien: el HTML terminado de tu herramienta de IA es la misma entrada en ambos casos.

En resumen

Diseña en HTML, sube tus recursos, crea un sistema de diseño pequeño y luego deja que el MCP construya sección por sección mientras revisas cada una. El Elementor MCP convierte un buen diseño HTML en una estructura de Elementor nativa y editable, y el tiempo que dedicas a la preparación es lo que hace que el resultado quede limpio.

Esta guía es independiente y no está afiliada a Elementor. Refleja Elementor 4.3.5, probado en octubre de 2026; algunos detalles pueden cambiar en versiones posteriores.