So erstellen Sie animierte Rahmenüberlappungen, um Inhalte mit Divi . hervorzuheben

Suchen Sie nach einer einzigartigen Möglichkeit, einen bestimmten Teil Ihrer Seite ins Rampenlicht zu rücken? Lesen Sie weiter! Heute zeigen wir Ihnen, wie Sie animierte Rahmenüberlappungen erstellen, um Inhalte auf Ihrer Seite hervorzuheben. Wir erstellen drei verschiedene animierte Rahmenüberlappungen auf der Landingpage des App Developer Layout Packs, aber Sie können diese Technik für jede Art von Website verwenden, die Sie erstellen. Es wird Ihnen auf jeden Fall helfen, Ihrer Seite eine zusätzliche Dimension hinzuzufügen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, auch Ihre eigenen alternativen animierten Rahmenüberlappungen zu erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis aller drei Beispiele. Sie können ein ähnliches Ergebnis auch auf kleineren Bildschirmgrößen erwarten.

Beispiel 1

Beispiel #2

Beispiel #3

Abonnieren Sie unseren Youtube-Kanal

Neue Seite mit der Landing Page des App Developer Layout Pack erstellen

Als erstes müssen Sie eine neue Seite mit der Landingpage des App Developer Layout Pack erstellen.

Heldenabschnitt klonen

Unsere ersten beiden Beispiele werden im Heldenbereich erstellt. Wenn Sie beide Beispiele neu erstellen möchten, wird empfohlen, den Heldenabschnitt zu klonen, damit Sie mit dem Duplikat fortfahren können, um das zweite Beispiel neu zu erstellen.

Beispiel 1 neu erstellen

Neue Zeile zum Heldenabschnitt hinzufügen

Spaltenstruktur

Fangen wir an, das erste Beispiel neu zu erstellen! Fügen Sie im Spezialbereich eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Textmodul hinzufügen

Inhaltsbox leer lassen

Fügen Sie der Zeile ein neues Textmodul hinzu und lassen Sie das Inhaltsfeld leer. Wir verwenden das Modul für seine integrierten Designoptionen, nicht um geschriebenen Inhalt anzuzeigen.

Abstand

Gehen Sie zu den Abstandseinstellungen des Textmoduls und geben Sie dem Modul eine Form, indem Sie benutzerdefinierte obere und untere Abstände hinzufügen. Erstellen Sie die Überlappung zwischen diesem Modul und den vorherigen Modulen, indem Sie auch einen negativen oberen Rand hinzufügen.

• Oberer Rand: -480px
• Obere Polsterung: 223px
• Untere Polsterung: 223px

Grenze

Gehen Sie dann zu den Rahmeneinstellungen des Moduls und fügen Sie einen Rahmen Ihrer Wahl hinzu.

• Rahmenbreite: 9px
• Rahmenfarbe: #0ae2ff
• Rahmenstil: Anfang

Box Schatten

Fügen Sie auch einen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 1px
• Stärke der Box-Schattenausbreitung: 15px
• Schattenfarbe: rgba (10,226,255,0,59)

Animation

Und spielen Sie mit den Animationseinstellungen herum, um den Inhalt hervorzuheben.

• Animationsstil: Flip
• Animationswiederholung: Einmal
• Animationsrichtung: Rechts
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1500 ms
• Animationsintensität: 500%

Beispiel 2 neu erstellen

Neue Zeile zum Abschnitt "Duplizierter Helden" hinzufügen

Auf zum zweiten Beispiel! Fügen Sie dem Abschnitt für duplizierte Helden eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Textmodul #1 hinzufügen

Inhaltsbox leer lassen

Wir verwenden wieder ein leeres Textmodul.

Abstand

Gehen Sie zu den Abstandseinstellungen und geben Sie dem Modul eine Form mit benutzerdefinierten oberen und unteren Polsterungen. Überlappen Sie es mit den vorherigen Modulen, indem Sie auch einen negativen oberen Rand hinzufügen.

• Oberer Rand: -480px
• Obere Polsterung: 223px
• Untere Polsterung: 223px

Grenze

Fahren Sie fort, indem Sie dem Textmodul einen Rahmen hinzufügen.

• Rahmenbreite: 9px
• Rahmenfarbe: #0ae2ff
• Rahmenstil: Doppel

Animation

Und spielen Sie mit den Animationseinstellungen herum, um einen rollenden Effekt zu erzielen.

• Animationsstil: Rolle
• Animationswiederholung: Einmal
• Animationsrichtung: Zentrum
• Animationsdauer: 4500 ms
• Animationsverzögerung: 1500 ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %

Textmodul klonen

Sobald Sie mit dem Ändern des ersten Textmoduls fertig sind, können Sie es klonen.

Abstand ändern

Öffnen Sie die Einstellungen des Duplikats und ändern Sie den oberen Randwert in den Abstandseinstellungen.

• Oberer Rand: -495px

Grenze ändern

Ändern Sie auch die Rahmenfarbe.

• Rahmenfarbe: #ededed

Animation ändern

Und ändern Sie die Animationseinstellungen, um das Ergebnis zu erzielen, das Sie in der Vorschau dieses Beitrags gesehen haben.

