Erfahren Sie, wie Sie CSS-Formen in Divi . erstellen und animieren

Das Erstellen von Formen mit CSS im Webdesign ist keineswegs ein neues Konzept. Tatsächlich wurde die klassische Methode zum Erstellen von CSS-Formen von anderen HTML-Grafiklösungen wie Canvas und SVG weitgehend überschattet. CSS-Formen (zumindest die grundlegenden) sind jedoch viel einfacher zu erstellen und können immer noch eine wichtige Rolle im Webdesign spielen. Wenn Sie diesen Formen außerdem eine Scroll-Animation hinzufügen, kann ein ganz neues Designelement entstehen.

In diesem Tutorial erfahren Sie, wie Sie CSS-Formen in Divi erstellen und animieren. Sobald Sie das grundlegende Konzept zum Erstellen einiger Formen mit den integrierten Optionen von Divi verstanden haben, können Sie diese Formen animieren, um einzigartige Scroll-Animationsdesigns für Ihre Website zu erstellen. Sie werden überrascht sein, wie viel Sie tun können!

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erfahren Sie, wie Sie CSS-Formen mit Animation in Divi . erstellen

Die Zeilen- und Spaltenstruktur

Fügen Sie dem Abschnitt zunächst eine Zeile mit einer Spalte von einem Drittel und zwei Dritteln hinzu.

Bevor wir etwas anderes tun, öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: JA
• Breite: 95%
• Maximale Breite: 900px

HINWEIS: Diese Einstellungen sind entscheidend für die Einrichtung unseres Designs. Beispiel: Die Ein-Drittel-Zwei-Drittel-Spaltenstruktur kombiniert mit einer Zeile mit einer maximalen Breite von 900 Pixeln ohne Ränder (Randbreite 1) lässt uns wissen, dass die linke Spalte genau 300 Pixel breit ist. Wenn ich mein Design in dieser 300px breiten Spalte behalte, kann ich außerdem sicher sein, dass es auch auf Tablets und Mobilgeräten gut aussieht.

Hinzufügen des Trennmodul-Abstandshalters

Fügen Sie als Nächstes einen Teiler hinzu, um den erforderlichen Abstand für die Spalte zu erstellen, die unsere CSS-Formen enthält.

An dieser Stelle sollten Sie die Ebenenansicht modal öffnen, um die Ebenen/Module in Zukunft zu verwalten, die Sie im Einstellungsmenü des Divi Builder finden.

Öffnen Sie die Trennereinstellungen und aktualisieren Sie die Höhe des Trenners wie folgt:

• Teiler anzeigen: NEIN
• Höhe: 150px

Da unsere CSS-Shapes absolut positioniert werden, kann der tatsächliche Abstand der Spaltenfläche einfach durch Anpassen der Höhe des Teilers angepasst werden. Persönlich fand ich dies einfacher, als zu versuchen, die Höhe oder den Abstand der Spalte zu manipulieren. Außerdem bietet es Ihnen den zusätzlichen Vorteil, den Teiler als zusätzliches Designelement (oder Form) zu gestalten. Im Moment können Sie es sich als Leinwand für Ihre zukünftigen CSS-Shape-Designs vorstellen.

Erstellen der ersten CSS-Form mit Rahmenoptionen

Um unser CSS-Shape zu erstellen, verwenden wir ein Teilermodul. Technisch verwenden wir nur die Ränder, die das Modul umgeben, nicht den Modulbereich. (Sie könnten also auch andere Module wie Textmodule oder Codemodule verwenden).

Um das CSS-Shape zu erstellen, duplizieren Sie das zuvor erstellte Trennmodul.

Nehmen Sie dann die Höhe und Breite des Trennmoduls heraus, indem Sie jedes wie folgt auf 0px setzen:

• Breite: 0px
• Höhe: 0px

Für die erste Form erstellen wir ein rechtwinkliges Dreieck, das nach oben rechts zeigt. Aktualisieren Sie dazu die Trennrahmenstile wie folgt:

