Dekorieren Ihrer Seite mit Transforming Shapes on Hover with Divi

Die Erstellung eines interaktiven Designs ist etwas, das sofort dazu beiträgt, das Erscheinungsbild jeder Website zu verbessern. Mit den integrierten Optionen von Divi können Sie viele Schritte unternehmen und Effekte erstellen, die für Ihre Website wirklich einzigartig sind.

In diesem Beitrag zeigen wir Ihnen, wie Sie Ihre Seite mit transformierenden Formen beim Schweben dekorieren. Das Ergebnis, das wir erhalten, konzentriert sich auf das Desktop-Erlebnis, behält aber auch auf kleineren Bildschirmgrößen ein ordentliches und benutzerfreundliches Design bei.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die beiden Beispiele, die wir von Grund auf neu erstellen werden.

Beispiel 1

Beispiel #2

Laden Sie die geformten Bildüberlagerungen herunter

Um die geformten Bildüberlagerungen, die in diesem Tutorial verwendet werden, in die Hände zu bekommen, müssen Sie sie ü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!

Beginnen wir mit dem Erstellen!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Stary, indem Sie eine neue Seite erstellen oder eine vorhandene öffnen. Fügen Sie einen regulären Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und fügen Sie eine vollständig schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Überlauf

Um das geformte Bild-Overlay später in diesem Tutorial abzuschneiden, stellen wir sicher, dass nichts den Abschnittscontainer übertrifft, indem wir dem Hauptelement des Abschnitts eine einzelne Zeile CSS-Code hinzufügen.

overflow: hidden;

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

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

Bildmodul zu Zeile hinzufügen

Geformte Bildüberlagerung hochladen

Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Image-Modul. Laden Sie das erste geformte Bild-Overlay hoch, das Sie in dem heruntergeladenen Ordner finden. Sie können mehr geformte Bildüberlagerungen finden, indem Sie zu diesem Beitrag gehen, die Dateien herunterladen, die Illustrator-Datei öffnen und sie an Ihre Bedürfnisse anpassen. Wenn Sie jedoch nur die Beispiele, die in der Vorschau dieses Beitrags geteilt wurden, neu erstellen möchten, reicht der Ordner, den Sie am Anfang dieses Beitrags heruntergeladen haben.

Standardhintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen des Bildmoduls und fügen Sie die folgende Standardhintergrundfarbe hinzu:

• Hintergrundfarbe: #6a00ff

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Hover mit dem folgenden Farbcode:

• Hintergrundfarbe: #ffa216

Hintergrund mit Farbverlauf

Fahren Sie fort, indem Sie auch dem Bildmodul einen Verlaufshintergrund hinzufügen.

• Farbe 1: #ff2841
• Farbe 2: rgba(255,255,255,0)
• Verlaufsrichtung: 168deg
• Endposition: 68%

Größe

Wechseln Sie zur Registerkarte Design und aktivieren Sie die Option "Vollbreite erzwingen".

• Volle Breite erzwingen: Ja

Abstand

Wir blenden auch einen Teil der geformten Bildüberlagerung aus, indem wir den Abstandseinstellungen einen negativen oberen Rand hinzufügen. Sie werden feststellen, dass das Modul den Abschnittscontainer dank der einen Zeile CSS-Code, die wir zu Beginn des Tutorials zum Abschnitt hinzugefügt haben, nicht übertrifft.

• Obere Marge: -22vw (Desktop & Tablet), 0vw (Telefon)

Standard-Transformationsdrehung

Wir können jetzt mit der Transformation des Moduls beginnen! Fügen Sie dem Bildmodul die folgenden Standardeinstellungen zum Drehen der Transformation hinzu:

• Mitte: 359 Grad

Hover Transformieren Drehen

Und ändern Sie diese Werte beim Bewegen des Mauszeigers, um eine transformierende Form zu erstellen.

• Links: 250deg
• Mitte: 320 Grad

CSS-ID

Wenn Sie über das Bildmodul schweben, überlappt das geformte Bild-Overlay alle anderen Module, die sich darüber befinden. Um dies zu vermeiden, müssen wir den Z-Index des Moduls beim Hover später im Beitrag ändern. Um dies zu erreichen, müssen Sie dem Image Module eine benutzerdefinierte CSS-Klasse hinzufügen.

Übergänge

