Resaltado del complemento Divi: Divi FilterGrid

Divi FilterGrid es un complemento de terceros que agrega un nuevo módulo filtrable a Divi Builder. Puede mostrar publicaciones de cualquier tipo de publicación personalizada y crear filtros personalizados para mostrarlas de acuerdo con cualquier taxonomía que elija. Muestre publicaciones de blog, proyectos, productos, cree galerías y mucho más.

En este complemento destacado, echaremos un vistazo a Divi FilterGrid, veremos lo que puede hacer y veremos lo fácil que es de usar. Puede comprar el complemento en el sitio web del desarrollador.

Módulo FilterGrid Divi

El módulo Divi FilterGrid se agrega al Divi Builder. El icono es de color y se distingue del resto.

Ficha Contenido de cuadrícula de filtro Divi

La pestaña Contenido agrega muchas funciones. Incluyen elementos de publicación, opciones de consulta, opciones de filtro, opciones de paginación y fondo para ajustar todos los colores de fondo. También incluye el enlace estándar y las opciones de etiqueta de administrador.

Elementos de la publicación

Las opciones de Elementos de publicación le permiten mostrar u ocultar la imagen destacada y luego determinar la acción de la miniatura. Puede vincular a la publicación, mostrar la imagen en una caja de luz, en una galería de caja de luz, mostrar la publicación en una ventana emergente o abrir una galería de caja de luz personalizada. Para este ejemplo, estoy mostrando la publicación en una ventana emergente.

Este abre la imagen en una galería de lightbox. El lector puede seleccionar las flechas para ver las imágenes destacadas de todas las publicaciones. Al hacer clic en el título de la publicación, aún se abre la publicación en la misma pestaña.

También puede cambiar el color de la superposición, el icono y el color del icono. Personalicé cada uno de estos en la imagen de arriba. También puede mostrar el título, agregar el enlace al título, agregar un extracto, limitar el recuento de caracteres del extracto, mostrar un botón Leer más, agregar campos personalizados y más. Agregué un extracto y deshabilité el meta de la publicación.

Opciones de consulta

Las Opciones de consulta le permiten elegir el tipo de consulta entre Básico, Avanzado y Personalizado. Elija las categorías, el número de publicación, el número de compensación y ordene por opciones. Elegí una categoría en este ejemplo.

Las opciones avanzadas le ofrecen varias funciones nuevas. Seleccione tipos de publicaciones, taxonomías y términos específicos y excluya términos y taxonomías. También puede mostrar publicaciones privadas y publicaciones fijas. En el ejemplo anterior, estoy configurando una taxonomía. Me permite elegir las categorías o etiquetas específicas que quiero usar y luego especificar su relación con el término de búsqueda. Los términos secundarios funcionan de la misma manera. Esto le permite obtener más detalles y no solo mostrar publicaciones basadas en categorías o etiquetas. También puede establecer el número de publicación y las opciones de pedido para las taxonomías.

El tipo de consulta personalizada le permite utilizar contenido personalizado. Proporciona un enlace a la documentación donde puede aprender a configurarlo. Las consultas personalizadas se realizan con código en el archivo functions.php. La documentación incluye varios ejemplos para guiarlo.

Opciones de filtros

Las opciones de filtros le permiten filtrar la cuadrícula por términos de búsqueda. Seleccione el filtro predeterminado y verá un modal donde puede elegir categorías y etiquetas para publicaciones y proyectos. También puede establecer el orden y filtrar por ID, nombre o un pedido personalizado. Para el pedido personalizado, verá un cuadro donde puede ingresar los valores separados por comas.

Opciones de paginación

Las Opciones de paginación le permiten elegir el tipo de paginación. Elija entre paginado, un botón cargar más o cargar más en el desplazamiento. Para la opción paginada, puede elegir las flechas, el texto y el número de páginas que se muestran en los enlaces. Agregué texto y cambié las flechas en este ejemplo.

Fondo

La configuración de Fondo le permite personalizar los fondos de la cuadrícula, filtros, filtro activo, paginación y paginación activa. También incluye las opciones de fondo estándar que esperaría en un módulo Divi. En el ejemplo anterior, ajusté los colores de fondo para el filtro, la cuadrícula y la paginación.

Ficha Diseño Divi FilterGrid

La pestaña Diseño proporciona personalizaciones para las opciones de diseño, el texto del título de la publicación, el texto de los metadatos de la publicación, el texto del contenido de la publicación, el texto de los filtros, el texto de paginación, el botón Leer más, el botón Cargar más y todas las opciones estándar del módulo Divi.

Opciones de diseño

Las Opciones de diseño le permiten seleccionar un diseño, una máscara, establecer el ancho de los elementos, el tamaño del margen de la columna y la fila y el tamaño de la fuente de la cuadrícula. Disminuí el ancho de los elementos, eliminé el canalón y seleccioné Medianoche para la máscara. También reduje el tamaño de la fuente.

Estos son los filtros verticales izquierdos. Coloca los filtros en una pila vertical al lado izquierdo. He aumentado el ancho de los elementos para que las imágenes sean más grandes.

Se trata de elementos superpuestos. Las publicaciones son más cortas en esta opción.

Zoom Image muestra cada imagen con una superposición y el título en el centro. La imagen se acerca al pasar el mouse.