• Randfarbe: rgba (245,44,143,0.5)
• Breite des oberen Rands: 150px
• Linker Randbreite: 150px
• Farbe des linken Rands: transparent

Hinweis: Wenn Sie der Rahmenfarbe eine Halbtransparenz geben, werden überlappende Formen für ein zusätzliches Designelement sichtbar.

Es ist auch eine gute Idee, diesen neuen Teiler zur späteren Identifizierung als „Form 1“ zu kennzeichnen.

Da wir den zusätzlichen Formen, die wir erstellen, eine Scroll-Animation hinzufügen werden, ist es wichtig, dieser Form (und weiteren Formen in dieser Spalte) eine absolute Position zu geben, damit sie übereinander gestapelt werden gleicher Ausgangspunkt für Animationen.

Ändern Sie auf der Registerkarte "Erweitert" die Position in absolut und behalten Sie die Standardposition oben rechts bei:

• Position: Absolut
• Positionsposition: Oben rechts (Standard)

HINWEIS: Es ist wichtig, die Position oben rechts zu halten, da alle anderen Positionen, die eine zentrierte Positionierung hinzufügen (wie oben Mitte oder zentriert), mit den Transformationsoptionen kollidieren, die wir später zu den CSS-Shapes hinzufügen werden.

Herzlichen Glückwunsch zum Erstellen eines CSS-Dreiecks! Auch wenn das an und für sich nicht so beeindruckend ist, wird es besser. Wir können dieses Dreieck duplizieren, um alle möglichen neuen Designs zu erstellen, sobald wir sie mit Animation verschieben.

Erstellen von Shape 2 mit Scroll-Animation

Um die nächste Form (oder in diesem Fall ein Dreieck) zu erstellen, duplizieren Sie das vorherige Teilermodul (Form 1), um ein identisches oberes rechtes Dreieck hinzuzufügen, das direkt über der vorherigen Dreiecksform sitzt.

Dann beschriften Sie es mit "Form 2".

Öffnen Sie die Einstellungen für den Teiler „Form 2“ und fügen Sie den folgenden rotierenden Transformationseffekt hinzu:

• Scroll-Transformationseffekte: Rotieren
• Drehen aktivieren: JA
• Startrotation: 0° (bei 30%)
• Mittlere Drehung: 45° (bei 45%)
• Enddrehung: 90° (bei 60%)

Erstellen von Shape 3 mit Scroll-Animation

Duplizieren Sie das Trennmodul „Form 2“ und beschriften Sie das Duplikat „Form 3“.

Aktualisieren Sie dann die Rotationseinstellungen der Transformation wie folgt:

• Mittlere Drehung: 90°
• Enddrehung: 180°

Um die endgültige (vierte) Form zu erstellen, duplizieren Sie das Trennmodul Form 3 und beschriften Sie es mit „Form 4“.

Aktualisieren Sie dann die Rotationseinstellungen der Transformation wie folgt:

• Mittlere Drehung: 180°
• Enddrehung: 270°

An dieser Stelle sollten Sie eine quadratische Form sehen, die durch die überlappenden und jetzt gedrehten Dreiecke entsteht.

Testen der Scroll-Animation

Um die Scroll-Animation dieser Formen zu testen, fügen wir oben und unten im Abschnitt einige temporäre Ränder hinzu. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Rand: 80vh oben, 80vh unten

So sollte es aussehen, wenn Sie auf der Seite nach oben und unten scrollen.

Bevor wir neue Möglichkeiten zum Anpassen dieser Formanimationen erkunden, werden wir unser Design mit einem Scheintitel in der rechten Spalte ergänzen. Sie können diesen Schritt gerne überspringen, wenn Sie mit den Formdesigns fortfahren möchten.

Hinzufügen eines falschen Titels zur rechten Spalte (optional)

Um Ihnen eine Vorstellung davon zu geben, wie Sie diese animierten Formdesigns auf einer Seite verwenden können, dachte ich, es wäre eine gute Idee, der rechten Spalte einen Scheintitel hinzuzufügen. Dies wäre ein großartiges Beispiel dafür, wie Sie Ihre Seitenabschnittstitel mit einer beeindruckenden Designanimation mit CSS-Formen ergänzen können.

