Bienvenidos al día 34 de nuestro Maratón Divi 100. ¡Sigue sintonizando durante 100 días seguidos los increíbles recursos de Divi mientras hacemos la cuenta regresiva para el increíble lanzamiento de Divi 3.0 en el último día de la serie!
En pocas palabras, la Biblioteca Divi está diseñada para hacerte la vida más fácil. Si no lo está utilizando actualmente ( o solo lo está utilizando para importar los paquetes de diseño Divi 100 que hemos estado regalando ), es probable que esté perdiendo un tiempo y una energía preciosos durante todo el proceso de diseño web. Crear o volver a crear módulos, filas, secciones o incluso páginas completas que podrían cargarse previamente con solo unos pocos clics, listas para usar tal como están o que solo necesitan algunas ediciones simples para adaptarlas a sus necesidades. Es por eso que en esta publicación, le mostraré cinco formas en que la Biblioteca Divi puede facilitarle la vida como diseñador web.
Para aquellos que no están familiarizados con la Biblioteca Divi, permítanme brindarles una breve descripción: cuando usan Divi Builder para crear publicaciones o páginas, tienen la opción de cargar diseños desde (o guardar diseños en) la Biblioteca Divi:
Una vez que haya guardado un elemento en la Biblioteca, puede acceder a él desde la ventana que aparece cuando agrega un diseño, sección, fila o módulo a la página:
Es así de simple y así de poderoso.
Ahora que comprende cómo funciona la Biblioteca Divi, veamos cómo usarla para simplificar el flujo de trabajo de su sitio web.
5 formas en que la biblioteca Divi puede hacer tu vida más fácil
Suscríbete a nuestro canal de Youtube
1. Ahorre tiempo con diseños personalizados
Después de dedicar tiempo a crear un diseño que funcione para usted o personalizar uno de los diseños preconstruidos, es posible que desee encontrar una manera de reutilizarlo para otra página o publicación. La Biblioteca Divi puede ayudarlo a ahorrar horas al permitirle crear una colección de sus diseños personalizados con sus combinaciones favoritas de secciones, filas y módulos.
Guardar un diseño es fácil. En cualquier momento mientras trabaja en un diseño, puede hacer clic en el botón Guardar en la biblioteca en Divi Builder. Esto le dará una ventana emergente para ingresar un nombre para el diseño:
Se puede guardar cualquier sección o fila con sus módulos contenidos desde la ventana de configuración. En la parte inferior izquierda, hay un botón Guardar y agregar a la biblioteca :
Al hacer clic aquí, se abre una ventana para que ingrese el nombre y la categoría de la sección o fila:
Una vez que haya agregado elementos a su biblioteca Divi, puede administrarlos y editarlos desde el tablero de WordPress yendo a Divi> Biblioteca Divi . La página que verá contiene una lista de todos los elementos de su biblioteca:
También se pueden agregar nuevos elementos a la Biblioteca Divi desde el tablero de WordPress. Haga clic en el botón Agregar nuevo en la parte superior de la página; aparecerá una ventana emergente que recopilará el nombre, el tipo de elemento (por ejemplo, diseño, sección, fila), la configuración a usar y la categoría:
Una vez que se ha agregado un elemento a la Biblioteca Divi, ya sea a través de Divi Builder o desde la página de la Biblioteca Divi, se puede agregar fácilmente a cualquier publicación o página. Mientras usa Divi Builder, simplemente haga clic en la pestaña Agregar desde la biblioteca que está disponible al agregar nuevos diseños, secciones o filas. Se le mostrarán los artículos en su biblioteca y puede hacer clic en el que desea agregar a su página.
2. Acelere el proceso de diseño con módulos personalizados
Guardar diseños, secciones o filas con su combinación de módulos es definitivamente un buen truco, pero es posible que se pregunte por qué omitimos los módulos. ¿Seguro que puedes guardar módulos individuales? ¡Por supuesto que puede! Y aquí es donde también entran en juego algunos ahorros en tiempo real: puede guardar módulos con todas sus configuraciones personalizadas y reutilizarlos.
Hemos cubierto en muchas publicaciones cómo puede crear algunas apariencias bastante creativas para los módulos de Divi usando Configuración de diseño avanzada y CSS personalizado. Esta es una excelente manera de diferenciar su sitio de otros que usan Divi. Como recordatorio rápido, todos los módulos (y las filas para el caso) tienen pestañas para Configuración de diseño avanzada y CSS personalizado:
Desde esas pestañas, puede modificar y personalizar la apariencia del módulo hasta que se vea exactamente como lo imagina. Una vez que esté satisfecho, puede hacer clic en el botón Guardar y agregar a la biblioteca en la parte inferior izquierda de la ventana de configuración:
En la ventana que aparece, puede ingresar un nombre y una categoría para el módulo antes de hacer clic en el botón Guardar y agregar a la biblioteca :
Una vez que haya guardado su módulo personalizado en la Biblioteca, puede usarlo en cualquier otro lugar de su sitio, o incluso en la misma página, sin tener que volver a crearlo. Puede cargarlo desde la biblioteca, con todas sus configuraciones, haciendo clic en Agregar desde biblioteca en la ventana Agregar módulo. Verá sus módulos personalizados en la lista y puede hacer clic en el que desea agregar a su publicación o página:
3. Cree sitios web más rápido con módulos globales
Es posible que haya notado una pequeña casilla de verificación al guardar su sección, fila o módulo anteriormente, que decía «Hacer de esto un elemento global». Un elemento global se sincroniza y refleja dondequiera que aparezca en su sitio. Esto significa que se actualizará automáticamente en todas las páginas cada vez que se realice un cambio en su configuración.
Ahora nos estamos moviendo hacia el ahorro en tiempo real , ya que puede usar Divi para crear elementos de sitios web que serán los mismos en todas las páginas. Por ejemplo, podría crear una sección de pie de página que se agregue a todas sus páginas. Al hacer que esa sección sea global, no tendrá que preocuparse por olvidarse de hacer cambios en algunas de sus páginas cuando necesite actualizarlas.
Para agregar un elemento global, simplemente agregue la sección, la fila o el módulo a su página como de costumbre y personalícelo según sea necesario. Cuando esté listo, presione el botón Guardar y agregar a la biblioteca y asegúrese de marcar la casilla de verificación Guardar como global en la configuración:
La edición de elementos globales no es diferente a la edición de elementos regulares. Hace clic en el botón de configuración de la sección, fila o módulo y realiza los cambios. Una vez que haga clic en el botón Guardar y salir , sus cambios se reflejarán donde sea que se use el elemento. ¡Es fácil!
4. Proporcione un diseño consistente con sincronización selectiva de configuraciones
Cuando estaba guardando sus módulos personalizados, habría visto algunas otras casillas de verificación que pasamos por alto. Había uno para cada una de las pestañas de configuración: Configuración general, Configuración de diseño avanzada y CSS personalizado. La descripción de estas pestañas era «Sincronización selectiva».
Esta es una característica increíblemente poderosa que le permite decidir cuál de las configuraciones se guardará. Por lo tanto, puede personalizar su módulo, pero elija guardar solo la Configuración de diseño avanzada con el módulo cuando lo guarde en la Biblioteca. Esto le dejaría libre para personalizar la Configuración general (por ejemplo) a partir de los valores predeterminados, en lugar de su configuración personalizada.
Selective Sync es aún más potente cuando se combina con módulos globales. Solo las configuraciones sincronizadas se actualizarán globalmente, dejando que las otras configuraciones se personalicen según sea necesario por página.
Usar la Sincronización selectiva es simple. Simplemente marque las casillas de las pestañas que desea guardar para el elemento actual cuando lo guarde en la biblioteca como se describió anteriormente. Solo las configuraciones en esas pestañas se guardarán con el módulo.
5. Reutilice su trabajo exportando e importando
Ahora que ha aprendido a usar la Biblioteca Divi para facilitar el diseño de su sitio web, es posible que se pregunte si puede reutilizar su trabajo en otros sitios web. No se preocupe, ¡lo tenemos cubierto! Todo en Divi se puede exportar desde un sitio web e importar a otro. Esto incluye la Biblioteca Divi, para que pueda exportar e importar todos sus diseños, secciones, filas y módulos personalizados.
Para exportar todos los elementos de su biblioteca, o una selección de ellos, vaya a la página Divi > Biblioteca Divi en su tablero de WordPress, luego haga clic en el botón Importar y exportar en la parte superior de la pantalla:
Al hacer clic en este botón, se abre la ventana emergente de portabilidad. Después de asegurarse de que la pestaña Exportar esté seleccionada, podrá ingresar un nombre para su archivo de exportación. Si ha seleccionado elementos específicos para exportar, puede seleccionar la casilla de verificación para exportar solo esos elementos:
Una vez finalizada la exportación, su navegador descargará un archivo .JSON que contiene los datos sobre los elementos de su biblioteca.
Para importar los elementos de su biblioteca a un sitio nuevo, vaya a la página Divi > Biblioteca Divi como antes y haga clic en el botón Importar y exportar . Esta vez, haga clic en la pestaña Importar y cargue su archivo .JSON de su exportación anterior. Una vez que se complete la importación, verá los elementos de su biblioteca ahora agregados a la página de la Biblioteca Divi.
Conclusión
Si está utilizando Divi para crear varios sitios para usted o para sus clientes, es posible que desee encontrar formas de trabajar de manera más inteligente y rápida. La biblioteca Divi está diseñada para ayudarlo a crear accesos directos para usted que puede usar para facilitar aún más la creación de sitios web.
En este artículo, le mostramos varias formas en que se puede usar la Biblioteca Divi para optimizar su trabajo y simplificar su flujo de trabajo. Como recordatorio, fueron:
- Ahorre tiempo con diseños personalizados
- Acelere el proceso de diseño con módulos personalizados
- Cree sitios web más rápido con módulos globales
- Proporcione un diseño consistente con sincronización de configuración selectiva
- Reutilice su trabajo exportando e importando
Hemos compartido nuestros consejos y trucos para que pueda incorporarlos a su flujo de trabajo con su próximo proyecto.
¿Ha explorado completamente la Biblioteca Divi y ha utilizado sus potentes funciones? Comparta sus consejos y trucos en la sección de comentarios a continuación.
Además, ¡asegúrese de suscribirse a nuestro boletín de correo electrónico y canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen en miniatura del artículo por Oxy_gen / shutterstock.com
Divi 100 Día 34
La cuenta atrás para Divi 3.0
Esta publicación es parte de nuestro maratón Divi 100. ¡Síguenos mientras publicamos recursos Divi gratuitos durante 100 días seguidos! Esta cuenta regresiva de 100 días terminará con el revolucionario lanzamiento de Divi 3.0, que incluye nuestro nuevo editor visual creado desde cero con React. ¡Divi 3.0 cambiará para siempre la forma en que construyes sitios web con Divi Builder!
Que empiece la cuenta atrás.
jQuery(document).ready(function(){jQuery(«#DIV_TO_PLACE_COUNTDOWN»).jCountdown({timeText:»2016/9/7 7:00:00″,timeZone:-8,style:»slide»,color:»black»,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Más información sobre Divi 3.0
.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(https://www.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:»; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}