Destacado del complemento Divi: Divi FilterGrid

Encuéntrelo en el mercado Divi

¡ Divi FilterGrid está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Plugins en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).

Compra en el mercado Divi

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 lo fácil que es usarlo. Puede comprar el complemento desde el sitio web del desarrollador.

Módulo Divi FilterGrid

El módulo Divi FilterGrid se agrega a Divi Builder. El icono es de color y destaca sobre el resto.

Pestaña de contenido Divi FilterGrid

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.

Publicar elementos

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, muestro 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. Hacer clic en el título de la publicación aún abre la publicación en la misma pestaña.

También puede cambiar el color de la superposición, el ícono y el color del ícono. He personalizado 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 número de caracteres del extracto, mostrar un botón de leer más, agregar campos personalizados y más. Agregué un extracto y deshabilité la publicación meta.

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 las opciones de orden. He elegido una categoría en este ejemplo.

Las opciones Avanzadas le brindan varias características 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 orden para las taxonomías.

El tipo de consulta personalizada le permite usar contenido personalizado. Proporciona un enlace a la documentación donde puede aprender cómo configurar esto. 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 para cargar más o para cargar más en el desplazamiento. Para la opción paginada, puede elegir las flechas, el texto y la cantidad 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, los filtros, el filtro activo, la paginación y la 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.

Pestaña de 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 de medianil de columna y fila y el tamaño de fuente de la cuadrícula. Reduje el ancho de los elementos, eliminé el margen y seleccioné Midnight para la máscara. También he reducido el tamaño de la fuente.

Esto es 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.

Estos son elementos en superposición. 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 amplía al pasar el mouse por encima.

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 usa el aspecto predeterminado.

Esto es ancho completo. Coloca el título, meta y extracto en la parte inferior de la imagen.

Pestaña 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 elementos. Esto crea un bonito diseño de galería de mosaicos.

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 diseñé el 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 liviano. Redondeé los bordes y le di un degradado de fondo.

No se muestra en el modo de edición, 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 para el 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 fuente, agregué espacio entre caracteres, ajusté el borde, agregué un degradado y deshabilité mostrar solo 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 del 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 de WooCommerce.

Ahora tengo un módulo de producto de WooCommerce que puedo diseñar a mi antojo.

Ejemplo de blog Divi FilterGrid

Para este ejemplo, he reemplazado 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 de WooCommerce para que aparecieran en la lista de blogs. Esta es una excelente manera de agregar varios tipos de contenido dentro de su flujo de blog.

El resultado se ve increíble. Crea un blog filtrable, o puede deshabilitar el filtro y simplemente mostrar el contenido.

Módulo Divi FilterGrid Documentación y precio

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 usarla.

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 desde el sitio web del desarrollador.

pensamientos finales

Divi FilterGrid es un complemento interesante. Es un excelente módulo para mostrar diferentes tipos de contenido. Puede mostrar prácticamente cualquier tipo de publicación y mostrar varios tipos de publicaciones juntos. 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 movieran a la pestaña Diseño. Sin embargo, es bueno poder personalizar los colores de forma independiente.

Me pareció muy intuitivo. Recomiendo explorar para ver todas las opciones. Si está interesado en agregar una poderosa cuadrícula filtrada 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