Spaltenbenutzerdefiniertes CSS

Bevor wir den Titel hinzufügen, können wir mithilfe der display flex-Eigenschaft sicherstellen, dass der Text innerhalb der Spalte vertikal zentriert ist. Öffnen Sie die Einstellungen für Spalte 2 und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
flex-direction:column;
align-items:center;

Sobald das Spalten-CSS vorhanden ist, fügen Sie ein neues Textmodul zu Spalte 2 hinzu.

Öffnen Sie dann die Texteinstellungen und aktualisieren Sie den Textkörperinhalt mit einer h2-Überschrift wie folgt:

<h2>elegant design</h2>

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Überschrift 2 Schriftart: Poppins
• Überschrift 2 Textausrichtung: Standard (Desktop), Mitte (Tablet und Telefon)
• Überschrift 2 Textgröße: 55px (Desktop), 45px (Tablet), 35px (Telefon)
• Breite: 100%

Wenn wir schon dabei sind, fügen Sie dem Text den folgenden Scroll-Transformationseffekt "horizontale Bewegung" wie folgt hinzu:

• Scroll-Transformationseffekte: Horizontale Bewegung
• Horizontale Bewegung aktivieren: JA
• Startversatz: 2 (bei 20%)
• Mittlerer Offset: 1 (bei 35%)
• Endversatz: -0,6

Öffnen Sie dann die Responsive-Tabs und aktualisieren Sie den End-Offset wie folgt:

• End-Offset (Tablet und Telefon): 0

Erkunden von Animationen der Form des oberen rechten Dreiecks

Wir machen dort weiter, wo wir vor dem Hinzufügen unseres Titeltexts aufgehört haben, und können jetzt die Design-/Animationsmöglichkeiten für die aktuelle Form des oberen rechten Dreiecks erkunden.

Eine einfache Möglichkeit, dies zu tun, besteht darin, Multiselect zu verwenden, um alle vier CSS-Formen (mit Trennmodulen erstellt) auszuwählen.

Öffnen Sie dann die Einstellungen für eine der Formen, um das Elementeinstellungen-Modal aufzurufen, das das Design aller vier Module gleichzeitig aktualisiert, damit Sie die Ergebnisse visuell sehen können.

Wählen Sie dann die Registerkarte Design und öffnen Sie die Registerkarte Transformationsursprung. Positionieren Sie die Ebenenansicht modal und die Elementeinstellungen modal nach links, damit Sie die Änderungen im Divi Builder visuell sehen können.

Erkunden der CSS-Formdesign-Animationen des Aufwärtsdreiecks

Nachdem Sie das Setup eingerichtet haben, können Sie das Erstellen neuer Formen erkunden und sehen, wie sie mit den aktuellen Scroll-Animationen aussehen.

Für dieses nächste Beispiel erstellen wir eine CSS-Form nach oben (technisch ein gleichschenkliges Dreieck).

Stellen Sie dazu sicher, dass Sie alle Formen mehrfach auswählen und die Rahmenstile für jede wie folgt aktualisieren:

• Breite des rechten Rands: 100px
• Farbe des rechten Rands: transparent
• Breite des unteren Rands: 100px
• Farbe des unteren Rands: rgba (245,44,143,0.5)
• Breite des linken Rands: 100px
• Farbe des linken Rands: transparent

Aktualisieren Sie Transform Origin, um neue Scroll-Animationsdesigns zu erkunden

Da wir nun eine etwas neue Form/ein neues Dreieck haben, wird auch die resultierende Rotationsanimation anders sein. Um die verschiedenen Gestaltungsmöglichkeiten für Scroll-Animationen zu erkunden, stellen Sie sicher, dass Sie alle vier Formen mit der Mehrfachauswahl auswählen und dann den Transformationsursprung anpassen, um die Ergebnisse anzuzeigen.

Erkunden der Teardrop-CSS-Formdesign-Animationen

