Divi Filter es un complemento de terceros para Divi que agrega algunas opciones de filtrado únicas a su sitio web Divi. Te permite usar cualquier módulo Divi como filtro, y cualquier módulo puede incluirse en los resultados filtrados. Hay dos versiones del plugin: gratis y premium . La versión premium tiene las mejores características, pero puedes hacer mucho con la versión gratuita. En este punto destacado del complemento Divi, veremos la versión gratuita de Divi Filter y veremos qué puede hacer para ayudarlo a decidir si es el complemento adecuado para sus necesidades.
Cargue y active el complemento de forma normal.
Ir a:
- Complementos en el tablero de WordPress
- Seleccione Cargar complemento
- Haga clic en Elegir archivo y navegue hasta su complemento
- Seleccione Instalar ahora
Una vez que se active el complemento, verá una ventana emergente con la opción de recibir alertas de seguridad, información sobre actualizaciones de funciones y permitir el seguimiento de diagnóstico no confidencial. Simplemente seleccione Permitir y continuar u Omitir para cerrar la ventana emergente.
Usando el filtro Divi
Divi Filter no agrega módulos o funciones a los elementos Divi. Los filtros se agregan manualmente con clases CSS.
Esto puede ser confuso al principio (especialmente si eres como yo y solo quieres saltar y comenzar a explorar las funciones. Tiendo a sumergirme de cabeza y leer las instrucciones más tarde). Afortunadamente, tiene una documentación bien escrita que lo guiará a través de él. Una vez que lo hayas revisado, tiene sentido y se vuelve más intuitivo.
Divi Filter funciona filtrando las categorías que creas. Los pasos para agregar el filtro son simples:
- Cree un disparador para el filtro agregando una clase CSS. El activador puede ser botones, imágenes, etc. Agregará un nombre de categoría a la clase. Los nombres de las categorías pueden ser cualquier cosa que desee.
- Cree una nueva sección y agregue una clase CSS.
- Agregue los módulos a las columnas que desea filtrar en la nueva sección.
- Agregue clases de CSS a las columnas que contienen las categorías que desea filtrar. Las categorías coinciden con los disparadores.
Reflexiones sobre el proceso manual.
Aunque este es un proceso manual, no es difícil de usar. Podemos usar cualquier módulo Divi. Esto abre muchas posibilidades. Podemos utilizar los módulos en cualquier combinación. Cualquier cosa en la columna se incluirá en los resultados del filtro.
Esto nos permite filtrar mapas, conmutadores, formularios, módulos de texto, menús, tablas de precios, comentarios, botones, código, audio, etc. Dado que el filtro en sí está hecho con módulos Divi, podemos diseñarlos como queramos y usar código, CSS, etc.
Crear un filtro
Para mi primer ejemplo, creé artículos para un centro de ayuda utilizando la página de contacto del diseño del kit de comidas . Los botones se usan para el filtro y los conmutadores se usan para la información. Los conmutadores pueden incluir cualquier tipo de contenido, como tutoriales escritos, videos, etc. He agregado la clase de botón a la pestaña Avanzado. También he añadido una clase con la categoría. En este caso, la categoría es Temas.
A continuación, agregué la clase CSS a la sección que contiene los conmutadores que quiero filtrar.
Finalmente, agregué la clase de categoría a cada columna. Cada uno de los conmutadores coincide con el tema de la columna en la que los he colocado.
Ahora, cuando hago clic en uno de los botones, se muestra esa categoría y se eliminan todas las demás categorías. También puedo crear una manera de traerlos de vuelta. La versión pro los volverá a apilar para que vea varias columnas.
He agregado un nuevo botón que desactivará el filtro y mostrará todas las categorías. Para esto, agregué la clase de botón al campo Clase de CSS, pero no incluí una clase de categoría. Sin la categoría especificada, el botón activará todas las categorías.
Para demostrar el botón Todo, hice clic en un botón para filtrar las categorías. Hice clic en el filtro Complemento, por lo que ahora se muestra la categoría Complemento.
Al seleccionar Todo, se muestran todas las categorías nuevamente. Esta es una manera fácil de eliminar el filtro y permitir que el usuario vea todas las columnas.
Otro ejemplo de filtro Divi
Para este ejemplo, quería crear un filtro solo con texto. El filtro mostrará opciones basadas en las opciones de filtro más populares, la mejor oferta y las más recientes. He agregado las clases CSS a los módulos de texto. El primero solo incluye la clase de botón, por lo que mostrará todas las columnas.
En esta imagen, he agregado la clase de botón y la clase de categoría al módulo de texto Más Popular. También agregaré las clases a los otros dos módulos de texto.
A continuación, estoy agregando las clases de CSS a cada columna. Cada columna contiene una propaganda. El filtro mostrará solo uno de los tres anuncios publicitarios.
Finalmente, estoy agregando la clase CSS df-area a la sección que contiene los anuncios publicitarios.
Al hacer clic en cualquiera de los módulos de texto, se muestra la propaganda de esa categoría. Los otros dos anuncios publicitarios ahora están ocultos.
Hacer clic en Ver todo los trae de vuelta.
Decidí experimentar y agregar múltiples categorías a cada columna. A veces, un elemento debe incluirse en varias categorías. Este es sin duda el caso cuando su filtro incluye términos como las últimas o las mejores ofertas.
Divi Filter funcionó exactamente como se esperaba. Agregué dos categorías a cada columna y ahora cada uno de los filtros muestra dos columnas en lugar de una.
Ejemplo de filtro Third Divi
Para mi tercer ejemplo de Divi Filter, quería continuar con mi línea de pensamiento del ejemplo anterior, pero quería ser un poco más complejo. Crearé una lista de recetas con módulos de texto como disparadores. Esto incluirá múltiples categorías y las agregaré a las columnas en varias combinaciones. Este ejemplo utiliza la página Recetas del paquete de diseño Meal Kit Divi . He agregado las clases CSS adecuadas a los módulos de texto.
La sección incluye la clase Area. Estoy usando imágenes para los elementos filtrados.
Agregaré múltiples categorías a cada columna. Por supuesto, en la vida real, los elementos deberán coincidir con esas categorías. Estoy eligiendo imágenes al azar para la captura de pantalla.
Aquí está la página que muestra todas las recetas. Este está configurado en tres columnas.
Aquí está la página con un filtro seleccionado. Filtra una columna.
Agregué más columnas para tener más combinaciones de categorías.
Mi resultado muestra cuatro columnas con un filtro seleccionado. Por supuesto, tendría que tener cuidado al elegir estas categorías, pero creo que esto funciona para entender el punto. No importa cuántas columnas tenga, qué módulos haya en ellas o cuántos módulos tenga. El filtro funciona igual independientemente.
Cómo obtener el filtro Divi
Divi Filter está disponible de forma gratuita en Divi Marketplace . La versión gratuita solo filtra columnas, pero puedes hacer mucho con esta versión.
La versión premium agrega el filtro a las filas, animaciones de filtro, filtros desplegables, filtros ilimitados en todas las páginas y más. Estas características ampliarán lo que puede filtrar y las animaciones le darán un aspecto refinado.
La versión pro comienza en 19€. Puede actualizar a la versión pro dentro del complemento gratuito, por lo que puede probar la versión gratuita y actualizar a la versión pro en cualquier momento. Hay varios diseños disponibles en la versión pro para que pueda comenzar. También puedes comprarlos por separado.
Pensamientos finales sobre el filtro Divi
Esa es nuestra mirada a Divi Filter. Tienes que crear los filtros manualmente. Afortunadamente, no es difícil y esto te da mucho control. Una vez que lo ha recorrido, es lo suficientemente fácil de usar sin pensar demasiado en ello. Me gusta cómo funciona porque se puede usar cualquier cosa como disparador y se puede colocar cualquier cosa en las columnas. El contenido no hace ninguna diferencia. Esto lo distingue del filtro de contenido estándar.
Estos ejemplos solo cubren lo que se puede hacer en la versión gratuita. La versión pro le brinda más control y más elementos a los que puede aplicar los filtros. Recomiendo encarecidamente probar la versión gratuita para ver si puede hacer lo que necesita y luego actualizar si desea usar el complemento.
Queremos escuchar de ti. ¿Has probado el filtro Divi? Háganos saber lo que piensa al respecto en los comentarios a continuación.
Imagen destacada a través de H12 / shutterstock.com