Vamos a ver en este post una característica de gran utilidad de que dispone la plantilla Divi. Concretamente vamos a ver cómo podemos reutilizar diseños realizados con el Divi builder, en otras páginas del mismo sitio web.
Vamos a ver como podemos guardar diseños. Es decir, módulos, filas, secciones y/o páginas completas en la biblioteca Divi y posteriormente reutilizarlos en otras páginas de la misma web.
DESCUENTOS PLANTILLA DIVI
En este post NO vamos a ver como se exporta un diseño de página realizado con el constructor de Divi y se importa en otro sitio web realizado con Divi, ya que este proceso ya lo tienes en este post: Exportar diseños a otros sitios web con Divi
En este post vamos a ver como utilizar la biblioteca Divi, para diseños realizados en unas páginas reutilizarlos en otras, pero siempre dentro del mismo sitio web.
ÍNDICE POST BIBLIOTECA DIVI
1.- Cómo añadir un módulo, fila, sección y página a la biblioteca Divi con el Divi builder
Vamos a ver en este apartado como podemos añadir un módulo, una fila, una sección y una página completa a la biblioteca Divi con las dos versiones del divi builder de que dispone la plantilla Divi.
1.1.- Añadir elementos a la biblioteca divi con el constructor visual
Vamos a ver como añadir elementos (módulos, filas, secciones y páginas) a la biblioteca cuando estamos usando el constructor visual de la plantilla Divi.
i.- Añadir módulo a la biblioteca Divi con el constructor visual: pon el ratón sobre el módulo que quieres guardar en la biblioteca y haz clic sobre el icono formado por una flecha que apunta hacia abajo y está dentro de un círculo.
Guardar un módulo en la biblioteca Divi con el constructor visual
Ahora pon un nombre al módulo que se guardará en la biblioteca rellenando el campo “Layout Name”, y haz clic en “Guardar en Biblioteca”.
Nota: no marques la opción “Guardar como global”. Más adelante verás un apartado que explica en que consiste esta opción (VER APARTADO 3.-)
Nota: no es necesario crear una categoría. Esto sirve por si vas a guardar muchos módulos y quieres tenerlos clasificados por categorías. Si no es tu caso no hace falta que crees categorías.
Poner nombre al módulo y guardarlo en la biblioteca divi
ii.- Añadir una fila a la biblioteca Divi con el constructor visual:
Para añadir una fila a la biblioteca Divi pon el ratón sobre una fila y haz clic en el mismo icono que comentamos en el apartado anterior (Añadir módulo a la biblioteca Divi con el constructor visual).
A continuación, procede igual que comentábamos en el apartado anterior, estableciendo un nombre para la fila guardada en la biblioteca y guardando.
iii.- Añadir una sección a la biblioteca Divi con el constructor visual:
Para añadir una sección procederemos de igual manera que en los casos anteriores. En primer lugar, podremos el ratón sobre la sección y después haremos clic en el icono con la flecha apuntando hacia abajo e inscrita en un círculo.
A continuación, podremos un nombre a la sección y la guardaremos en la biblioteca.
iv.- Añadir una página completa a la biblioteca Divi con el constructor visual:
Para añadir el diseño completo de una página a la biblioteca de la plantilla Divi haremos clic en el botón circular con tres puntos que aparece en la parte inferior de la pantalla.
A continuación, verás cómo se despliegan varias opciones. Haz clic en el icono en forma de flecha apuntando hacia abajo e inscrita dentro de un círculo.
A continuación, procederemos como en los casos anteriores, poniendo nombre al diseño de páginas y guardándolo en la biblioteca.
1.2.- Añadir elementos a la biblioteca divi con el constructor tipo backend
Ahora vamos a ver como añadir páginas, secciones, filas y módulos a la biblioteca Divi, pero usando el page builder no visual, también llamado tipo backend.
i.- Añadir un módulo a la biblioteca divi con el page builder tipo backend
Para añadir un módulo a la biblioteca divi haremos clic en icono formado por tres rayas horizontales (ajustes del módulo) del módulo que queramos guardar.
A continuación, haremos clic en el botón que aparece en la parte inferior “Guardar y añadir a la biblioteca”.
Aparecerá una ventana emergente. Escribiremos el nombre que queremos poner a este diseño de módulo en la biblioteca rellenando el campo “Nombre de planilla o plantilla”.
Nota: no marques la opción “Guardar como global”. Más adelante verás un apartado que explica en que consiste esta opción (VER APARTADO 3.-)
Nota: no es necesario crear una categoría. Esto sirve por si vas a guardar muchos módulos y quieres tenerlos clasificados por categorías. Si no es tu caso no hace falta que crees categorías.
Proceso para añadir un módulo a la biblioteca de Divi usando el page builder tipo Backend
ii.- Añadir una fila a la biblioteca divi con el page builder tipo backend de Divi
Para añadir una fila procederemos de la misma manera que en el apartado anterior. Haremos clic en el icono de ajustes de la fila (icono de tres rayas horizontales), a continuación, haremos clic en el botón “Guardar y añadir a la biblioteca” y en la siguiente ventana emergente pondremos nombre al diseño y haremos clic en “Guardar y añadir a la biblioteca”.
iii.- Añadir sección a la biblioteca divi con el divi builder tipo backend
Para añadir una sección procederemos exactamente igual que en los apartados anteriores, solo que ahora haremos clic en ajustes de la sección (icono de tres rayas horizontales) para comenzar el proceso.
iv.- Añadir un diseño completo de página a la biblioteca divi con el builder tipo backend
Para añadir un diseño completo de página a la biblioteca haremos clic en el botón “guardar en biblioteca” que aparece en la parte superior del constructor.
A continuación, pondremos un nombre al diseño y haremos clic en el botón “guardar”.
Guardar diseño completo para vover a utilizarlo en otra página de la web hecha con Divi
2.- Cómo incluir un módulo, fila, sección o diseño completo guardado en la biblioteca
Vamos a ver ahora como podemos recuperar e insertar en una página los elementos que antes hemos aprendido a guardar en la biblioteca del Divi builder.
2.1.- Cómo incluir en una página un módulo guardado en la biblioteca del Divi Builder
Para incluir un módulo que tenemos previamente guardado en la biblioteca haremos clic en:
i.- Insertar módulo con el constructor tipo backend: en caso de usar el divi builder tipo backend haremos clic en el botón “+ Insertar módulos (s)”.
Nota: Para que te aparezca esta opción tienes que haber insertado previamente en la fila el número y distribución de columnas
ii.- Insertar módulo con el constructor visual: en caso de estar utilizando el constructor visual, haremos clic en el icono “+” para añadir un módulo.
Insertar un módulo de Divi previamente guardado en la biblioteca
A continuación, en cualquiera de los dos casos anteriores haremos clic en el botón: “Añadir desde biblioteca” en la ventana emergente.
Se mostrarán los diferentes módulos que hayamos guardado en la biblioteca y haremos clic en el que queramos insertar.
2.2.- Insertar fila guardada en la biblioteca divi en una página
Para proceder a insertar una fila que previamente hayamos guardado en la biblioteca de divi realizaremos las siguientes acciones:
i.- Insertar fila con el constructor tipo backend: en caso de usar el divi builder tipo backend haremos clic en el enlace “+ Añadir fila” que aparece en la parte inferior de cada sección.
ii.- Insertar fila con el constructor visual: en caso de estar utilizando el constructor visual, haremos clic en el icono “+” con círculo de color verde para añadir una nueva fila.
Insertar fila de divi guardada previamente en la biblioteca
En ambos casos, haremos clic en el botón “Añadir desde biblioteca” que aparece en la parte superior de la ventana emergente.
A continuación, se mostrarán las filas guardadas en la biblioteca. Haremos clic en la fila que queramos insertar.
2.3.- Insertar sección previamente guardada en la biblioteca Divi
Vamos a ver ahora como podemos incluir una sección del constructor Divi previamente guardada en la biblioteca en una página.
Para incluir una sección seguiremos el siguiente procedimiento:
i.- Insertar sección con el constructor tipo backend: para insertar una sección desde la biblioteca haz clic en el enlace “Añadir desde biblioteca” que aparece junto a los enlaces para añadir secciones.
ii.- Insertar sección con el constructor visual: si estás usando el constructor visual, haz clic en el icono “+” en círculo azul. A continuación, haz clic en la pestaña superior que te aparece en la ventana emergente con el texto: “Añadir desde biblioteca”.
Añadir una sección desde la biblioteca de Divi
En ambos casos ahora solo te quedará seleccionar la sección que quieras insertar. La podrás insertar en la página haciendo clic sobre ella.
2.4.- Insertar una página completa guardada en la biblioteca de Divi
Vamos a ver ahora como insertar una página completa que haya sido previamente guardada en la biblioteca de Divi
i.- Insertar página con el constructor tipo backend: si estamos usando el constructor tipo backend haremos clic en el botón “Cargar diseño” que aparece en la parte superior del page builder.
ii.- Insertar página con el constructor visual: si estamos usando el page builder visual, haremos clic en primer lugar en el icono en forma de círculo con tres puntos que aparece en la parte inferior para desplegar las opciones.
A continuación, haremos clic en el icono en forma de círculo con un signo “+” en su interior.
Insertar página completa crada con Divi
En ambos casos, en la ventana emergente haremos clic en la pestaña: “Your saved Layouts” (tus diseños guardados). A continuación, solo quedará hacer clic sobre el diseño de página que queramos incluir en la página actual.
3.- Marcar elementos como globales al guardar en la biblioteca
Cuando procedemos a guardar un módulo, fila, sección o página completa en la biblioteca Divi tenemos la opción de guardar el elemento como “global”.
Y ¿qué quiere decir que se guarda un elemento como global?
Lo que quiere decir, es que el elemento que incluiremos en una página procedente de la biblioteca no será una copia del mismo, sino que será el mismo elemento en sí.
Te lo explico más detenidamente:
i.- Si no marco la opción global: si NO marcamos la opción “global” cuando guardamos un elemento (módulo, fila, sección o página) en la biblioteca, al insertar dicho elemento en una página, lo que insertaremos será una copia del mismo. Es decir, si inserto el elemento en 5 páginas y modifico uno de ellos, no se modificará en los 4 restantes.
ii.- Si marco la opción global: si marcamos la opción “global” cuando guardamos un elemento en la biblioteca, al insertar ese elemento en una página, lo que insertamos es el elemento en sí y NO una copia. Es decir, si inserto el elemento en 5 páginas y modifico el elemento de una de ellas, se modificará de igual manera de manera automática en las 4 páginas restantes.
4.- Gestión de la biblioteca del Divi Builder
Para la gestión de los elementos añadidos a la biblioteca iremos a: “Divi > Biblioteca de Divi”.
Aquí nos aparecerán todos los elementos que hemos añadido a la biblioteca. En la columna “Tipo” nos indica que tipo de elemento es:
- layout: página
- Section: Sección
- Row: fila
- Module: módulo
Podemos editar cualquier elemento, haciendo clic en la opción “Editar” que se muestra al poner el ratón sobre el elemento en cuestión.
Al editar un elemento podremos modificarlo y volver a guardarlo.
Editar diseños guardados en la biblioteca de divi
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
Buenas tardes, ¿tengo la biblioteca llena de cosas y me interesa borrar modulos de la biblioteca? ¿Cómo se hace?
Buenas
¿no puedes eliminar diseños desde Divi > Biblioteca de Divi»?
Hola estimado,
Mi nombre es Andrés, te escribo desde Uruguay, sabes que guardo en la biblioteca Divi, pero al querer reutilizarlos, osea importar desde la biblioteca con el constructor visual, no refleja nada, como si no hubiera nada en la biblioteca.
¿Cual puede ser la solución?
Tengo Divi actualizado a 4.06…
Hola Andrés.
No me ha pasado nunca nada así. Es bastante raro.
No se si pudiera estar relacionado con la configuración de tu hosting o que tuvieras algún plugin que está interfiriendo.
Para ver ese caso tan concreto habría que echar un vistazo a la administración de tu wordpress.
Por lo que mi recomendación es que acudas al soporte de Elegant Themes
Hola Andrés, me sucede lo mismo y no llego a ninguna solución, ¿pudiste dar con el problema?.
Buenos días Joaquín,
Muy interesante el artículo. Como todos.
Si por error marque global y no lo era tengo alguna forma de reversar la operación?
Gracias
Buenas.
Prueba a guardarlo otra vez en la biblioteca con otro nombre y sin marcar la opción de «global»
Hola Joaquin,
Esta genial tu canal. Muy didáctico. Quería preguntarte lo siguiente: Puedo llegar a copiar una página completa a otra parte dentro de la misma Web, el problema es que si realizo un cambio en cualquiera de las dos, el cambio se ve reflejado en ambas. ¿Qué puedo hacer?
Buenas.
Claro que puedes. El problema que tienes es que cuando guardas algo, marcas un checkbox que dice: «Guardar como global». Esta opción no la debes marcar a no ser que quieras que todos los elementos que insertes sean instancias de un mismo elemento modificables desde cualquiera de ellos. Resumiendo, cuando guardes un diseño de página, modulo, sección o fila, no marques la opción de guardar cómo «global».
Hola Joaquín. Ya tengo un blog en funcionamiento y ahora cambié el tema por el Divi. ¿Cómo puedo cambiar el diseño de todos los post con un layout determinado?
Hola Jorge.
Eso no es fácil, pues tendrías que crear o utilizar un layout y luego añadir a cada uno todo el contenido del post, y si tienes muchos post, pues sería trabajo de chinos.
En mi caso, para los post, no utilizo el page builder, simplemente el editor por defecto de WordPress.
Excelente articulo como nos tienes acostumbrados.
Mi problema es que cuando exporto una página entera (.json) con imágenes en elementos globales, al importarla para poder utilizarla en el mismo sitio web, me duplica esas imágenes en la galería. ¿es posible evitarlo?
Gracias.
Buenas,
Es posible que sea algún tipo de bug en la exportación e importación de diseños, en este caso mi recomendación es utilizar siempre la última versión de la plantilla Divi, para disponer de los menos bugs posibles.
Si tienes un plan de Elegant Themes, escribe la consulta en el soporte, por si no tienen resuelto ese bug, que trabajen en su resolución.
Hola Joaquin.
El problema persiste con cualquier navegador y tanto el Divi como WP estan actualizados, asi que hablare con Nominalia.
Muchas gracias por tu feedback y tu tiempo!
Que tengas una buena semana,
Manel
Doy por descontado, que tienes configurada correctamente la API de Elegant Themes y usuario en la plantilla.
¡Hola!
Justo estoy explorando Divi. Me va ayudar bastante tu artículo. Regresaré en caso de tener alguna duda.
¡Saludos!
Hola Joaquin,
Tengo un diseño propio dentro del Constructor Divi que utilizo como plantilla, y no me deja cargarlo al querer hacer una nueva entrada.
Se cuelga y no paso de ahí…. me podrías ayudar?
Gracias
Buenas,
1.- Prueba a cargar algún diseño de los predefinidos a ver si se carga.
2.- Prueba a crear un diseño muy sencillo, gúardalo y prueba a cargarlo.
Joaquin, desde hace un tiempo me ocurre exactamente lo mismo que a Helena. Ni me carga diseños predefinidos ni uno bien sencillo que he hecho para reutilizarlo: se cuelga y no hay manera de recuperarlo.
Puedes ayudarme? Gracias.
Hola Manel,
Yo probaría varias cosas:
1.- ¿has probado con varios navegadores? por si con unos te ocurre y con otros no (Firefox, Chrome, Internet explorer, etc.)
2.- ¿Está la plantilla Divi actualizada y WordPress actualizado?
3.- Si no es nada de lo anterior, probaría también a consultar a la empresa de hosting