Inzwischen sollten Sie die Funktionsweise dieses Prozesses in den Griff bekommen. Für dieses nächste Design werden wir eine Tropfenform erstellen, die durch Erstellen eines unteren rechten Dreiecks mit einem Randradius erstellt werden kann.

Stellen Sie dazu sicher, dass Sie alle Formen mehrfach auswählen und die Rahmenstile für jede wie folgt aktualisieren:

• Abgerundete Ecken: 0px oben rechts, 50 % oben rechts, 50 % unten rechts, 50 % unten links
• Breite des unteren Rands: 150px
• Farbe des unteren Rands: rgba (245,44,143,0.5)
• Linker Randbreite: 150px
• Farbe des linken Rands: transparent

Passen Sie dann den Transformationsursprungswert an, um die Scroll-Animationsdesigns für den Teardrop zu erkunden.

Erkunden des Sektors (oder Pizzastücks) CSS-Formdesign-Animationen

Inzwischen sollten Sie die Funktionsweise dieses Prozesses in den Griff bekommen. Für dieses nächste Design werden wir eine Sektorform erstellen, die durch Erstellen eines unteren rechten Dreiecks mit einem Randradius erstellt werden kann.

Stellen Sie dazu sicher, dass Sie alle Formen mehrfach auswählen und die Rahmenstile für jede wie folgt aktualisieren:

• Abgerundete Ecken: 0px oben rechts, 0px oben rechts, 50 % unten rechts, 50 % unten links
• Breite des rechten Rands: 75px
• Farbe des rechten Rands: transparent
• Breite des unteren Rands: 75 Pixel
• Farbe des unteren Rands: rgba (245,44,143,0.5)
• Linker Randbreite: 75px
• Farbe des linken Rands: transparent

Passen Sie dann den Transformationsursprung an, um die verschiedenen Scroll-Animationsdesigns zu erkunden.

Erkunden der Trapezoid-CSS-Formdesign-Animationen

Für unser endgültiges CSS-Formdesign erstellen wir eine trapezförmige CSS-Form, die einem nach oben gerichteten (oder gleichschenkligen) Dreieck zusätzliche Breite hinzufügen kann.

Stellen Sie dazu sicher, dass Sie alle Formen mehrfach auswählen und die Rahmenstile für jede wie folgt aktualisieren:

• Abgerundete Ecken: 0px
• Breite des rechten Rands: 100px
• Farbe des rechten Rands: transparent
• Breite des unteren Rands: 100px
• Farbe des unteren Rands: rgba (245,44,143,0.5)
• Breite des linken Rands: 100px
• Farbe des linken Rands: transparent

Aktualisieren Sie dann die Breite der Formen/Module wie folgt:

• Breite: 100px

Wenn die Trapezform vorhanden ist, können Sie erneut den Transformationsursprung für jedes Element aktualisieren, um die neuen Scroll-Animationsdesigns zu erkunden.

Endgültige Ergebnisse

Werfen wir einen letzten Blick auf einige meiner Lieblingsdesigns, die mit diesem Tutorial möglich sind.

Abschließende Gedanken

Das Erkunden, wie Sie CSS-Formen in Divi erstellen und animieren, kann eine großartige Möglichkeit sein, diese kreativen Kräfte zum Fließen zu bringen, während Sie Ihre Perspektive auf die Leistungsfähigkeit der integrierten Designfunktionen von Divi erweitern. Der Trick besteht darin, zu verstehen, wie man Rahmen verwendet, um verschiedene Formen zu erstellen. Anschließend können Sie diesen Formen eine Scroll-Animation hinzufügen. Aber vergessen Sie nicht die Kraft des Transformationsursprungs, der die Art und Weise ändert, wie diese Animationen jede Form positionieren. Dies ist natürlich die Spitze des Eisbergs, wenn Sie an all die verschiedenen Formen und Animationen denken, die Sie kombinieren können, um endlose kreative Designs für Ihre Website zu erstellen.

Hoffentlich gibt Ihnen dies ein paar Ideen, wie Sie Ihrer eigenen Website die perfekte CSS-Shape-Animation hinzufügen können.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!