So erstellen Sie einen 3D-Wegweiser mit Hover-Effekten in Divi
Veröffentlicht: 2019-05-13Wir alle wissen, dass eine gute Website es den Besuchern leicht macht, schnell und effizient zu finden, wonach sie suchen. Und es hilft immer, wenn Sie Ihre Inhalte ansprechender gestalten können. In diesem Tutorial zeige ich Ihnen, wie Sie einen 3D-Wegweiser entwerfen, der Benutzer anspricht und es ihnen auf einzigartige Weise erleichtert, das zu finden, wonach sie suchen. Dazu verwenden wir die Transformationsoptionen von Divi und die perspektivische CSS-Eigenschaft in mehreren Klappenmodulen, um den 3D-Effekt von auf einem Beitrag gedrehten Schildern zu erzeugen.
Lass uns anfangen!
Vorgeschmack
Laden Sie das 3D-Wegweiser-Layout KOSTENLOS herunter
Um das 3D-Wegweiser-Design 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.
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.
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 Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, sollen wir?
Abonnieren Sie unseren Youtube-Kanal
Was Sie brauchen, um loszulegen
Um zu beginnen, benötigen Sie Folgendes:
- Stellen Sie sicher, dass das Divi-Theme auf Ihrer WordPress-Site installiert und aktiv ist.
- Wenn Sie Ihr eigenes Beitragsbild erstellen möchten, benötigen Sie einen Fotoeditor wie Photoshop, Gimp oder Sketch. Oder Sie verwenden das Bild im kostenlosen Layout-Download für dieses Design oben.
- Abgesehen davon werden wir am Frontend des Divi Builder alles von Grund auf neu erstellen.
Bild für den Wegweiser erstellen
Der einfachste Weg, einen Wegweiser für dieses Design zu erstellen, besteht darin, einen kleinen wiederholbaren Bildblock zu erstellen, den wir als Hintergrundbild hinzufügen können, das sich vertikal im Abschnitt oder in der Zeile der Seite wiederholt. Wenn Sie diesen Schritt überspringen möchten, können Sie das im obigen kostenlosen Download enthaltene Json-Layout importieren, um zu beginnen. Wenn Sie jedoch Ihre eigene Farbe mit einer benutzerdefinierten Farbe Ihrer Wahl erstellen möchten, gehen Sie wie folgt vor.
Für dieses Beispiel verwende ich Photoshop, aber der Prozess ist auch für andere beliebte Bildbearbeitungsprogramme sehr ähnlich.
Klicken Sie in Photoshop auf , um ein neues Dokument mit einer benutzerdefinierten Höhe und Breite von 25 Pixeln zu erstellen.
Stellen Sie die Vordergrundfarbe auf Schwarz (#000000) oder eine beliebige andere Farbe ein.
Wählen Sie dann das Farbeimerwerkzeug aus und klicken Sie in die leere quadratische Ebene, um das Quadrat schwarz zu malen.
Speichern Sie dann Ihr Bild als JPEG auf Ihrem Computer. Dies ist das Bild, das wir im Design verwenden werden, um den Pfosten für unser 3D-Wegweiser-Design zu erstellen.
Implementierung des 3D-Wegweiser-Designs in Divi
Wenn Sie fertig sind, erstellen Sie eine neue Seite, geben Sie der Seite einen Titel und stellen Sie den Divi Builder im Frontend bereit. Wählen Sie die Option „Von Grund auf neu erstellen“.
Ihre leere Leinwand wartet!
Erstellen Sie nun einen neuen regulären Abschnitt mit einer einspaltigen Zeile.
Anpassen der Zeile
Bevor wir ein Modul hinzufügen, öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Hintergrundbild: [benutzerdefiniertes quadratisches Bild für Beitrag einfügen]
Hintergrundbildgröße: Tatsächliche Größe
Hintergrundbild wiederholen: Y wiederholen (vertikal)
Aktualisieren Sie dann Folgendes:
Dachrinnenbreite: 1
Maximale Breite: 980px
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten
Dann müssen wir das folgende benutzerdefinierte CSS wie folgt zum Column Main Element hinzufügen:
perspective: 1000px;
Diese perspektivische CSS-Eigenschaft ist erforderlich, um den 3D-Effekt des Zeichens (oder Klappentexts) zu erhalten, wenn wir es mit den Transformationsoptionen drehen.
Weitere Informationen hierzu finden Sie in der Funktionsweise der Perspektive mit den Transformationsoptionen von Divi.
Erstellen eines Schilds mit einem Blurb-Modul
Um unser erstes Schild auf unserem 3D-Wegweiser zu erstellen, verwenden wir ein Klappenmodul. Fahren Sie fort und fügen Sie der Zeile ein Klappenmodul hinzu.
Öffnen Sie dann die Klappeneinstellungen und aktualisieren Sie den Inhalt der Klappe wie folgt:
Verringern Sie den Scheininhalt, um nur ein paar Textzeilen einzuschließen.
Symbol verwenden: JA
Symbol: Pfeil nach links (siehe Screenshot)
Hintergrundfarbe: #1a233f
Symbolfarbe: #9eb3c2
Bild-/Symbolplatzierung: Links
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 80px
Textausrichtung: Mitte
Titelschrift: Playfair Display
Titeltextfarbe: #9eb3c2
Titeltextgröße: 38px (Desktop), 26px (Telefon)
Maximale Breite: 600px
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 5 % oben, 5 % unten, 5 % links, 5 % rechts
Abgerundete Ecken: 20px
Rahmenbreite: 3px
Randfarbe: #21335e
Das kümmert sich um das Styling unseres Klappenmoduls, aber um unseren 3D-Effekt zu erzielen, müssen wir die Transformationsoptionen verwenden, um unser Klappenmodul zu drehen. Um dies zu tun, aktualisieren Sie Folgendes:
Transformieren X-Achse drehen: 20deg
Duplizieren Sie die Zeile für mehr Zeichen
Nachdem wir nun eines unserer Schilderdesigns fertiggestellt haben, können wir die Reihe duplizieren, um mehr zu erstellen. Jedes Mal, wenn wir die Zeile duplizieren, müssen wir lediglich die Transformationsdrehung aktualisieren, damit sich die Zeichen in unterschiedlichen Graden um den Pfosten drehen.
Fahren Sie fort und duplizieren Sie die Zeile und aktualisieren Sie das Klappenmodul in der neuen Zeile wie folgt:
Transformieren X-Achse drehen: -30deg
Duplizieren Sie die Zeile, um ein drittes Zeichen zu erstellen, und aktualisieren Sie das Klappenmodul in dieser neuen Zeile wie folgt:
Transformieren X-Achse drehen: 40deg
Ändern der Richtung des zweiten Zeichens
Im Moment zeigen alle Pfeile in die gleiche Richtung. Um die Richtung von links nach rechts zu ändern, müssen wir die Einstellungen des Klappenmoduls ein wenig aktualisieren.
Öffnen Sie die Einstellungen des Klappenmoduls in der zweiten Zeile (der mittleren) und aktualisieren Sie Folgendes:
Symbol: Pfeil nach rechts (siehe Screenshot)
Textausrichtung: Links
Wir können die Reihenfolge des Klappeninhalts umkehren, sodass der Text links und das Symbol rechts ist. Dazu müssen wir dem Hauptelement eine einzelne Zeile mit benutzerdefiniertem CSS wie folgt hinzufügen:
direction: rtl;
Jetzt ist der Inhalt des Klappentextes umgekehrt und Sie haben ein Schild, das in eine neue Richtung weist!
Drehen Sie die Schilder bei Hover zurück in den ursprünglichen Zustand
Eines der coolen Dinge an diesem Setup ist, dass Sie ganz einfach einen Hover-Zustand hinzufügen können, um das gedrehte Modul wieder in die ursprüngliche (0deg) Drehung zu bringen. Dies ermöglicht es dem Benutzer, sich mit den Inhalten zu beschäftigen und den Text beim Bewegen der Maus über das Modul klar zu sehen.
Da wir allen drei Klappenmodulen den gleichen Hover-Zustand hinzufügen möchten, verwenden Sie Multiselect, um alle drei Klappenmodule auszuwählen, und öffnen Sie die Einstellungen eines der Module, um die Elementeinstellungen modal aufzurufen. Aktualisieren Sie dann Folgendes:
Transformieren X-Achse drehen (Hover): 0deg
Einstellungen speichern und fertig!
Schauen Sie sich jetzt das bisherige Design und die Funktionalität an.
Anpassen unseres Abschnitts mit einem Hintergrundbild
Für unseren letzten Schritt können wir unserem Abschnitt ein neues Hintergrundbild hinzufügen. Dies ist natürlich optional, aber das richtige Bild kann wirklich cool aussehen, besonders wenn Sie den Parallax-Effekt verwenden.
Öffnen Sie den Abschnitt und fügen Sie ein neues Hintergrundbild hinzu. (Ich verwende ein Bild aus unserem Agentur-Layout-Paket)
Aktualisieren Sie dann Folgendes:
Verwenden Sie den Parallax-Effekt: JA
Benutzerdefiniertes Padding: 0px oben, 0px unten
Endergebnis
Abschließende Gedanken
Das Erstellen eines 3D-Wegweisers fügt Ihrer Website wirklich ein kreatives und ansprechendes Designelement hinzu, das Ihren Inhalt (wörtlich) wirklich hervorheben kann. Und der Hover-Effekt ermöglicht es dem Benutzer, den Inhalt ohne den 3D-Effekt für einen schönen Fallback anzuzeigen. Vergessen Sie nicht, dass Sie dem Klappenmodul ganz einfach eine Link-URL hinzufügen können, damit es bei Bedarf als anklickbares Navigationselement dienen kann. Wie auch immer, ich hoffe, das gibt Ihnen ein wenig Inspiration für Ihr nächstes Projekt.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!