• Animationswiederholung: Schleife
• Animationsdauer: 5000 ms
• Animationsverzögerung: 2000 ms

Beispiel 3 neu erstellen

Ändern Sie den Abstand des Bildmoduls in Spalte 2

Auf zum nächsten und letzten Beispiel! Navigieren Sie zum Prozessabschnitt auf der Seite und fügen Sie dem Bildmodul, das die große Illustration in der Mitte enthält, einige obere Auffüllungen hinzu.

• Oberer Rand: 70 Pixel (Desktop), 0 Pixel (Tablet und Telefon)

Hintergrundfarbe zu vorhandenen Textmodulen hinzufügen

Fahren Sie fort, indem Sie jedem der Textmodule in der ersten und dritten Spalte eine weiße Hintergrundfarbe hinzufügen.

• Hintergrundfarbe: #ffffff

Textmodul zu Spalte 1 hinzufügen

Inhaltsbox leer lassen

Wir können jetzt mit dem Hinzufügen der ersten animierten Rahmenüberlappung beginnen! Fügen Sie in der ersten Spalte (siehe Druckbildschirm) einen neuen Textbaustein hinzu und lassen Sie das Inhaltsfeld leer.

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen des Textmoduls und erstellen Sie die Form und Überlappung mit benutzerdefinierten Rand- und Abstandswerten.

• Oberer Rand: -230px
• Linker Rand: 80px
• Rechter Rand: 100px
• Obere Polsterung: 120px
• Untere Polsterung: 120px

Grenze

Fügen Sie als nächstes einen Rahmen hinzu.

• Randbreite: 13px
• Rahmenfarbe: #bcf5f3
• Rahmenstil: Doppel

Animation

Fahren Sie fort, indem Sie eine Animation Ihrer Wahl hinzufügen, die Ihnen hilft, den Inhalt hervorzuheben, den Sie teilen.

• Animationsstil: Falten
• Animationswiederholung: Einmal
• Animationsrichtung: Rechts
• Animationsintensität: 100%

Z-Index

Um sicherzustellen, dass die Rahmen unter dem Inhalt erscheinen, verwenden wir einen negativen Wert für den Z-Index des Textmoduls, das die Rahmeneinstellungen enthält.

• Z-Index: -1

Textmodul klonen und am Ende von Spalte 1 platzieren

Sobald Sie mit dem Erstellen und Ändern des Textmoduls fertig sind, können Sie es klonen. Platzieren Sie das Duplikat am Ende der ersten Spalte.

Grenze ändern

Ändern Sie die Rahmenfarbe.

• Rahmenfarbe: #ffc0ec

Animation ändern

Und fügen Sie auch eine Animationsverzögerung hinzu.

• Animationsverzögerung: 1000ms

Textmodul zu Spalte 3 hinzufügen

Inhaltsbox leer lassen

Fahren Sie fort, indem Sie in der dritten Spalte (siehe Druckbildschirm) einen Textbaustein hinzufügen und achten Sie darauf, dass Sie das Inhaltsfeld leer lassen.

Abstand

Fahren Sie mit den Abstandseinstellungen fort und erstellen Sie die Form und Überlappung mit benutzerdefinierten Rand- und Abstandswerten.

• Oberer Rand: -230px
• Linker Rand: 100px
• Rechter Rand: -80px
• Obere Polsterung: 120px
• Untere Polsterung: 120px

Grenze

Fügen Sie als nächstes einen Rahmen Ihrer Wahl hinzu.

• Randbreite: 13px
• Rahmenfarbe: #7479ff
• Rahmenstil: Doppel

Animation

Zusammen mit einer Animation, die eine höhere Animationsverzögerung enthält als die der beiden vorherigen Textmodule.

• Animationsstil: Falten
• Animationswiederholung: Einmal
• Animationsrichtung: Links
• Animationsverzögerung: 2000 ms
• Animationsintensität: 100%

Z-Index

Stellen Sie sicher, dass das Modul unter dem Inhalt angezeigt wird, indem Sie einen negativen Z-Index verwenden.

• Z-Index: -1

Textmodul klonen und am Ende der Spalte platzieren 3

Wenn Sie mit dem Hinzufügen und Ändern des Textmoduls fertig sind, klonen Sie es und platzieren Sie das Duplikat am Ende der dritten Zeile.

Grenze ändern

Ändern Sie die Rahmenfarbe des Duplikats.

• Rahmenfarbe: #b3d1ff

Animation ändern

Fügen Sie eine zusätzliche Animationsverzögerung hinzu und Sie sind fertig!

• Animationsverzögerung: 3000ms

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis aller drei Beispiele, die wir in diesem Tutorial neu erstellt haben.

Beispiel 1

Beispiel #2

Beispiel #3

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihre Inhalte mit animierten Rahmenüberlappungen ins Rampenlicht rücken. Dies ist eine großartige Technik, um die Aufmerksamkeit auf einen bestimmten Teil Ihrer Seite zu lenken und dies auf elegante Weise zu tun. Sie können diese Technik für jede Art von Website verwenden, die Sie erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!