So erstellen Sie überlappende Animationen bei Verzögerung mit Divi

Veröffentlicht: 2019-04-12

Ein großer Teil des Erfolgs Ihrer Website hängt davon ab, ob Sie Ihre Besucher beeindrucken können oder nicht. Nicht nur mit Ihren Produkten oder Dienstleistungen, sondern auch mit der Art und Weise, wie Sie kommunizieren und wie gut Ihre Website gestaltet ist. Denn seien wir ehrlich, Websites sind oft der erste Eindruck. Und ähnlich wie bei jedem anderen ersten Eindruck möchten Sie, dass er einen guten Nachgeschmack hinterlässt.

Wenn Sie nun nach einer einzigartigen Möglichkeit suchen, einige Ihrer Inhalte ins Rampenlicht zu rücken, ist die Erstellung subtiler überlappender Animationen möglicherweise genau das Richtige für Sie. Diese subtilen überlappenden Animationen sind für Ihre Besucher eine Art Diashow. Sie müssen nichts scrollen oder anklicken, der Inhalt wird einfach auf elegante Weise angezeigt.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

überlappende Animationen

Handy, Mobiltelefon

überlappende Animationen

Sich nähern

Wir beginnen damit, dass wir alle benötigten Designelemente in vertikaler Reihenfolge ohne Überlappung hinzufügen
Da wir alle Designelemente hinzufügen, fügen wir auch benutzerdefinierte Animationen mit einer bestimmten Animationsverzögerung hinzu
Diese Animationsverzögerungen machen erst dann Sinn, wenn Sie den letzten Teil des Tutorials durchgearbeitet haben, der sich auf Überschneidungen konzentriert
Ein wichtiger Teil dieses Tutorials besteht darin, geformte Teilermodule mit derselben Hintergrundfarbe wie der Abschnitt zu verwenden, um den Zeileninhalt bei Verzögerung 'verschwinden' zu lassen
Sie können diese Technik auf jede Art von Design anwenden, an dem Sie arbeiten, sobald Sie die verschiedenen Schritte verstanden haben, die erforderlich sind, damit der Ansatz funktioniert

Beginnen wir mit dem Erstellen!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, eine neue Seite zu erstellen oder eine vorhandene zu öffnen, und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie einen Hintergrund hinzu.

Hintergrundfarbe: #f3f3ec

überlappende Animationen

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

überlappende Animationen

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen. Der Grund, warum wir dies tun, ist, den gesamten Standardpixelabstand loszuwerden. In den nächsten Schritten fügen wir den benötigten Platz stattdessen mithilfe einer Ansichtsfenstereinheit hinzu.

Machen Sie diese Zeile in voller Breite: Ja
Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1

überlappende Animationen

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Beginnen wir mit dem Hinzufügen von Modulen! Das erste Modul, das wir brauchen, ist ein Textmodul mit H2-Inhalten. Denken Sie daran, dass dieses Modul nach ein paar Sekunden "verschwindet", daher sollten Sie es kurz, relevant und einprägsam halten.

überlappende Animationen

H2-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H2-Texteinstellungen.

Überschrift 2 Schriftart: Poppins
Überschrift 2 Textfarbe: #333333
Überschrift 2 Textgröße: 5vw

überlappende Animationen

Abstand

Erstellen Sie den gewünschten Raum, indem Sie in den Abstandseinstellungen etwas linkes und rechtes Padding verwenden.

Linke Polsterung: 15vw
Rechte Polsterung: 39vw

überlappende Animationen

Trennmodul zur Spalte hinzufügen

Sichtweite

Weiter zum nächsten Modul, das ein Teilermodul ist. Wir verwenden dieses Modul, um das Textmodul "verschwinden" zu lassen. Dafür brauchen wir vier Dinge; eine Hintergrundfarbe (d. h. in der gleichen Farbe wie der Abschnitt, damit Sie es nicht bemerken), genügend Abstand (um sicherzustellen, dass Sie den gesamten Inhalt des vorherigen Moduls überlappen können), eine vertikale Überlappung (um das gesamte Modul abzudecken Bereich) und eine Animationsverzögerung (um dem ersten Modul Zeit zu geben, seinen Glanz zu haben, bevor es übernommen wird). Stellen Sie nach dem Hinzufügen des Teilermoduls sicher, dass Sie die Option "Teiler anzeigen" deaktivieren.

Teiler anzeigen: Nein

überlappende Animationen