Destacado del complemento Divi: Divi FilterGrid


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

En este complemento destacado, echaremos un vistazo a Divi FilterGrid, veremos qué puede hacer y veremos qué fácil es usarlo. Usted puede compra el complemento del sitio web del desarrollador.

Módulo Divi FilterGrid

El módulo Divi FilterGrid se agrega al Divi Builder. El ícono está en color y se destaca del resto.

Divi FilterGrid Content Tab

La pestaña Contenido agrega muchas características. 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 publicación

Las opciones de Elementos de publicación le permiten mostrar u ocultar la imagen presentada y luego determinar la acción en 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 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 recuento de caracteres del extracto, mostrar un botón Leer más, agregar campos personalizados y más. Agregué un extracto y deshabilité la meta 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 desplazamiento y el orden por opciones. Elegí una categoría en este ejemplo.

Las opciones avanzadas le ofrecen varias funciones nuevas. Seleccione tipos de publicaciones específicas, taxonomías, términos y excluya términos y taxonomías. También puedes mostrar publicaciones privadas y publicaciones fijas. En el ejemplo anterior, estoy estableciendo 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 detalles adicionales 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 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 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.

Antecedentes

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ías en un módulo Divi. En el ejemplo anterior, he ajustado 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, publicar texto del título, publicar texto de metadatos, publicar texto de contenido, filtrar texto, texto de paginación, leer más botón, cargar más botón 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 canal de la columna y la fila, y el tamaño de fuente de la cuadrícula. Disminuí el ancho de los artículos, eliminé la canaleta y seleccioné Midnight para la máscara. También reduje el tamaño de letra.

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.

Esto es artículos 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 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 con la máscara predeterminada.

Esto es de 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 orientar elementos específicos para personalizar.

Diseño del módulo Divi FilterGrid

Las opciones de diseño pueden crear algunos diseños interesantes. En este ejemplo, he reducido el ancho para que se muestren en una sola fila. También he eliminado 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 ligero. 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, he agregado la imagen detrás de mi degradado verde.

El texto de metadatos de publicación ajusta todos los metadatos de 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 ajustarlo 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é algunos espacios 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é el espacio entre caracteres, ajusté el borde, agregué un degradado y deshabilité solo mostrar el ícono al pasar el mouse.

Divi FilterGrid y tipos de publicaciones personalizadas

Me resultó 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 el suyo propio o deshabilitarlo. En las opciones de filtro, haga clic en filtrar taxonomías y elija sus taxonomías de la lista. Hacer clic Establecer valores.

Ahora tengo un filtro personalizado para mis productos WooCommerce.

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

Ejemplo de blog de Divi FilterGrid

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

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

Documentación y precio del módulo Divi FilterGrid

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 para cada función en el 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

Usted puede compra el complemento del 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 juntas. Las opciones de filtrado pueden ser tan complejas como desee que sean.

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 toque 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 cuadrícula filtrada potente para mostrar sus tipos de publicación, 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