HTML to Elementor
Ayuda

Convierte páginas HTML en contenido listo para Elementor

Esta herramienta convierte páginas HTML existentes en contenido que puedes pegar en Elementor, o descargar como archivo de plantilla para importar. Todo se ejecuta en tu navegador.

Inicio rápido

Abre la herramienta, suelta tu HTML, elige un método y pulsa convertir.

  1. Abrir la herramientaUsa «Abrir la herramienta» en la navegación.
  2. Añadir HTMLSuelta un archivo .html/.htm o pega HTML directamente.
  3. Elegir un métodoElige alta fidelidad para mantener el aspecto, o componentes nativos para seguir editando en Elementor.
  4. ConvertirPulsa convertir y la herramienta produce contenido listo para Elementor.
  5. A ElementorPega directamente, o descarga el archivo de plantilla e impórtalo en la biblioteca.

Modo de alta fidelidad

Conserva el aspecto original; ideal para trasladar una página por completo.

  • Bueno para páginas de detalle, de aterrizaje y diseños complejos.
  • Es lo más parecido a la página original.
  • Desventaja: gran parte del contenido queda en un bloque, por lo que la edición por elemento es más limitada.

Modo de componentes nativos

Divide la página en encabezados, texto, imágenes, botones y contenedores de Elementor.

  • Bueno cuando seguirás ajustando el contenido y el estilo tras importar.
  • Encabezados, texto, imágenes y botones son más fáciles de editar por separado.
  • Las animaciones muy complejas o los efectos de terceros pueden requerir ajustes manuales.

Cómo elegir los ajustes nativos

Estas opciones afectan a lo fácil que es editar tras importar.

OpciónSignificadoRecomendación
Etiquetas de encabezadoControla los niveles H1/H2/H3.Para una página completa, organiza automáticamente para evitar un orden de encabezados desordenado.
ImágenesConserva los originales o crea espacios de imagen vacíos.Si vas a volver a subir imágenes, los marcadores son más prácticos.
URL de mediosGestiona URL de imagen incompletas, temporales o en línea.La opción segura por defecto reduce las imágenes fallidas o ausentes.
IconosCoincide con los iconos de Elementor o conserva el aspecto original.Usa clases de Font Awesome en el origen: se importan como iconos editables de la biblioteca de iconos.
Colores y fuentesConserva el original, o sigue el sitio de destino.Para coincidir con el nuevo sitio, sigue el sitio de destino.
Solo estructuraConserva la estructura y el espaciado sin rellenar el contenido.Bueno para páginas complejas: construye el esqueleto y luego rellénalo.
Mapeo avanzadoRevisa en qué componente se convierte cada bloque.Bueno cuando quieres decidir tú mismo cada bloque.
Mapa de estructuraPrevisualiza el árbol de componentes junto a la página y pasa el cursor para resaltar.Exporta solo un bloque o excluye las partes que no quieras.

Método A: pegar

La forma más rápida de entrar en la página de Elementor actual.

  1. Pulsa «Copiar datos de Elementor».
  2. Abre la página de edición de Elementor.
  3. Haz clic derecho en una zona vacía y elige «Pegar desde otro sitio».
  4. Tras pegar, revisa imágenes, iconos, espaciado y vista móvil.

Método B: archivo de plantilla

Guárdalo e impórtalo después desde la biblioteca de Elementor.

  1. Pulsa «Descargar plantilla JSON».
  2. Abre la biblioteca de plantillas de Elementor.
  3. Elige importar y sube el archivo descargado.
  4. Insértalo en la página, luego reemplaza imágenes y afina.

Conviene saber antes de empezar

La herramienta busca importaciones seguras, pero las páginas HTML y de Elementor difieren, así que las páginas complejas aún pueden necesitar una revisión.

  • Por seguridad, se limpian los scripts, enlaces peligrosos, recursos externos y envíos de formularios.
  • Los estilos conservados se limitan al contenido importado para que no afecten a otras áreas del sitio de destino.
  • Las URL de imagen incompletas, en línea o temporales se convierten en marcadores por defecto para evitar importaciones fallidas.
  • Las galerías y carruseles con imágenes no importables se separan para evitar perder imágenes.
  • Los menús, productos y listas de entradas dependen de los datos del sitio de destino y suelen requerir volver a seleccionarse en Elementor.
  • Para páginas muy complejas, empieza con alta fidelidad; para editar con facilidad, prueba nativo o solo la estructura.