De HTML a JSON de Elementor: exportar e importar plantillas

Las plantillas de Elementor se guardan como JSON. Eso significa que una página HTML puede convertirse en un archivo de plantilla JSON que importas como cualquier otra plantilla de Elementor: portátil, reutilizable e independiente del portapapeles. Así funciona la vía JSON y así sabrás cuándo elegirla.

Dos formatos de exportación, los mismos componentes

Después de convertir el HTML, puedes exportar de dos maneras. Copiar datos de Elementor pone un contenido JSON en tu portapapeles para pegarlo de inmediato en un editor abierto. Descargar 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 el contenido del portapapeles no.

Cuándo conviene 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, así que puedes guardarlo en un repositorio, comparar dos exportaciones o archivar un diseño tal como era en una fecha concreta.
• Compartir. Puedes enviar un archivo a un compañero o a un cliente; no puedes enviarle tu portapapeles.
• Crear una biblioteca. Una carpeta de plantillas JSON con nombre se convierte en una biblioteca de componentes con la que montar 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 sus ajustes de estilo. Como es el formato nativo de Elementor, todo se importa como widgets editables, no como un bloque HTML. Títulos, textos, imágenes, botones, cajas de icono, cajas de imagen y grids llegan listos para editar.

Una nota práctica: las referencias a imágenes en el JSON son URL, no archivos incrustados. Si tu código fuente usaba URL reales de la Biblioteca de medios, se resuelven al importar; las rutas locales y las imágenes en Base64 se convierten en marcadores vacíos que rellenas después. Subir antes las imágenes es el cambio que, por sí solo, hace que una plantilla JSON se importe limpiamente.

Haz que las plantillas sean independientes del sitio antes de guardarlas

Una plantilla con colores y fuentes fijos en el código se verá mal en el siguiente sitio en el que la importes. Antes de exportar un bloque que piensas reutilizar, conviértelo con Heredar los colores del sitio de destino y Heredar las fuentes globales del sitio de destino. Así la plantilla adopta la paleta y las fuentes que defina el sitio de destino, y el mismo JSON se ve nativo allí donde lo importes.

Mantén la estructura limpia

Una buena plantilla reutilizable es un único Contenedor de nivel superior con un árbol poco profundo dentro. Antes de exportar, revisa el mapa de estructura: una profundidad de anidamiento baja y filas de tarjetas que sean un Grid con los widgets directamente dentro, en lugar de cada tarjeta envuelta en su propio contenedor, hacen que la plantilla sea mucho más fácil de reestilizar después de importarla. Una entrada limpia produce un JSON limpio.

La forma real del archivo

No tiene ningún misterio, y conocer los campos hace que el formato intimide mucho menos. Una plantilla descargada es un único objeto JSON con cinco claves:

• content: el árbol de elementos, es decir, contenedores y widgets, cada uno con sus ajustes.
• page_settings: los ajustes a nivel de página, vacíos en un bloque convertido.
• version: "0.4", la versión del esquema de plantillas de Elementor.
• title: lo que hayas escrito en el campo del título de la plantilla; por defecto, «HTML Converted Page».
• type: "page".

Ese valor de type es el que vale la pena entender. Declarar la plantilla como página y no como sección hace que llegue a Plantillas guardadas como plantilla de página; puedes seguir insertándola en cualquier página existente desde el botón de la biblioteca, así que no pierdes nada, pero además puedes crear directamente una página en blanco a partir de ella.

Por qué el contenido del portapapeles es distinto

Si examinas lo que el botón Copiar pone en tu portapapeles, verás que no es el mismo objeto. Lleva type: "elementor", un siteurl y el array de elementos: ni versión ni título.

Ese es el formato de pegado de Elementor, no su formato de plantilla. Cuando haces clic derecho y eliges Pegar desde otro sitio, el editor busca exactamente esa marca para reconocer el portapapeles como datos de Elementor y no como texto plano. Por eso el pegado funciona sin ningún paso de importación, y también por eso no puedes guardar el contenido del portapapeles en un archivo e importarlo: los dos formatos no son intercambiables, aunque describan los mismos componentes.

JSON plano significa control de versiones de verdad

Como el archivo es JSON legible y no un paquete binario, se comporta como código fuente, lo que permite algunas cosas realmente útiles que rara vez se hacen con secciones de página:

• Comparar dos exportaciones. Convierte un bloque, cambia el código fuente, vuelve a convertir y compara los archivos para ver exactamente qué ajustes han cambiado. Es, con diferencia, la forma más rápida de entender qué cambia realmente una opción de conversión concreta.
• Archivar un diseño en un momento dado. Un archivo JSON con fecha es un registro exacto de cómo era una sección, recuperable mucho después de que la página publicada se haya editado hasta quedar irreconocible.
• Revisar antes de importar. Busca http en el archivo y verás todas las URL de imágenes a las que hace referencia, lo que te dice al instante si se importará limpiamente en otro sitio.

Esto último lleva diez segundos y detecta el fallo de importación más habitual: una plantilla llena de URL que apuntan a un sitio al que el destino no puede acceder.

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 en ese momento. Descarga el archivo JSON para todo lo que vayas a importar más de una vez, compartir o conservar. La misma conversión, dos destinos: elige según necesites o no portabilidad.