Möchten Sie einen bestimmten Teil Ihrer Seite hervorheben? Heute zeigen wir Ihnen, wie Sie animierte Rahmenüberlagerungen erstellen, um das hervorzuheben Inhalt Ihrer Seite. Wir erstellen diese animierten Ränder mithilfe der App Developer Layout Pack-Vorlage, die unter verfügbar ist Divi Baumeister. Sie können diese Technik jedoch für jede Art von verwenden Website die du erschaffst. Es wird Ihnen definitiv helfen, Ihrer Seite eine zusätzliche Dimension hinzuzufügen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, auch Ihre eigenen animierten Rahmenüberlagerungen zu erstellen.
Übersicht
Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis dieser drei Beispiele. Sie können auch auf kleineren Bildschirmen ein ähnliches Ergebnis erwarten.
Erstellen Sie eine neue Seite mithilfe der Zielseite des App Developer Layout Pack
Als Erstes müssen Sie eine neue Seite erstellen und das App Developer Layout Pack verwenden.
Clone Hero Section
Unser Beispiel wird in der Heldensektion erstellt. Zur Erinnerung: Folgendes werden wir erstellen:
Fügen Sie dem Heldenbereich eine neue Zeile hinzu
Spaltenstruktur
Beginnen wir mit der Neuerstellung des ersten Beispiels! Fügen Sie im speziellen Bereich eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Fügen Sie ein Textmodul hinzu
Lass den Inhalt leer
Fügen Sie der Zeile ein neues Textmodul hinzu und achten Sie darauf, das Textfeld zu verlassen Inhalt leer. Wir nutzen das Modul wegen seiner integrierten Designoptionen, nicht zur Anzeige von Inhalten. Inhalt Schreiben.
Abstand
Gehen Sie zu den Abstandseinstellungen des Textmoduls und formen Sie es, indem Sie benutzerdefinierte innere und untere Ränder 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
- Beste Polsterung: 223px
- Polsterung unten: 223px
Grenze
Gehen Sie dann zu den Randeinstellungen des Moduls und fügen Sie einen Rand Ihrer Wahl hinzu.
- Breite des Rahmens: 9px
- Rahmenfarbe: #0ae2ff
- Randstil: Anfang
Schattenkiste
Fügen Sie einen Kastenfarbton auch hinzu.
- Box Shadow Blur Force: 1px
- Box Schattenstärke: 15px
- Schattenfarbe: rgba (10,226,255,0.59)
Animation
Und spielen Sie mit den Animationseinstellungen, um den Inhalt aufzurufen. Sie sollten jedoch beachten, dass Sie die Option verwenden können, die Ihnen am besten gefällt.
- Stilanimation: Flip
- Animation wiederholen: Einmal
- Animationsrichtung: Rechts
- Animationsdauer: 1500ms
- Animationsverzögerung: 1500ms
- Intensitätsanimation: 500%
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis der drei Beispiele, die wir in diesem Tutorial neu erstellt haben.
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie Ihre Inhalte mit animierten Rahmenüberlagerungen hervorheben. Dies ist eine großartige Technik, um die Aufmerksamkeit auf einen bestimmten Teil Ihrer Seite zu lenken, und zwar auf stilvolle Weise. Sie können diese Technik für jede Art von verwenden Website das du baust. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten!
