¿ Alguna vez ha querido colocar módulos y diseños Divi dentro de áreas de widgets? Solo pensar en los diseños de Divi en las barras laterales y los pies de página me da ideas para las posibilidades de diseño más allá de mi propio nivel de habilidad. Sin embargo, lo que es interesante es que es fácil de hacer sin importar tu nivel de habilidad. ¿Cómo? Con un complemento de terceros llamado Divi Widget Builder.
Divi Widget Builder le permite mostrar cualquier diseño Divi en su Biblioteca Divi dentro de un widget. Esto incluye módulos individuales y páginas completas, incluidas todas sus características y ajustes. Funciona tanto con Divi como con Extra . En este artículo, echaremos un vistazo a Divi Widget Builder y veremos lo fácil que es agregar diseños Divi a sus áreas de widgets.
Puede comprar Divi Widget Builder en el sitio web del editor .
Cargue y active el complemento de forma normal.
Una vez que haya activado el complemento, deberá ingresar su clave de licencia. Navegue a Divi , Divi Widget Builder en el menú del tablero e ingrese su clave de licencia. No se requiere ninguna otra configuración para usar el complemento, pero necesitará diseños Divi para usar dentro de los widgets.
Biblioteca Divi
Puede usar cualquier diseño Divi dentro de Divi Widget Builder. No recomiendo crear diseños como lo harías con una página o publicación. Por ejemplo, una cuadrícula de 3 o 4 columnas (para blogs, proyectos, notas publicitarias, etc.) se vería rara en la barra lateral. Sin embargo, esto es fácil de solucionar creando diseños en columnas individuales. En otras palabras, cree diseños específicamente para la barra lateral o el pie de página.
Los módulos individuales funcionan bien en la barra lateral. Ejemplos incluyen:
- mapas
- formularios de contacto
- Temporizadores de cuenta regresiva
- Barras de bar
- Botón
- Blog
- Acceso
- Contador de números
- Persona
- Testimonial
Cree un diseño y use estos módulos con superposiciones de fondo, combínelos, ext., para crear algunos widgets realmente interesantes. El cielo es el límite.
Creación de un diseño
Cree su diseño yendo a Divi , Divi Library en el menú del tablero. Seleccione Agregar nuevo en la parte superior izquierda.
Asigne un nombre al diseño y seleccione el tipo de plantilla en el menú desplegable. Desplácese hacia abajo y puede seleccionar una categoría para su plantilla si lo desea. Tendrá otra oportunidad de seleccionar la categoría o incluso agregar nuevas categorías en la siguiente pantalla. Haga clic en Enviar cuando haya terminado.
Ahora simplemente construya su diseño como de costumbre.
El widget de creación de widgets de Divi
Se agrega un nuevo widget a sus widgets llamado Divi PB Widget. Para verlo, vaya a Apariencia , Widgets en el tablero. Coloque este widget en cualquier área de widgets (incluidas las barras laterales, los pies de página o cualquiera que haya creado). Proporciona un cuadro desplegable donde puede elegir cualquier elemento de la Biblioteca Divi para mostrar dentro del widget.
Hay otras dos selecciones:
Mostrar el título del elemento de la biblioteca : muestra el nombre del diseño dentro de la barra lateral de su sitio web. Funciona como un título para el widget. Desmarque para ocultar el nombre.
Agregue elementos de biblioteca para usar como widgets aquí : al hacer clic en la palabra ‘aquí’ en esa oración (bueno, no en mi oración) lo lleva a la Biblioteca Divi donde puede crear sus diseños. Me gusta que se incluya este enlace, ya que ayuda a evitar la confusión sobre dónde crear los diseños y le brinda acceso rápido a la biblioteca.
Una vez que haya hecho sus selecciones, haga clic en Guardar y el nuevo diseño se aplicará a la ubicación del widget que haya colocado Divi PB Widget. El widget incluso funciona con sus propias áreas de widgets personalizadas.
Ejemplos del generador de widgets Divi
He aquí un vistazo a algunos ejemplos bastante que he preparado. Son simples, pero espero que le den una idea de cómo funciona.
Mapa
Este ejemplo muestra una fuente de blog con una barra lateral. La barra lateral se agrega dentro de un diseño 2/3 Divi con un módulo de blog a la izquierda.
Este ejemplo utiliza un solo módulo de mapa. He incluido el nombre del diseño. No he diseñado el módulo del mapa, por lo que tiene un cuadro blanco a su alrededor. Esto se ajusta fácilmente. Si realizo cambios en el módulo, esos cambios se reflejan en el widget cuando actualizo la página.
Podría simplemente colocar el mapa dentro del diseño de Divi, pero al colocarlo en la barra lateral se muestra el mapa sin importar qué publicación de blog esté leyendo alguien. Esta es la publicación de blog estándar sin usar un diseño Divi. Usando un diseño, podría crear un nuevo mapa para cada publicación, crear una nueva área de widgets y elegir qué mapa mostrar en cada publicación individualmente.
Contador regresivo
Este diseño utiliza múltiples módulos de temporizador de cuenta regresiva para crear un solo widget. He diseñado cada uno por separado.
Los módulos muestran una cuenta regresiva para el próximo juego, uno para cada una de las ligas que cubre el blog. Cada uno de los temporizadores de cuenta regresiva usa colores específicos de los logotipos de la liga e incluye degradados. Lo sé, dejé fuera NHL y varios otros. Lo lamento.
Control deslizante de publicación
Este agrega un control deslizante de publicación a la barra lateral. He incluido el botón Leer más del control deslizante de publicaciones, la navegación de puntos y las flechas. También agregué más widgets regulares para ver cómo encaja.
Acerca de mí
Este usa un diseño de página en lugar de solo un módulo. Creé un diseño a partir de una publicación (en lugar de crearlo en la Biblioteca Divi) usando el diseño Acerca de mí que viene con Divi. Modifiqué el diseño para que todo esté en una sola columna y reduje el tamaño de fuente para el título del encabezado. Luego guardé el diseño en la biblioteca para que estuviera disponible para Divi Widget Builder.
La página en sí es un diseño de Divi Builder llamado Creative Agency. Le di una barra lateral izquierda y elegí el diseño Acerca de mí para el widget.
Este es el mismo diseño, pero en lugar de mostrar la barra lateral estándar de WordPress , he vuelto a crear el diseño usando una sección de especialidad. Esto da como resultado un diseño mucho más agradable que la barra lateral estándar de WordPress, ya que le da más ancho a la página y el widget se puede colocar debajo del módulo de encabezado de ancho completo de Divi.
La sección de especialidad permite 3 columnas dentro de una fila, así que reduje a 3 anuncios publicitarios en lugar de 4 y coloqué la barra lateral en la columna izquierda. Hice la sección de especialidad de ancho completo y cambié el diseño de página en la configuración de publicación de Divi en la esquina superior derecha de la barra lateral izquierda a ancho completo .
Formulario de contacto
Este usa el diseño Our Team que viene con Divi Builder. Estoy usando la barra lateral derecha. Coloqué un widget Monarch en la barra lateral junto con Divi Widget Builder, que muestra un formulario de contacto.
Este tiene 3 widgets Divi Widget Builder en el área de pie de página. Elegí un diseño de pie de página de 3 columnas y coloqué un módulo de formulario de contacto, un módulo de persona y un módulo de control deslizante de blog en las 3 áreas. Este es el increíble paquete de diseño Code School de Jason Champagne. La imagen de la publicación del blog también proviene de este diseño. Puede descargar el diseño del blog de ET aquí: Descargue un paquete de diseño de administración de aprendizaje impresionante (LMS) gratuito para Divi .
Este pie de página usa dos diseños diferentes que creé como publicaciones. Ambos tienen imágenes de fondo. El widget de la izquierda usa varios módulos de texto, un módulo de seguimiento social y un módulo divisor. El elemento del menú debajo de los botones sociales son enlaces en los que se puede hacer clic. También utiliza una superposición para oscurecer la imagen de fondo. El widget de la derecha es un módulo de formulario de contacto.
Usando Divi Widget Builder con Extra
Este es el mismo diseño de Nuestro equipo con Extra. Originalmente había creado el formulario de contacto usando la configuración predeterminada en el módulo. Quería mezclar el fondo, así que lo hice transparente. También cambié el color del texto del botón para hacerlo visible contra el fondo oscuro.
Licencia y Documentación
Hay cuatro licencias disponibles:
- Sitio único $7.00
- 3 Sitios $19.00
- Sitios Ilimitados $39.00
- De por vida $89.00
Incluye un año de soporte y actualizaciones automáticas. La documentación se proporciona en el sitio web del editor .
Pensamientos finales
Divi Widget Builder es simple y fácil de usar. El trabajo proviene de la creación de diseños Divi en lugar de utilizar el generador de widgets. Elegir un diseño dentro del generador de widgets no podría ser más fácil y la capacidad de colocar tantos widgets de Widget Builder en cualquier área de widgets que desee abre muchas posibilidades de diseño Divi y Extra.
Me gustaría ver algunos ejemplos en el sitio web del desarrollador del complemento en acción. Ver algunos casos de uso creativo le daría al comprador ideas sobre cómo usarlo y aprovecharlo al máximo. Si está interesado en colocar diseños y módulos Divi dentro de sus áreas de widgets, Divi Widget Builder podría ser el complemento que está buscando.
Queremos escuchar de ti. ¿Has probado Divi Widget Builder? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de robuart / shutterstock.com