1. Primeros pasos
HTML to Elementor funciona directamente en tu navegador, sin instalación ni registro. Solo necesitas tener HTML que quieras convertir y acceso a Elementor en tu WordPress.
- Abre htmltoelementor.es en tu navegador.
- Verás el área de texto con el placeholder "Pega aquí tu código HTML…"
- Pega tu HTML o usa el botón "Cargar Ejemplo" para probar.
- Pulsa "Analizar HTML" (o espera el debounce automático).
- Los resultados aparecerán a continuación: información, preview, CSS y JSON.
2. Conversión básica
La herramienta analiza el árbol DOM de tu HTML y mapea cada elemento a su widget de Elementor equivalente. Cuanto más semántico sea tu HTML, mejor será el resultado.
Ejemplo de entrada
<section class="hero" style="background:#667eea;padding:60px 20px;text-align:center;">
<h1 style="color:white;font-size:48px;">Mi Landing Page</h1>
<p style="color:rgba(255,255,255,0.9);">Una descripción clara de tu propuesta de valor.</p>
<a href="#contacto" style="background:white;color:#667eea;padding:14px 32px;border-radius:8px;">
Empezar ahora
</a>
</section>Qué obtienes
- CSS Generado: reglas CSS limpias listas para añadir a tu tema.
- JSON de Elementor: estructura jerárquica con Container, Heading, Text Editor y Button.
- Vista previa: cómo se verá el diseño en el navegador.
3. CSS y estilos
El motor CSS de la herramienta soporta tres fuentes de estilo con cascada de prioridad:
- Estilos inline (
style="...") — máxima prioridad - Bloques
<style>en el propio HTML — media prioridad - Estilos heredados del elemento padre — mínima prioridad
Propiedades CSS mapeadas
| Propiedad CSS | Mapeado a Elementor |
|---|---|
color | Color de texto |
font-size | Tamaño de fuente |
font-weight | Grosor de fuente |
font-family | Familia tipográfica |
text-align | Alineación de texto |
line-height | Altura de línea |
letter-spacing | Espaciado entre letras |
background-color | Fondo del container |
background-image | Imagen de fondo |
padding / margin | Espaciado interno/externo |
border-radius | Radio de borde |
width / height | Dimensiones |
display: flex | Flexbox Container |
flex-direction | Dirección del flex |
justify-content / align-items | Alineación flex |
gap | Separación entre elementos |
opacity | Opacidad del container |
4. Widgets soportados
| Etiqueta HTML | Widget Elementor | Notas |
|---|---|---|
h1 – h6 | Heading | Nivel HTML preservado |
p, span, strong… | Text Editor | Contenido inline convertido |
img | Image | src y alt preservados |
a (con texto) | Button | href y texto preservados |
hr | Divider | — |
div, section, article… | Container | Flex o bloque según CSS |
svg | HTML Widget | SVG incrustado directamente |
figure + img | Image | Promoción automática |
| Elementos con solo contenido inline | Text Editor | Evita Container innecesario |
iframe, video, canvas… | HTML Widget | Con aviso de revisión manual |
form | HTML Widget | Con aviso: usar widget Form nativo |
5. Importar en Elementor
Una vez tengas el JSON generado, hay dos formas de importarlo en Elementor:
Método A: Pegar desde otro sitio (recomendado)
- Copia el JSON completo (botón "Copiar JSON" en la herramienta).
- Ve a tu WordPress → abre la página con Elementor.
- Haz clic en el icono de menú ☰ (arriba a la izquierda del editor).
- Selecciona "Pegar desde otro sitio".
- Pega el JSON con Ctrl+V / Cmd+V y confirma.
Método B: Dentro de un Container existente
- Haz clic derecho en cualquier sección o Container en el editor.
- Selecciona "Pegar desde otro sitio" en el menú contextual.
- Pega el JSON y confirma.
6. Solución de problemas
- El JSON no se importa en Elementor
- Asegúrate de copiar el JSON completo incluyendo los corchetes exteriores
[{…}]. Un JSON incompleto produce error silencioso. - Los estilos no se aplican tras importar
- Los estilos en línea se convierten a clases CSS. Añade el CSS generado en Elementor → Personalizar → CSS adicional.
- Las imágenes aparecen rotas
- Las rutas relativas (
./img/foto.jpg) no funcionan fuera de su servidor original. Sube las imágenes a tu WordPress y actualiza las URLs. - Los formularios no funcionan
- Los
<form>se convierten a HTML Widget con un aviso. Para formularios funcionales, usa el widget Form nativo de Elementor Pro. - Los iconos SVG se ven muy grandes
- La herramienta normaliza SVGs sin dimensiones extrayendo el viewBox. Si aún se ven grandes, añade
widthyheightal SVG en el HTML original.
7. Limitaciones conocidas
Ser honestos sobre las limitaciones ayuda a establecer expectativas reales:
- CSS externo (archivos
.cssenlazados) no se carga — solo<style>e inline. - CSS Grid no se mapea a Elementor Grid (aún en desarrollo).
- Pseudo-clases (
:hover,:focus) y media queries no se convierten. - JavaScript incluido en el HTML se descarta por seguridad.
- Animaciones CSS (
@keyframes) no se mapean a Motion Effects de Elementor. - Imágenes con rutas relativas necesitan actualización manual tras importar.
- Estructuras HTML muy complejas (>5 niveles de anidamiento) pueden requerir ajuste manual.
8. Preguntas frecuentes
Las dudas más habituales sobre el uso de la herramienta.
General
Sí, es completamente gratis y sin ningún límite. No hay cuotas mensuales, cuentas de pago, ni restricciones por número de conversiones. Puedes convertir todo el HTML que necesites, tantas veces como quieras.
No. La herramienta funciona directamente en tu navegador sin ningún tipo de registro. No necesitas email, contraseña ni cuenta de ningún tipo. Abres la página y empiezas a convertir.
Funciona con la gran mayoría de HTML estándar. Los mejores resultados se obtienen con HTML semántico y estilos inline o en bloque <style>. El HTML que usa CSS de archivos externos o frameworks como Tailwind/Bootstrap necesitará algún ajuste manual, ya que esos estilos no se cargan.
Sí. El JSON generado es compatible con Elementor Free y Elementor Pro. Los widgets utilizados (Heading, Text Editor, Image, Button, Container, HTML) están disponibles en la versión gratuita. Solo los formularios requieren Elementor Pro para funcionalidad completa.
Técnica
Para aprovechar los Flexbox Containers necesitas la versión 3.6 o superior con la opción activada en Elementor → Ajustes → Funcionalidades → Flexbox Container.
Para el resto de widgets (Heading, Text, Image, Button…) funciona con cualquier versión de Elementor Free o Pro.
Actualmente no. CSS Grid no se mapea directamente a ningún sistema nativo de Elementor. Los elementos dentro de un grid se convierten como contenedores individuales. El soporte de Grid está en el roadmap.
Sí. Los estilos inline (style="...") son la fuente de mayor prioridad en el motor CSS. La herramienta los parsea y mapea a los controles nativos de Elementor cuando es posible. Los estilos sin equivalente nativo se convierten en clases CSS en el bloque "CSS Generado".
Los bloques <script> y atributos de evento (onclick, etc.) se eliminan automáticamente por seguridad. Si necesitas funcionalidad JS en Elementor, usa el widget HTML personalizado directamente.
Privacidad
No. Todo el procesamiento ocurre en tu navegador (100% client-side). Tu código HTML nunca se envía a ningún servidor. El historial se guarda únicamente en el localStorage de tu propio dispositivo.
Sí. Dado que el procesamiento es 100% local en tu navegador, tu código confidencial nunca sale de tu dispositivo. No tenemos acceso a lo que conviertes.
Usamos localStorage para guardar preferencias (tema claro/oscuro) e historial, todo localmente. No usamos cookies de terceros ni analytics externos.
Soporte
La forma más rápida es usar el botón "Feedback" en la herramienta. También puedes escribir a Hola@pezzisolutions.es con una descripción del problema y el HTML que lo reproduce.
¡Claro! Usa el botón "Feedback" para votar funcionalidades del roadmap o proponer ideas nuevas. Los supporters de Ko-fi tienen prioridad en la selección de features.
Para proyectos con necesidades específicas, puedes contactar en Hola@pezzisolutions.es o visitar pezzisolutions.es.