Filtere
jedes Modul
aus dem Divi Theme

Das Divi Filter Plugin ermöglicht es dir ganz einfach jedes Modul zu filtern. Und das alles nur mit ein paar CSS Klassen.

Divi Filter

Demo

Klicke dazu einfach einen der 4 Buttons an und schau was passiert. Mehr Demos findest du hier.

ice cream PNG20975

Vanilla

Cone

ice cream PNG20993

Vanilla

Stick

ice cream PNG5103

Strawberry

Cone

ice cream PNG20968

Nut

Cone

ice cream PNG5105

Soft ice

Cone

ice cream PNG5092

Chocolate

Stick

ice cream PNG20984

Strawberry

Cone

ice cream PNG5125

Vanilla

Stick

ice cream PNG5091

Mixed

Cup

ice cream PNG5097

Strawberry

Cone

ice cream PNG20986

Mixed

Cup

ice cream PNG20977

Strawberry

Cup

ice cream PNG5080

Soft ice

Cone

ice cream PNG5096

Chocolate

Cone

Download

Lade dir hier die kostenlose Version herunter und hol dir später eine Premium Lizenz, um alle Features zu erhalten. Den Lizenz Key musst du dann einfach unter Einstellungen → Divi Filter eingeben.

Filtere alle Module

Mit dem Divi Filter kannst du jedes Modul oder jede Kombination von Modulen aus dem Divi Theme filtern.

Mit der kostenlosen Version, kannst du Spalten und mit einer Premium Lizenz auch Zeilen in Divi zu filtern. Damit kannst du zum Beispiel diese CSS Grid Demo erstellen.

Divi Filter Demo All Modules
Divi Filter Plugin Team Example

Unzählige Möglichkeiten

Es ist möglich, so viele verschiedene Filter zu erstellen. Lass dich von dieser Demo Seite inspirieren.

Du kannst auch Filter für deine Blogposts, Portfolio, Partner oder dein Team erstellen.

Erstelle auffallende Abschnitte

Ein interaktiver Filter bringt deine Besucher dazu, auf deiner Webseite zu bleiben, verbessert dadurch die Besucher-Erfahrung und damit auch dein SEO.

Es ist auch sehr einfach Animationen hinzuzufügen.

Divi Filter Tutorial

Features

Lade dir jetzt die kostenlose Version herunter und teste den Divi Filter. Falls er dir gefällt, kannst du hier noch eine Premium Lizenz erhalten. Die Lizenz gilt für eine Webseite, aber ist einfach übertragbar.

Kostenlos

– Filtern von Spalten

 

Premium

– Filtern von Spalten oder Zeilen

– Animationen

– Mehrere Filter auf jeder Seite

– Und mehr … (siehe Dokumentation)

19€

Premium Lifetime

– Filtern von Spalten oder Zeilen

– Animationen

– Mehrere Filter auf einer Webseite

– Einmalige Zahlung

49€

Einrichtung

Hier findest du eine Zusammenfassung der CSS Klassen, die du hinzufügen musst. Eine ausführlichere Erklärung findest du hier.

Buttons

df-button

dfc-[Filter-Kategorie] (für jede Klasse die du mit diesem Button filtern möchtest)

Abschnitt

df-area

df-rows (falls du Zeilen, statt Spalten filtern möchtest)

Spalten / Zeilen

dfc-[Filter-Kategorie] (füge diese Klasse jeder Spalte / Zeile hinzu, die du filtern möchtest)

FAQ

Alles mit einem Stern (*) gekennzeichnet sind Premium Features. Eine durchsuchbare Dokumentation findest du hier.

Allgemein

Wo kann ich das Plugin herunterladen?

Du kannst es hier herunterladen.

Wie lade ich das Plugin auf meine WordPress Seite?

Lade es dir einfach hier herunter und dann lade is als ZIP im WordPress Dashboard hoch.

Oder lade es entzippt per FTP hoch mit z.B. Filezilla in den Ordner wp-content -> plugins.

Key

Mit einem Key erhältst du alle Premium Features.

Du erhältst einen Key hier.

Um diesen zu aktivieren, gehe bitte im WordPress Dashboard zu Einstellungen und dann auf Divi Filter.

Filter Spalten

Buttons

Schritt 1:

