Producto destacado de Divi: Divi Den Pro - Biblioteca de diseño

Divi Den Pro - Layout Library es un complemento de terceros con una biblioteca masiva de elementos Divi prediseñados para ayudarlo a crear sitios web más rápido. Incluye una interfaz de usuario única que se puede buscar y clasificar, lo que hace que los diseños sean fáciles de encontrar. En esta publicación, echaremos un vistazo a Divi Den Pro - Biblioteca de diseño para ayudarlo a decidir si es el producto adecuado para su caja de herramientas de diseño Divi.

Instalación de Divi Den Pro – Biblioteca de diseños

Instalar Divi Den Pro – Layout Library fue simple. Funciona igual que cargar cualquier complemento, pero deberá iniciar sesión en su cuenta de Divi Marketplace para que esté disponible en Divi. Primero, para instalar, vaya a:

1. Complementos
2. Agregar nuevo
3. Cargar complementos
4. Elija el archivo
5. Instalar ahora

Luego, una vez que el complemento esté instalado, actívelo como de costumbre y verá un nuevo menú agregado a su tablero.

1. Activar complemento

Contenido de la biblioteca de diseños

Divi Den Pro – Layout Library viene con 2615 artículos de biblioteca. Esto incluye 1988 secciones y módulos, 631 diseños, 39 menús y 18 diseños de sitios web completos. Todos los artículos están prediseñados. Los diseños están etiquetados, probados y optimizados para diferentes tamaños de pantalla.

Hay varias formas de usarlos en sus diseños Divi. Encontrarás los diseños en el menú Divi Den Pro DM y en Divi Theme Builder. El menú Divi Den Pro DM es la forma más fácil de usarlos. Puede buscarlos por palabra clave y categoría e importarlos a su Biblioteca Divi.

Menú Divi Den Pro DM

Encontrará un nuevo elemento de menú en su panel de WordPress llamado Divi Den Pro DM. El menú incluye muchos enlaces, que también encontrará como pestañas dentro del propio menú.

Buscador de diseño

La primera pestaña es el Buscador de diseños. Esto incluye un cuadro de búsqueda con filtros a la izquierda y los resultados a la derecha. También incluye pestañas para que pueda ver todos los diseños, solo los diseños gratuitos o solo los diseños profesionales. Los filtros muestran el número de diseños en ese tipo. Se dividen en diseños, secciones, módulos, categorías, colecciones, Divi Theme Builder y Plugin Theme Builder.

El área de resultados muestra una miniatura del diseño. La miniatura se desplazará al pasar el mouse si el diseño es más grande que el contenedor. Puede ver el diseño en otra pestaña, guardar el diseño en su Biblioteca Divi o descargar el diseño a su computadora como un archivo JSON.

Al seleccionar un filtro, se abre para mostrar las opciones. Abrí Colecciones, que muestra los nombres de los diseños de Divi Den. Al seleccionar uno, se muestran los diseños dentro de esa colección en el área de la derecha.

Hice clic para ver un diseño y abrió la demostración en la página Divi Den en otra pestaña. La página muestra varios diseños, secciones, etc. Paso el cursor sobre la imagen en la parte superior central para mostrar sus efectos de desplazamiento.

El último

La pestaña Últimas muestra las últimas publicaciones del blog Divi Den. Esta es una buena manera de conocer las novedades de la biblioteca de diseños.

Tutoriales

La pestaña Tutoriales incluye todos los tutoriales que enseñan cómo usar Divi Den Pro – Layout Library. Incluyen videos incrustados que se muestran cuando haces clic en un tutorial, para que puedas aprender directamente desde el tablero de Divi Den sin salir de WordPress. Esto ayuda con la usabilidad, por lo que si hay algo con lo que necesita ayuda, lo encontrará aquí.

Creador de temas

La pestaña Theme Builder divide los diseños en Divi Theme Builder y Plugin Theme Builder. Muestra las colecciones, los tipos de página, etc. Estos también se agregan al Divi Theme Builder. También puede iniciar Theme Builder desde aquí.