Zu guter Letzt schaffen wir einen reibungslosen Übergang, indem wir die Übergangsdauer auf der Registerkarte „Erweitert“ erhöhen.

• Übergangsdauer: 950ms

Textmodul Nr. 1 zu Zeile hinzufügen

H2-Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein Textmodul. Fügen Sie H2-Gehalt Ihrer Wahl hinzu.

H2-Texteinstellungen

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

• Überschrift 2 Schriftart: Didact Gothic
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße: 7vw
• Überschrift 2 Zeilenhöhe: 0,9em

Abstand

Erstellen Sie eine Überlappung zwischen diesem Modul und dem Bildmodul, indem Sie einige benutzerdefinierte Randwerte verwenden.

• Obere Marge: -68vw
• Unterer Rand: 8vw
• Linker Rand: 29vw
• Rechter Rand: 29vw

Textmodul #2 zu Zeile hinzufügen

Inhalt hinzufügen

Fügen Sie direkt unter dem vorherigen ein weiteres Textmodul hinzu und geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

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

• Textschriftart: Open Sans
• Textfarbe: #ffffff
• Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Textzeilenhöhe: 1.8em
• Textausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte hinzu.

• Unterer Rand: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
• Linker Rand: 30vw (Desktop), 10vw (Tablet & Telefon)
• Rechter Rand: 30vw (Desktop), 10vw (Tablet & Telefon)

Teilermodul zu Reihe hinzufügen

Sichtweite

Das nächste und letzte Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Teilers.

• Farbe: #ffffff

Größe

Ändern Sie auch die Größenwerte.

• Teilergewicht: 7px
• Breite: 15%
• Modulausrichtung: Mitte

Abstand

Und fügen Sie eine benutzerdefinierte untere Polsterung hinzu.

• Unterer Rand: 5vw

Gesamten Abschnitt klonen

Auf zum zweiten Beispiel! Klonen Sie den gerade fertiggestellten Abschnitt.

Bildmodul ändern

Neues geformtes Bild-Overlay hochladen

Es gibt einige Änderungen, die wir vornehmen müssen, beginnend mit der geformten Bildüberlagerung. Fahren Sie fort und laden Sie das zweite geformte Bild-Overlay hoch, das Sie in dem Ordner finden, den Sie am Anfang dieses Beitrags heruntergeladen haben.

Standardhintergrundfarbe ändern

Gehen Sie dann zu den Hintergrundeinstellungen des Bildmoduls und ändern Sie die Standardhintergrundfarbe.

• Hintergrundfarbe: #2d007c

Hover-Hintergrundfarbe ändern

Ändern Sie auch die Hintergrundfarbe des Schwebens.

• Hintergrundfarbe: #008089

Hintergrund mit Farbverlauf ändern

Zusammen mit dem Farbverlaufshintergrund.

• Farbe 1: #0c0c0c
• Farbe 2: rgba(255,255,255,0)
• Verlaufsrichtung: 168deg
• Endposition: 68%

Ändern Sie die Standardeinstellungen für die Transform-Drehung

Wir ändern auch den Transformationseffekt. Gehen Sie zu den Transformationseinstellungen und ändern Sie die Standardwerte für die Drehung der Transformation.

• Links: 270 Grad
• Mitte: 359 Grad

Ändern Sie die Einstellungen für die Drehung der Hover-Transformation

Ändern Sie dieselben Werte beim Hover.

• Links: 192 Grad
• Mitte: 280 Grad
• Rechts: 15 Grad

Benutzerdefinierten Code zur Seite hinzufügen

Seiteneinstellungen öffnen

Der letzte Teil dieses Beitrags stellt nun sicher, dass die transformierende Form beim Schweben unter allen anderen Modulen bleibt. Öffnen Sie die Seiteneinstellungen.

CSS-Code hinzufügen

Gehen Sie dann zur Registerkarte Erweitert und fügen Sie den folgenden CSS-Code hinzu.

.hover-state:hover {
z-index: -99; }

Wir verwenden die CSS-Klasse, die wir den Abschnitten im gesamten Tutorial zugewiesen haben.

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis.

Beispiel 1

Beispiel #2

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den Transformationsoptionen von Divi kreativ werden. Genauer gesagt haben wir Bildmodule mit geformten Bildüberlagerungen verwendet, um eine sich verändernde Hintergrundform zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!