Klick auf das graue Zahnrad Icon, um die Button Einstellungen zu öffnen (auf dem Button, mit dem du filtern möchtest.

Module Settings Divi

Schritt 2:

Gehe zu Erweitert -> CSS-ID & Klassen -> CSS Klasse. Hier fügst du df-button hinzu.

Step 3:

Zusätzlich fügst du für jede Kategorie, die du filtern möchtest eine zusätzliche Klasse hinzu: dfc-[Filter-Kategorie] z.B. dfc-autos.

 

Wichtig: Buttons müssen in einem seperaten Abschnitt sein.

Abschnitt

Schritt 1:

Klicke auf das blaue Zahnrad Icon, um die Abschnittseinstellungen zu öffnen.

Section Settings Divi

Schritt 2:

Gehe zu Erweitert -> CSS-ID & Classes -> CSS Klasse. Hier fügst du eine df-area Klasse hinzu.

Spalten

Schritt 1:

Klicke auf das grüne Zahnrad Icon, um die Zeileneinstellungen zu öffnen.

Row Settings Divi

Schritt 2:

In den Zeileneinstellungen klickst du nochmal auf das Zahnrad Icon, um in die Zeileneinstellungen zu kommen.

Row Settings Divi open

Schritt 3:

Gehe zu erweitert-> CSS-ID & Klassen -> CSS Klasse.

Hier fügst du alle Kategorien hinzu, die auf diese Spalte zutreffen: dfc-[Filter-Kategorie] z.B. deine dfc-autos Klasse.

Schritt 4:

Mache das für alle Klassen, die du filtern möchtest

Filter Zeilen*

Buttons

Schritt 1:

Klick auf das graue Zahnrad Icon, um die Button Einstellungen zu öffnen (auf dem Button, mit dem du filtern möchtest.

Module Settings Divi

Schritt 2:

Gehe zu Erweitert -> CSS-ID & Klassen -> CSS Klasse. Hier fügst du df-button hinzu.

Step 3:

Zusätzlich fügst du für jede Kategorie, die du filtern möchtest eine zusätzliche Klasse hinzu: dfc-[Filter-Kategorie] z.B. dfc-autos.

 

Wichtig: Buttons müssen in einem seperaten Abschnitt sein.

Abschnitt

Schritt 1:

Klicke auf das blaue Zahnrad Icon, um die Abschnittseinstellungen zu öffnen.

Section Settings Divi

Schritt 2:

Gehe zu Erweitert -> CSS-ID & Classes -> CSS Klasse. Hier fügst du eine df-area Klasse hinzu.

Zeilen

Schritt 1:

Klicke auf das Zahnrad-Icon, um die Zeileneinstellungen zu öffnen.

Row Settings Divi

Schritt 2:

Gehe zu Erweitert CSS-ID & Klassen -> CSS-Klasse.

Hier fügst du alle dfc-[Filter-Kategorie] Klassen hinzu, die zutreffen. you want e.g. your dfc-cats class.

Schritt 3:

Wiederhole das für alle Zeilen, die du filtern möchtest.

Styling

Animation*

Erstelle einfach ein CSS keyframe Animation für die df-animation Klasse.

Zum Beispiel:

.df-animation {animation: animation1; animation-duration: 2s;}

/* ändert Sichtbarkeit von 0 auf1 */

@keyframes animation1 {
0% {opacity: 0;}
100% {opacity: 1;}
}

/* macht Elemente erste grau */

@keyframes animation2 {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}

/* skaliert das Element von 0 auf 100% wärend es die Sichtbarkeit erhöht. */

@keyframes animation3 {
0% {transform: scale(0);opacity: 0;}
100% {transform: scale(1);opacity: 1;}
}

 

Mehr Informationen über keyframe Animationen findest du bei w3schools.

Große Abstände nach dem Filtern

Füge dafür die df-hide Klasse, zu deinem df-area Abschnitt hinzu.

Diese setzt den Margin, Padding und die Höhe der versteckten Elemente auf 0.

Aktiver Button*

Um den aktiven Button zu stylen, verwendest du die df-activebutton Klasse, diese wird vom Divi Filter Plugin automatisch dem aktiven Button hinzugefügt.

Zum Beispiel:

/* macht den aktiven Button dunkler */

.df-activebutton {filter: brightness(50%);}

Pin It on Pinterest