El Plugin Theme Builder tiene un enlace para abrir el Personalizador de temas.

El personalizador de temas agrega tres nuevas pestañas de personalización para la página, el blog y la configuración global. Esto incluye funciones adicionales, como un personalizador emergente, una barra adhesiva, más íconos, el botón de volver al principio, una página próximamente, personalizaciones de plantillas y mucho más.

Archivos CSS personalizados

La pestaña Archivos CSS personalizados proporciona el CSS personalizado de los diseños de Divi Den que puede copiar y modificar. Al hacer clic en uno, se abre el CSS en otra pestaña. Un video incrustado muestra cómo usar el CSS personalizado.

Avanzado

La pestaña Avanzado incluye la pestaña Etiqueta blanca y la pestaña Más opciones. White Label le permite cambiar la marca del complemento para que coincida con su marca.

La pestaña Más opciones le permite mover la pestaña Divi Den Pro dentro de los elementos de Divi Builder. Esto está habilitado por defecto.

Biblioteca de diseño Divi Den Pro en Divi Builder

Se agrega una pestaña para Divi Den Pro - Biblioteca de diseño al modal Módulos.

Al seleccionar la pestaña, se abre el menú donde puede elegir el diseño que desee. Los diseños se descargan como archivos JSON, por lo que deberá cargarlos en páginas y publicaciones si desea usarlos.

Biblioteca de diseño Divi Den Pro en Divi Theme Builder

La interfaz Divi Den Pro – Layout Library también se agrega en la parte inferior de la pantalla Divi Theme Builder. Funciona igual que en el panel de control de WordPress.

Funciona de la misma manera en Theme Builder que en páginas y publicaciones.

Ejemplos de la biblioteca de diseño Divi Den Pro

Ahora que hemos visto cómo usar la interfaz Divi Den Pro – Layout Library, veamos algunos ejemplos. Veremos algunos de cada tipo.

Diseños

A continuación, veremos algunos diseños. Los cargaré en Divi Theme Builder. Una vez que haya guardado los diseños en su Biblioteca Divi, estarán disponibles en sus diseños. Búscalos y selecciona categorías a la izquierda.

Página de aterrizaje de la tienda V3 Ragnar

Esta es la parte superior de Shop Landing Page V3 Ragnar. Incluye una sección principal con un CTA de correo electrónico. Una sección de la tienda muestra productos destacados e incluye una superposición animada que desplaza un mensaje en texto grande al pasar el mouse.

Aquí está la parte inferior de Shop Landing Page V3 Ragnar. Las imágenes extragrandes crean llamadas a la acción de la tienda e incluyen botones animados. Una sección de blog única muestra la imagen destacada detrás del texto que aparece en un lado.

Página de empleo V1 Tina

Esta es la parte superior de la página de carreras V1 Tina. Incluye una imagen destacada con un título superpuesto, una introducción con una llamada y dos columnas de texto. A continuación hay una sección de posiciones abiertas que se muestran como tarjetas.

Esta es la parte inferior de la página de carreras V1 Tina. Los anuncios publicitarios con animaciones flotantes brindan información seguida de un CTA para enviar un CV y ​​una sección de beneficios de la empresa.

Página del blog de los viejos tiempos

Este ejemplo es la parte superior de la página del blog de Old Times. Incluye una sección de héroe con un mensaje sobre una imagen de fondo y un botón con una animación de desplazamiento. Una sección de blog muestra una publicación de blog con una imagen destacada grande a la izquierda y publicaciones con una imagen destacada más pequeña como una barra lateral a la derecha. Una línea amarilla separa la sección del blog de la sección del héroe. Todas las tarjetas de blog incluyen animaciones de inclinación.

Esta es la parte inferior de la página del blog de Old Times. También usa líneas amarillas para la separación e incluye dos secciones de blog de tres columnas, un formulario de correo electrónico grande y un pie de página.

Diseño de página de menú Jamie

