Photo by Campaign Creators on Unsplash
Una de las funcionalidades más atractivas de Divi es su librería de diseños listos para usar que te ahorrarán tiempo y tranquilidad para que pases más tiempo creando tu arte que escribiendo código y diseñando tu sitio web, así que entre la librería de diseños divi!. 💯
Cómo acceder a la librería de diseños
Puedes acceder e importar diseños directamente desde el constructor Divi al crear o editar una página.
Cuando agregues una nueva página desde el panel de WordPress, activa el Visual Builder o constructor visual como en la figura 1:
Figura 1. Agregar nueva página en el panel de wordpress y hiablite el constructor visual.
Si se trata de una página nueva, aparecerán tres opciones, seleccione la opción «Elegir un diseño prefabricado»:
Figura 2. Opción para escoger diseños pre fabricados.
Esto abrirá automáticamente la ventana emergente «Cargar desde la biblioteca», donde encontrarás todos las plantilas de diseño.
Plantillas de diseño, diseños guardados o páginas existentes
En la ventana emergente de la opción Cargar desde biblioteca, tendrá tres pestañas disponibles. La pestaña de Diseños prefabricados es donde encontrarás todos las plantillas de diseño creados por el equipo de diseño de Elegant Themes de forma gratuita para su uso. La pestaña «Tus diseños guardados» es donde puedes acceder a cualquier diseño de tu creación que hayas guardado personalmente en la Biblioteca Divi, La pestaña «Tus páginas existentes» contendrá una lista de todas las páginas (incluyendo publicaciones y proyectos) actualmente en tu sitio web donde también puedes optar por clonar una página existente para iniciar el diseño de una nueva página.
Figura 3. Las tres opciones para cargar diseños desde la librería.
Cargar una plantilla de diseño nueva
En la pestaña de plantillas de diseño o «Premade layouts», puedes encontrar fácilmente un nuevo diseño desplazándote por la lista o buscando por categoría en la columna de la izquierda.
Figura 4. Lista de plantillas de diseño organizadas por categoría.
Una vez que selecciones una plantilla, podrás obtener una vista previa de todos los diseños de página individuales incluidos en el paquete. Al hacer clic en un diseño de página a la derecha, se generará una vista previa de la página a la izquierda. Debajo de la vista previa, puede hacer clic en el botón «ver demostración en vivo» para abrir la demostración en vivo de la página en una nueva pestaña. Cuando estés listo para usar el diseño, simplemente haz clic en el botón «Usar este diseño» para implementar el diseño en tu página.
Figura 5. Menú de pre visualización de las plantillas de diseño.
Agregar un diseño prefabricado a una página no es cosa de una sola vez. Puedes acceder a nuevos diseños en cualquier momento dentro de Visual Builder para páginas nuevas o existentes. Simplemente abre el menú de configuración de la página del constructor visual en la parte inferior de la página haciendo clic en el icono del círculo morado con tres puntos:
Figura 6. Click en el icono de opciones de página para agregar un nuevo diseño desde la libreria.
Luego haz clic en el ícono «Cargar desde la biblioteca» (símbolo más), se abrirá la ventana emergente «Cargar desde la biblioteca» con todos la lista de diseños.
Figura 7. Click en el icono + más para agregar una nueva plantilla de diseño.
Agregar diseños al contenido existente o reemplazar el contenido existente
Puedes cargar una plantilla de diseño en una página en blanco, un diseño existente o puedes reemplazar el contenido existente. Cargar un diseño en una página en blanco simplemente agregará el diseño a su página como se esperaba. Cargar un diseño prefabricado en una página existente agregará, de manera predeterminada, el diseño debajo del contenido existente de la página. Por lo tanto, si inicialmente no ves un cambio en tu página al agregarle un nuevo diseño, deberás desplazarte hacia abajo para ver el contenido del nuevo diseño que se implementó además del diseño existente. Si deseas reemplazar el contenido existente por completo con el nuevo diseño prefabricado, puedes marcar la opción «Reemplazar contenido existente» antes de elegir usar el diseño prefabricado. Esta opción se encuentra justo debajo de la vista previa del diseño.
Figura 8. Reemplazar el cointendo existente en tu pagina por un diseño predeterminado.
Cargar diseños guardados y clonar páginas existentes
Si has guardado diseños en tu biblioteca Divi, puedes acceder a estos diseños desde la ventana emergente «Cargar desde biblioteca» en la pestaña «Tus diseños guardados». Para cargar el diseño guardado en tu página, simplemente haz clic en el diseño guardado de la lista como se muestra en la figura 9:
Figura 9. Cargar diseños que haz creado y guardado con anterioridad en la biblioteca DIVI.
También puedes comenzar la creación de una pagina nueva clonando una de las páginas existentes de tu sitio web. Haz clic en la pestaña «Tus páginas existentes» y selecciona la página que deseas clonar. Esto implementará el diseño (y el contenido) de la página ya creada en tu nueva página.
Figura 10. Clonar paginas existentes.
Personalización y flexibilidad
La capacidad de agregar plantillas de diseños predeterminados para impulsar la creación de una nueva página abre un mundo de flexibilidad para crear tus propios diseños originales. Una vez que implementas un diseño, puedes editarlo como desees. Por ejemplo, si te gusta un diseño en particular, pero prefieres no tener una determinada sección, simplemente elimínala haciendo clic en el ícono de la papelera para esa sección et voilà, y listo. 😮
Figura 11. Cada diseño predeterminado puede ser editado a tu gusto.
Al reemplazar el contenido de la página con tu propio contenido, puedes tener un sitio hermoso y personalizado en solo minutos. Con el constructor visual, hacer estos cambios es simple. Pasa el cursor sobre cualquier área en la que desees realizar cambios y aparecerá la configuración. Si desea cambiar el texto, simplemente selecciona el texto y comience a escribir.
Figura 12. Cambiar el texto por tu propio contenido es muy fácil desde el editor visual.
Si te gusta el cambio, puedes presionar «cmd + g en mac ó ctrl + g en windows» (o hacer clic en el botón Guardar) para guardar tu diseño. Si no te gusta el cambio, puedes presionar «cmd + z, ctrl+z» para deshacerlo (o puedes usar el botón del historial de edición para revertir varias acciones a la vez!). No olvides guardar tus diseños originales en la librería divi para poder usarlos de nuevo al crear una nueva página y así ahorrar tiempo y cabeza 💆🏼♂️ a la hora de comenzar un diseño desde cero.
Esto ha sido todo por el momento, nos veremos mas tarde en otra entrega del blog artlike.
Hasta pronto! 👨🏽🎤
Comentarios recientes