La flexibilidad de la plantilla Divi para WordPress es sensacional. No solo podemos aprovechar los diseños (layouts) realizados con el divi builder en otras páginas del mismo sitio web sino que también podremos utilizar esos diseños exportándolos e importándolos en otra página de otro sitio web.
En este post vamos a aprender a coger una página que hayamos realizado con WordPress y el constructor de la plantilla Divi (divi builder), a exportarla en un archivo json y a importarla en otro sitio web que también esté realizado con WordPress y que utilice la plantilla Divi o el Divi builder.
Es decir, Divi incluye una herramienta para exportar / importar diseños (layouts). Vamos a aprender cómo exportar un diseño con Divi y a importarlo en otro sitio web que utilice la plantilla Divi o el Divi builder.
Esta funcionalidad es muy interesante para profesionales que se dedican al diseño web, ya que pueden reutilizar sus diseños en varios sitios web.
DESCUENTOS PLANTILLA DIVI
ÍNDICE DEL POST
1.- ¿Vamos a clonar una página en Divi?
Sí, vamos a clonar una página o diseño de Divi.
Pero si quieres utilizar dicha página o diseño en otra página del mismo sitio web, no hace falta que sigas este procedimiento.
Este procedimiento es el indicado para que puedas utilizar la página clonada en otro sitio web que también utilice Divi.
Para clonar un diseño realizado con el Divi builder y utilizarlo en otra página de ese mismo sitio web no tienes que exportar e importar el diseño con Divi, simplemente tendrás que guardar el diseño en la biblioteca y luego cargarlo desde la otra página.
2.- Condiciones de exportación e importación de página con Divi
Para exportar un diseño realizado con el constructor es necesario que estemos utilizando la plantilla Divi (que incluye el divi builder) o que estemos utilizando otra plantilla pero también usemos el plugin del divi builder.
Para importar un diseño previamente exportado será necesario que la web de destino utilice la plantilla Divi u otra plantilla pero tenga instalado el plugin Divi builder.
3.- Exportar diseño con Divi
Para exportar una página Divi iremos a la página en cuestión y haremos clic en un icono formado por una flecha que apunta hacia arriba y otra que apunta hacia abajo y que está situado en el lateral derecho del constructor.
Nuevo Divi builder: icono de exportar layout o plantilla Nota: Si usas el divi builder frontend, tienes que hacer clic en el icono en forma de círculo con tres puntos dentro, para que se muestre esta opción de exportación.
Antiguo Divi builder: Icono para exportar e importar páginas con Divi
Al hacer clic sobre el icono aparecerá una ventana emergente titulada “Portabilidad” con dos pestañas: Exportar e Importar
Haremos clic en la pestaña “Exportar” de la ventana emergente de la herramienta de exportar de Divi.
Te aparecerá un texto como este: “Exportar su Diseño de Divi Builder creará un archivo JSON que podrá importarse a un sitio web diferente.”
En el campo “Nombre del archivo exportado” pondremos el nombre con el que queremos exportar la página o diseño de Divi.
A continuación haremos clic en el botón “Exportar diseño de divi builder”
Nombre del diseño a exportar para reutilizar en otro sitio web
En este momento aparecerá una barra de progreso en la cual se reflejará la evolución de la exportación del diseño realizado con el Divi builder
Barra progreso al exportar una página con Divi
Una vez terminado el proceso de exportación nos aparecerá una ventana emergente para poder guardar el archivo json resultante.
Lo guardaremos en el escritorio para localizarlo rápidamente a la hora de importarlo.
4.- Importar diseño (layout) con Divi
Accederemos al sitio web en el cual queremos importar el diseño realizado con Divi. Crearemos una nueva página, le pondremos el título, activaremos el Divi builder haciendo clic en el botón “Usar el constructor Divi”.
A continuación haremos clic en el icono de “Importar / Exportar” con forma de flecha apuntado hacia arriba y hacia abajo que veíamos en el apartado 3.
Al hacer clic sobre el aparecerá otra vez la ventana emergente, pero en este caso haremos clic en la pestaña “Importar”.
Te aparecerá un texto explicativo como este: “Importar un archivo Diseño de Divi Builder exportado previamente sobrescribirá todo el contenido actual en esta página.”
Importar diseño de otra web con el divi builder
A continuación haremos clic en el botón: “ELIJA UN ARCHIVO” y en la ventana emergente seleccionaremos el archivo json que exportamos en el apartado 3.
El nombre de la página aparecerá en el rectángulo formado por una línea discontinua.
A continuación haremos clic en el botón “Importar diseño del divi builder” y comenzará el proceso de importación cuya evolución podrás ver en una barra de progresión.
Una vez importado el diseño, la página se recargará y ya aparecerá con la estructura de la página que teníamos en la otra web.
Nota: cuando importes un diseño el contenido actual de la página se sobrescribirá. Es decir, perderás el contenido actual de la página y obtendrás el contenido importado.
Nota: verás que antes de importar existe un checkbox que dice: “Descargar copia de seguridad antes de importar”. Si marcamos esta opción antes de importar el diseño WordPress realizará una exportación automática del diseño actual de la página (que podrás guardar) antes de sobreescribir el contenido con la importación del nuevo diseño.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, tengo el siguiente problema. Al importar un archivo JSON en Divi se realiza todo el proceso correctamente pero al terminar deberia recargarse la página importada pero lo que hace es reiniciar la importación y cuando llega al 100% se queda bloqueado y no recarga la pagina???
Hola Alfredo.
¿estás utilizando la última versión de la plantilla Divi? prueba con la última versión de la plantilla. Si ya la tienes, es posible que sea un tema de configuración del hosting. Escribe un ticket de soporte a Elegant Themes para que lo analicen.
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Es posible importar tu diseño Divi a un sitio que no cuenta con Divi?
Hola Francisco
Si, se puede importar un diseño de divi a otra web que no tenga la plantilla divi. Pero, si ha de tener instalado por lo menos el Divi builder
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquin
Cuando importo un archivo Json de DIVI al Word Press que tiene DIVI me sale un mensaje «Este archivo no de be de importarse en este contexto», ese archivo a importar pesa 2400 kB, no será problema del Hosting con ese tamaño de archivo?
Gracias,
Hola Cesar, Puede ser que el «contexto» del Json no sea el correcto para la importación. Aquí te dejo unos posts donde se explica:
https://www.divithemeexamples.com/this-file-should-not-be-imported-in-this-context-error-message/
https://www.wppagebuilders.com/fix-the-this-file-should-not-be-imported-in-this-context-divi-builder/
https://intercom.help/elegantthemes/en/articles/2612617-this-file-should-not-be-imported-in-this-context
https://divibooster.com/fixing-this-file-should-not-be-imported-in-this-context-layout-error/
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquin Gracias por compartir la información, me quedo una duda se Exporta todo el sitio WEB completo o también ¿Puedo exportar solo una pagina de mi sitio? y si fuese así al momento de cargar ¿solo se sobre escribirá la información de la página o se perdería la info del sitio WEB completo?
Hola David.
La exportación e importación es de páginas de menera individual. No se importa o exporta todo el sitio web
***Me gustaría también Informarte que desde mi plataforma de formación cursotiendaonline.com puedes Acceder a TODOS mis cursos online por solo 10 €/mes + ¡¡SOPORTE!!. En la plataforma tienes cursos sobre WordPress, Cursos sobre la Plantilla Divi (incluso clases sobre Divi 4.0 y el theme builder), Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Para ver el temario de un curso en concreto, ve a cursotiendaonline.com busca el curso cuyo temario quieras ver y haz clic en «INFO CURSO» . Además, como te decía, los cursos inclye SOPORTE!!! ****
Hola
Como puedo exportar un modulo personalizado de mi blog a otra página web realizada con DIVI.
Que sistema debo seguir
Buenas.
No se pueden exportar e importar módulos. Solo se pueden exportar e importar diseños completos de página.
Hola Juaquin siguiendo siempre tus posts y al leer este me surge una duda que quizas me puedas orientar si tuviera un diseño de una pagina guardada en mi biblioteca la cual reutilizo constantemente existiria la forma que un usuario x pudiera subir imagenes textos etc y esa informacion fuera a ese diseño guardado???
saludos
Buenas,
un usuario registrado en wordpress puede modificar esos diseños accediendo a la biblioteca: «Divi > Biblioteca Divi»
Hola, buen aporte pero tengo una duda, intento pasar una página a otra web pero no me salen esas flechitas para importar 🤔, ya que si uso divi me sale el constructor visual. Como cambio eso? Gracias de antemano
Buenas.
Las flechitas aparecen tanto en el constructor tipo backend como en el tipo frontend. Si utilizas el tipo frontend, tienes que hacer clic en el iocno en forma de círculo con los tres puntitos para que se muestren todas las opciones.
Hola, los menús no se clonan, solo el diseño de las webs, verdad?
Buenas.
Efectivamente, solo se exportan los diseños de páginas. Pero, no los menús
Hola Joaquin, agradecer tus aportes y comentar que eres un referente a la hora de solventar problemas que aparece cada tanto y que procupan bastante.
Te queria consultar si yo puedo exportar una pagina realizada con divi e importarla a otra pagina cuyo tema no sea Divi, entiendo que necesito divi builder y ademas queria saber si solo se puede cargar un solo constructor a la vez a un wordpress o podria tener por ejemplo el divi builder y el visual composer o elementor por ejemplo.
Esto es para el caso en que me pidan modificaciones en un worpress no creado por mi.
Muchas gracias
Buenas Alejandro.
Gracias por tus palabras.
1.- Para importar un diseño de Divi en un wordpress es necesario tener activa la plantilla Divi o tener activo el plugin Divi builder con otra plantilla
2.- Puedes tener activos varios constructores en un wordpress, pero supone un consumo de recursos muy alto. Lo mejor es tener solo un constructor.
Hola!
He realizado la exportación de forma correcta en local pero al importarlo ya en el servidor se queda pillado y la importación no pasa del 1%
¿Sabéis que puede ser?
Gracias!
Buenas.
Si tienes actualizada tu plantilla Divi y tu wordpress, imagino que tiene que ser un tema de configuración del servidor.
Consulta a tu hosting y pon una consulta en el soporte de Elegant Themes para que estudien tu caso
hola diviseros, tienen algun foro que me recomienden sobre divi o algun grupo de whatsapp
Hola Joaquín.
Tengo una plantillas creadas para realizar posts con una sistematica de diseño. Desde que he migrado a WP 5 y la última versión de Dvi, no me carga.
Lo acabo de intentar como dices en tu articulo y me dice «este archivo no debe importarse en este contexto».
He contactado con mi hosting y me dicen que no creen que sea tema de recursos y tengo varios posts abiertos en ET sin solucionar hasta el momento.
¿Alguna idea?
Muchas gracias y un saludo
Buenas.
1.- Como seguro que habrás visto, están saliendo muchas actualizaciones de Divi para ir integrándose adecuadamente con WordPress 5.x. Es posible, que aún no estén todos los detalles de integración pulidos. Ese es uno de los motivos, porque a día de hoy (06/02/2019), en las noticias de mi plataforma de cursos, aún no recomiendo la actualización a WordPress 5.x. No solo por Divi, sino por fallos que aún existen con otros plugins y plantillas.
2.- En cualquier caso échale un vistazo también a este post: Fixing «This file should not be imported in this context.» Layout Error
3.- En cuanto me sea posible, realizaré una serie de pruebas con la última versión de WordPress y Divi, para comprobar un poco lo que comentas, a ver si tengo problemas
Buenas.
Acabo de realizar unas pruebas con WordPress 5.0.3 y Divi 3.19.12, y no he tenido ningún problema para: Guardar diseño de página completa y cargar diseño en otra página. Tampoco he tenido problema para exportar un diseño e importar diseño en otra página.
Hola!
¿Hay alguna manera de subir estos archivos .json vía FTP?
Al intentar importar me aparece este mensaje: Este archivo no se puede importar. La causa puede ser que file_uploads esté desactivado en su php.ini. También puede estar causado porque post_max_size o/y upload_max_filesize sean de menor tamaño que el archivo seleccionado. Por favor, auméntelo o transfiera más datos cada vez.
Gracias por su atención y ayuda.
Hola Natalio.
El problema está en la configuración de tu hosting.
Escribe un ticket de soporte a tu empresa de hosting indicándoles el problema y mensaje de error que te sale, para que te modifiquen la configuración de tu servidor.
un saludo
Hola: he seguido todos los pasos para exportar e importar una página de una web a otra. En las dos tengo instalados Divi y Divi Builder. Al importar en portabilidad me sale el siguiente mensaje:
«Este archivo no de be de importarse en este contexto»
Gracias
Hola Jesús,
No he tenido nunca problemas al exportar e importar diseños con Divi. Explícame esquemáticamente el proceso que has seguido, a ver si se me ocurre cual puede ser el problema
Hola, mi nombre es Jenny Tenjo.
Veo que eres un experto Divi y quería consultarte algo:
Tengo un problema con mi página web construida con Divi. Resulta que yo tenía mi página alojada en un servidor y hosting, como eran muy lentos, no renové mi pago.
Antes de que expirará la página realice varios back up uno con un plugin llamado BackupBuddy y con Backup & Restore your Divi Theme Options y además tengo un Backup más en mi drobox. Mi problema es que no sé como migrar estos backups a mi pagina nueva Divi. No puedo migrar este tipo arichivos, No tiene carpetas de archivos como otras páginas que no usan este tipo de sistemas de plantilla.
¿Que debo hacer, debo comprar un pluguin Divi para que los traduzca y los pueda trasportar? ¿Que me recomiendas hacer? No se como recupera restaurar mis Back up.
¡Mil gracias por tu ayuda y servicio!
Jenny Tenjo
Hola Jenny,
Lo cierto es que yo no utilizo nunca plugins para migrar sitios web. Habitualmente utilizo Webempresa que dispone de herramientas de backup y migración (habitualmente las empresas de hosting te migran gratis la web cuando te cambias de uno a otro). También he realizado alguna de manera manual, pero nunca a través de plugins.
Cada plugin usará un sistema para poder realizar la migración o restauración, eso debes verlo en la documentación del plugin. Pero creo que este tipo de plugins habitualmente requieren que te instales un WordPress nuevo, instales el plugin y a continuación restaures los archivos. Pero como te digo, el procedimiento te lo debe dar el plugin
Recuerda también que para restaurar la web, se deben restaurar archivos y la base de datos.
Hola, una pregunta, no hay una manera de exportar lo hecho en divi y subirlo a otra pagina web creada en wordpress pero sin divi?
Buenas,
Necesitas tener el plugin Divi builder aunque no tengas Divi. Para importar páginas realizadas con el Divi builder, necesitas que en la web de destino esté instalado el Divi builder o la plantilla Divi.
Post para importar y exportar páginas con el Divi builder
Hola Joaquín,
Supongo que este archivo de exportación e importación, no contempla las imágenes y otros recursos utilizados en la página, no?
Hay manera de hacer esto de forma sencilla con Divi?
Muchas gracias!
Buenas Oscar,
Sí, la importación y exportación con la plantilla Divi, Sí incluye las imágenes.
Cuando se exporta el diseño, si hemos añadido css global a la página, éste no se exporta, ¿hay alguna forma de obligarle a que si se exporte?
Hola Manu,
No hay manera porque lo que exportas son diseños de páginas y no opciones generales de diseño para toda la web.
Ten también en cuenta por si te es de ayuda, que desde «Divi > Opciones del tema» también se pueden exportar e importar las opciones de configuración generales de diseño de la plantilla. Aunque si lo que quieres es trasladar un CSS personalizado, lo tendrás que hacer a mano.