Aquí está la parte superior del diseño de la página del menú Jamie. Incluye una sección principal con íconos que se vinculan a las diversas categorías del menú de alimentos. Incluyen animaciones flotantes. A esto le sigue un menú de comida de dos columnas con una imagen a la izquierda y una descripción a la derecha. La comida se divide en categorías.

Diseño de página de menú Jamie

Esta es la mitad inferior del diseño de página de menú Jamie. Continúa el menú de comida e incluye información de contacto con un mapa de ancho completo.

Diseño de la página de inicio de Showreel

Esta es la parte superior del diseño de la página de inicio de Showreel. La sección principal incluye un botón que reproduce un video incrustado y varios anuncios publicitarios sobre una imagen de fondo de pantalla completa. A continuación hay un conjunto de pestañas para mostrar información. Las imágenes grandes con superposiciones animadas vinculan a los servicios.

Esta es la parte inferior del diseño de la página de inicio de Showreel. Continúa las imágenes grandes e incluye otra sección de imágenes para servicios con animaciones superpuestas inclinadas. También incluye contadores de números con estilo, un formulario de correo electrónico y un pie de página.

Página de la barra de progreso visual Freddie

Este es Freddie, la página de la barra de progreso visual. Tiene un diseño elegante, pero el elemento principal que quiero mostrar es la barra de progreso. Esta es la sección principal del diseño. Un menú se encuentra en la parte inferior de la pantalla. Cuando se desplaza, el menú se adjunta a la parte superior de la pantalla y muestra el progreso a través del diseño.

La sección de este ejemplo son estudios de casos. La barra de progreso muestra amarillo para cada sección que he pasado. Las imágenes de esta sección incluyen efectos de inclinación.

Secciones

Si tiene Divi Den Pro: secciones de biblioteca de diseño guardadas en su biblioteca Divi, se agrega una pestaña Divi Den Pro DM a su modal de sección.

Módulo de música de grandes éxitos Freddie

El módulo de música Greatest Hits Freddie proporciona una sección de reproductor de audio con estilo, con un fondo negro y efectos de desplazamiento amarillos.

Demostración de la galería de estilo

Styling Gallery Demo proporciona una interesante galería de imágenes con diferentes formas de borde y un bloque de color para separar las imágenes.

Gracia del proceso Lintang

Styling Gallery Demo proporciona una lista de pasos. Se colocan horizontalmente e incluyen imágenes o colores con forma y efectos de desplazamiento.

Producto Thunderbolt Freddie

Thunderbolt Product Freddie es una sección de productos que muestra un control deslizante de productos en un lado e información con estilo en el otro.

Alula Cronología Gracia

Alula Timeline Grace crea una línea de tiempo vertical alternativa con imágenes en un lado e información en el otro.

Módulos

La opción Módulos en el tablero muestra botones. Aquí hay algunos que descargué.

He agregado todos los botones que descargué en una sola página. Cada uno de los botones incluye atractivas animaciones flotantes.

Dónde comprar la biblioteca de diseño Divi Den Pro

Divi Den Pro – Layout Library está disponible en Divi Marketplace por $189. Incluye uso ilimitado del sitio web, un año de soporte y actualizaciones, y una garantía de devolución de dinero de 30 días.

Pensamientos finales sobre la biblioteca de diseño Divi Den Pro

Esa es nuestra mirada a Divi Den Pro - Biblioteca de diseño. Hay muchos diseños en esta biblioteca. La interfaz de usuario es simple. La búsqueda, clasificación, importación y descarga de diseños es intuitiva. Encontré que el enlace en las secciones y módulos está más limitado que el tablero, una vez que los diseños están en la biblioteca, están disponibles seleccionando las opciones Agregar de la biblioteca. Si está interesado en agregar varios miles de diseños diseñados profesionalmente a su biblioteca Divi, vale la pena echarle un vistazo a Divi Den Pro - Biblioteca de diseños.

Queremos escuchar de ti. ¿Has probado Divi Den Pro - Biblioteca de diseño? Háganos saber lo que piensa al respecto en los comentarios.