HTML to Elementor
Volver a los tutoriales

HTML to Elementor JSON: export and import templates

Las plantillas de Elementor se almacenan como JSON. Eso significa que una página HTML se puede convertir en un archivo de plantilla JSON que importas como cualquier otra plantilla de Elementor: portátil, reutilizable e independiente del portapapeles. Así es como funciona la ruta JSON y cuándo elegirla.

Dos formatos de exportación, los mismos componentes

Después de convertir HTML, puedes exportar de dos maneras. Copiar datos de Elementor coloca un contenido JSON en el portapapeles para pegarlo de inmediato en un editor abierto. Descargar una plantilla JSON guarda esa misma estructura como un archivo .json. Los componentes son idénticos; la diferencia es que un archivo es portátil y un contenido del portapapeles no lo es.

Cuándo elegir el archivo JSON

  • Reutilización entre sitios. Importa el mismo archivo en cualquier instalación de WordPress con Elementor.
  • Control de versiones. El archivo es JSON plano, por lo que puedes guardarlo en un repositorio, comparar dos exportaciones o archivar un diseño tal como estaba en una fecha determinada.
  • Compartir. Puedes enviar un archivo a un colega o cliente; no puedes enviarles tu portapapeles.
  • Crear una biblioteca. Una carpeta de plantillas JSON con nombre se convierte en una biblioteca de componentes a partir de la cual ensamblar páginas futuras.

Cómo importar una plantilla JSON en Elementor

  1. Convierte tu HTML y haz clic en Descargar plantilla JSON.
  2. En WordPress, abre Plantillas → Plantillas guardadas.
  3. Haz clic en Importar plantillas y elige el archivo .json.
  4. La plantilla aparece en tu biblioteca; insértala en cualquier página desde el botón de la biblioteca de Elementor.

Qué hay dentro del JSON

El archivo describe un árbol de elementos de Elementor: contenedores con su diseño, fondo, borde y espaciado, y widgets con su contenido y ajustes de estilo. Como es el formato nativo de Elementor, todo se importa como widgets editables, no como un bloque HTML. Los encabezados, textos, imágenes, botones, cajas de iconos, cajas de imagen y cuadrículas llegan listos para editar.

Una nota práctica: las referencias a imágenes en el JSON son URL, no archivos incrustados. Si tu fuente usó URL reales de la biblioteca de medios, se resuelven al importar; las rutas locales y las imágenes en Base64 se convierten en marcadores de posición vacíos que rellenarás después. Subir primero las imágenes es el único cambio que hace que una plantilla JSON se importe de forma limpia.

Haz que las plantillas sean independientes del sitio antes de guardarlas

Una plantilla que codifica colores y fuentes de forma fija se verá mal en el siguiente sitio donde la importes. Antes de exportar un bloque que piensas reutilizar, conviértelo con colores del sitio y tipografía del sitio. La plantilla adopta entonces la paleta y las fuentes que defina el sitio de destino, de modo que el mismo JSON se vea nativo en cualquier lugar donde lo importes.

Mantén la estructura limpia

Una buena plantilla reutilizable es un contenedor de nivel superior con un árbol poco profundo en su interior. Antes de exportar, revisa el mapa de estructura: una profundidad de anidamiento baja y filas de tarjetas que sean una cuadrícula que contenga widgets directamente —en lugar de que cada tarjeta esté envuelta en su propio contenedor— hacen que la plantilla sea mucho más fácil de rediseñar después de la importación. Una entrada limpia produce un JSON limpio.

Copiar o descargar: una regla rápida

Pega los datos del portapapeles para una inserción puntual en una página que estás editando ahora mismo. Descarga el archivo JSON para cualquier cosa que vayas a importar más de una vez, compartir o conservar. Misma conversión, dos destinos: elige según si necesitas portabilidad.