Trick # 296 | Dieser Beitrag beinhaltet 888 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Im Divi-Theme ist ein Portfolio-Modul enthalten, welches mit Filtern dargestellt wird. Wechselt man den Filter werden die anzuzeigenden Beiträge elegant von links nach rechts ins Bild geschoben. Dieser Effekt lässt sich aber verändern: Beiträge können von rechts oder auch von oben – bzw. unten – einfliegen. Eine Petitesse vielleicht; aber ab und an mag das besser passen. Der Hack ist simpel – wir stellen Ihnen den Trick vor.
Um das filterbare Portfolio-Modul dreht sich heute alles. Hier nebenan ein Beispiel:
Klicken Sie auf einen der Filter – dann sehen Sie die Animation, wie sie ohne Zutun mit dem Portfolio-Modul geschieht.
Die Laderichtung ist standardmässig von links nach rechts. Doch da geht mehr.
Mit untenstehendem CSS-Code können Sie ein anderes Verhalten festlegen. Beispielsweise sollen die Beiträge von unten (statt von links) einfliegen.
Kopieren Sie die Zeilen in das CSS-Stylesheet Ihrer Website (im Backend unter Design/Customizer/Zusätzliches CSS):
.et_pb_portfolio_item.active {
animation: fadeBottom 1s 1 cubic-bezier(.77,0,.175,1)!important;
}Das sieht dann so aus:
Auf Zeile 2 des Codes wird definiert, wie die Artikel eingeblendet werden. Anstelle von fadeBottom haben Sie eine Handvoll Möglichkeiten, welche stark für sich sprechen und so heissen, wie das, was sie tun:
- fadeLeft
- fadeRight
- fadeBottom
- multi-view-image-fade
- fadeInRight
- fadeInTop
- fadeOutRight
- fadeOutBottom
- fadeOutTop
Ebenso lassen sich die Timing-Funktionen ersetzen. Erhöhen Sie den Wert bei «1s», bestimmen Sie die Anzahl Sekunden, über welche der Hack läuft. Oder auch das «cubic-bezier(.77,0,.175,1)» lässt sich ersetzen – mit «ease» or “linear.»
Wenn Sie stattdessen die Standard-Animation ganz lioswerden möchten, raten wir Ihnen zur Lektüre des Beitrags «Animation der Filter-Portfolio-Übersichten deaktivieren».
Werbung
Werbung
