Lesefortschritt:

Schwebende Bilder und Texte auf der Divi-Website

21. Juni 2023 | CSS-Stylesheet, WordPress

Dieser Beitrag beinhaltet 780 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Animierte Bilder und Texte sind eine grossartige Funktion, die Aufmerksamkeit erheischen und Ihre Website von anderen unterscheidet. Wir zeigen Ihnen hier, wie Sie ihren Bildern und anderen Divi-Elementen das «Schweben» beibringen.

Ein Bild sagt bekanntlich mehr als 1000 Worte – darum zeigen wir Ihnen erst mal, worum es geht:

 

 

Die Texte und das Bild schweben auf der Website auf und ab. Dies erreichen wir mit einem kleinen CSS-Code, welchen Sie auf Ihrer Website hinterlegen.

Kopieren Sie also den folgenden Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein. Und zwar im Backend unter Design/Customizer/Zusätzliches CSS:

@keyframes floating { 
    0% {transform: translate(0,  0px);} 
    50%  {transform: translate(0, 20px);} 
    100%   {transform: translate(0, 0px);}     
} 

.floating {   
  animation: floating 7s ease-in-out infinite;
  /* animation-iteration-count: 2; */
}
 
.floating1 {
  animation-delay: -4.5s;
}
 
.floating2 {
  animation-delay: -3s;
} 

Im Code haben wir in der Zeile 9 eine Option eingebaut: Wenn Sie das /* am Anfang und das */ am Ende der Zeile entfernen, wird die Animation nach zwei Durchläufen abgebrochen. Diesen Wert können Sie natürlich verändern, indem Sie eine andere Zahl einsetzen.

Nun müssen Sie noch die CSS-Klassen in die jeweiligen Elemente eintragen. Dafür bearbeiten Sie nacheinander alle Divi-Module, welche den Effekt zeigen sollen, wechseln in den Tab «Erweitert», klicken dort auf «CSS-ID und Klassen» und tragen im Textfeld «CSS Klasse» die gewünschten Klassen ein. Diese Klassen lassen sich auch kombinieren.

Unten zeigen wir Ihnen, welche Klassen in unserem Beispiel verwendet wurden:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

>>> verwendete CSS-Klassen:
floating floating1

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

>> verwendete CSS-Klassen:
floating floating2
>>> verwendete CSS-Klasse:
floating

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This