La biblioteca muestra las tarjetas con un borde y coloca el título sobre la imagen.

Este es el diseño de la lista que utiliza la máscara predeterminada.

Este es Fullwidth. Coloca el título, meta y extracto en la parte inferior de la imagen.

Ficha Avanzada del módulo Divi FilterGrid

La pestaña Avanzado agrega 15 campos CSS personalizados para casi todos los elementos dentro del módulo. Los usuarios de CSS no tendrán problemas para seleccionar elementos específicos para personalizar.

Estilo del módulo Divi FilterGrid

Las opciones de diseño pueden crear algunos diseños interesantes. En este ejemplo, reduje el ancho para que se muestren en una sola fila. También eliminé el meta y el extracto.

Para este, aumenté el ancho de los artículos. Esto crea un bonito diseño de galería de mosaico.

En este, agregué el título, todo el meta, el extracto y el botón leer más. Cambié el color del título, lo hice todo en mayúsculas, aumenté el tamaño, lo centré y aumenté el espacio entre caracteres. También reduje el tamaño del botón leer más y le di estilo al texto en blanco.

Hay muchas opciones de estilo para el botón leer más. Para este, volví al tamaño predeterminado pero hice que el texto fuera más liviano. Redondeé los bordes y le di un degradado de fondo.

No se muestra en el modo editor, pero también puede agregar una imagen al botón. Puede agregar la imagen sola, con una superposición sólida o con una superposición de degradado. En este ejemplo, agregué la imagen detrás de mi degradado verde.

El texto de los metadatos de la publicación ajusta todos los metadatos de la publicación juntos. He cambiado el color y el interlineado.

El texto de los filtros le permite diseñar la fuente del filtro. Aumenté el tamaño de la fuente, cambié el color y agregué un efecto de sombra. El estilo de filtro predeterminado tiene un color diferente para el filtro seleccionado. Puede ajustar eso por separado en la opción de fondos en la pestaña Contenido.

En este ejemplo, estoy ajustando el texto de paginación. Cambié el color, aumenté el tamaño, agregué algo de espacio entre caracteres y agregué una sombra. También he ajustado la intensidad del desenfoque.

El botón cargar más también incluye las opciones básicas de estilo. Estoy usando el texto predeterminado (se puede cambiar en la pestaña de contenido). También configuré el texto en blanco (es verde por defecto).

Aumenté el tamaño de la fuente, agregué el espaciado de caracteres, ajusté el borde, agregué un degradado y deshabilité solo mostrar el ícono al pasar el mouse.

Divi FilterGrid y tipos de publicaciones personalizadas

Lo encontré fácil de usar con tipos de publicaciones personalizadas. En las opciones de consulta, haga clic en Seleccionar tipos de publicación y luego seleccione el tipo de publicación en el modal.

Todavía muestra el filtro original, pero puede crear uno propio o deshabilitarlo. En las opciones de filtro, haga clic en filtrar taxonomías y elija sus taxonomías de la lista. Haga clic en Establecer valores .

Ahora tengo un filtro personalizado para mis productos WooCommerce.

Ahora tengo un módulo de producto de WooCommerce que puedo diseñar al contenido de mi corazón.

Ejemplo de blog Divi FilterGrid

Para este ejemplo, reemplacé el módulo de blog de la página de blog de diseño de Dog Walker. Lo diseñé para que coincidiera con los colores, los estilos de fuente y las esquinas redondeadas de las publicaciones. Luego agregué productos WooCommerce para que aparecieran en la lista de blogs. Esta es una excelente manera de agregar varios tipos de contenido dentro de la transmisión de su blog.

El resultado luce asombroso. Crea un blog filtrable, o puede deshabilitar el filtro y simplemente mostrar el contenido.

Documentación y precio del módulo Divi FilterGrid

La documentación está disponible en el sitio web del desarrollador. Haga clic en los botones para ver información específica sobre funciones avanzadas. Puede visitar la página de preguntas frecuentes o enviar un ticket de soporte desde aquí. También puede hacer clic en el signo de interrogación de cada función del módulo para ver una explicación de cómo usarlo.

Hay cuatro opciones para comprar Divi FilterGrid:

• Sitio único - $ 19
• 5 sitios - $ 39
• Sitios ilimitados - $ 59
• Sitios ilimitados de por vida - $ 129

Puede comprar el complemento en el sitio web del desarrollador.

Pensamientos finales

Divi FilterGrid es un complemento interesante. Es un módulo excelente para mostrar diferentes tipos de contenido. Puede mostrar prácticamente cualquier tipo de publicación y mostrar varios tipos de publicaciones juntas. Las opciones de filtrado pueden ser tan complejas como desee.

Me encanta tener las opciones de ajuste de color para los fondos. Tener las opciones de color en la pestaña Contenido significa que las opciones de color están en dos ubicaciones diferentes. Creo que sería un poco más intuitivo si esos ajustes de color se trasladaran a la pestaña Diseño. Sin embargo, es bueno poder personalizar los colores de forma independiente.

Lo encontré muy intuitivo. Recomiendo explorar para ver todas las opciones. Si está interesado en agregar una cuadrícula filtrada poderosa para mostrar sus tipos de publicaciones, Divi FilterGrid es un complemento fácil de recomendar.

Queremos escuchar de ti. ¿Has probado Divi FilterGrid? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Thepanyo / shutterstock.com