So erstellen Sie schwebende Module, die in Divi . im 3D-Raum kollidieren

Es macht immer Spaß, neue Designs zu entdecken, die mit Divi möglich sind. Und heute werden wir Divi verwenden, um den 3D-Raum zu erkunden! Technisch werden wir untersuchen, wie man schwebende Module entwirft, die aussehen, als würden sie im 3D-Raum kollidieren. Dieses Design eignet sich gut als kreative Möglichkeit, Besucher zu begeistern, indem es zeigt, dass Sie eine „Ausdehnung“ an Dienstleistungen, Produkten oder Ressourcen auf Ihrer Website haben.

Offensichtlich wird dieses Tutorial nicht mit dem vergleichen, was ich mir bei der realen Weltraumforschung vorstelle. Aber hoffentlich können Sie Divi-Entdecker da draußen ein paar Dinge auf dem Weg lernen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das Design, das wir gemeinsam erstellen werden.

Laden Sie die schwebenden Module, die im 3D-Raum-Layout kollidieren, KOSTENLOS herunter

Um das in diesem Tutorial erstellte Design 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 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

Erste Schritte mit einem vorgefertigten Layout

Stellen Sie zunächst sicher, dass das Divi-Design installiert und aktiv ist. Erstellen Sie dann eine neue Seite, geben Sie der Seite einen Titel und stellen Sie den Divi Builder (am Frontend) bereit. Wählen Sie die Option „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie dann das Layout der Zielseite für Videospiele aus und importieren Sie es in Ihre neue Seite.

Um einen Vorsprung bei unserem Design zu bekommen, werden wir den Abschnitt mit dem Titel "Spielfunktionen" verwenden, der die Klappentexte enthält, die wir für unser Design verwenden werden. Da dies der einzige Abschnitt ist, den wir wirklich brauchen, löschen Sie jeden Abschnitt und jede Zeile mit Ausnahme der beiden Klappenreihen.

Implementieren der schwebenden Blurbs im 3D-Raumdesign in Divi

Erstellen der ersten Reihe von Klappentexten

Erstellen Sie innerhalb des Abschnitts des vorgefertigten Layouts, der die beiden Klappenreihen enthält, eine neue einspaltige Zeile und ziehen Sie sie an den Anfang des Abschnitts.

Verwenden Sie nun die Multiselect-Funktion von Divi (halten Sie Strg/cmd gedrückt, während Sie jeden Klappentext auswählen), wählen Sie 5 der Klappentexte in den beiden unteren Spalten aus und ziehen Sie sie in die neue einspaltige Zeile oben im Abschnitt.

Jetzt können Sie die beiden Zeilen löschen, die mit dem vorgefertigten Layout unten geliefert wurden. Danach sollten Sie nur noch eine einzige einspaltige Zeile mit 5 Klappentexten haben.

Hinzufügen einer Perspektive zu unserem Abschnitt

Um den 3D-Effekt zu erzielen, den wir in diesem Design suchen, müssen wir die perspektivische CSS-Eigenschaft zu unserem Abschnitt hinzufügen. Dadurch wird die 3D-Perspektive zu unserer Zeile hinzugefügt, wenn wir die Zeile mit den Transformationsoptionen drehen.

Öffnen Sie die Abschnittseinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

perspective: 1000px;

Später können Sie den Perspektivenwert erhöhen oder verringern, um die 3D-Elemente (in diesem Fall die Zeilen) beim Betrachten des Bildschirms näher oder weiter von der Perspektive des Benutzers weg zu bringen.

Weitere Informationen finden Sie unter Funktionsweise der Perspektive mit Transformationsoptionen in Divi.

Anpassen der Zeile

Bevor wir mit dem Gestalten unserer Klappentexte beginnen, konfigurieren wir zuerst unsere Zeileneinstellungen. Für dieses Design müssen wir im Wesentlichen drei Dinge auf Zeilenebene ändern:

1. Wir müssen unsere Klappentexte mit „display:flex“ horizontal ausrichten. Dadurch bleibt unser Design auf allen Geräten konsistent und reaktionsschnell (im Gegensatz zu einem 5-Spalten-Layout, das auf Tablet und Telefon nicht funktioniert).
2. Wir müssen die Standardspaltenränder entfernen, indem wir die Bundstegbreite auf 1 setzen.
3. Wir müssen Transform Rotieren verwenden, um die Zeile um 45 Grad auf der X-Achse zu drehen. Wenn die perspektivische Eigenschaft dem übergeordneten Element (dem Abschnitt) hinzugefügt wird, haben die Zeile und alle ihre Elemente den gesuchten 3D-Effekt.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Dachrinnenbreite: 1
Breite: 80 % (Desktop), 100 % (Tablet), 100 % (Telefon)
Transformieren X-Achse drehen: 45deg

Spaltenhauptelement-CSS:

display: flex;
justify-content: center;

Anpassen von Blurb-Stil und -Abstand

Jetzt ist es an der Zeit, den Inhalt und den Stil unserer Klappentexte ein wenig anzupassen.

Da wir auf alle unsere Klappentexte dieselben Anpassungen anwenden möchten, verwenden Sie erneut Multiselect, um alle Klappentexte auszuwählen und die Elementeinstellungen modal bereitzustellen.

Löschen Sie zunächst den Inhalt des Hauptteils.

Fügen Sie dann eine Hintergrundfarbe hinzu:

Hintergrundfarbe: rgba (20,241,217,0,16)

Aktualisieren Sie dann den folgenden Abstand:

Benutzerdefinierter Rand (Desktop): 2vw rechts
Benutzerdefinierter Rand (Tablet und Telefon): 0vw rechts

Benutzerdefinierte Polsterung: 2 % oben, 2 % unten, 3 % links, 3 % rechts

Fügen Sie als Nächstes einen Rahmen wie folgt hinzu:

Randbreite: 2px
Rahmenfarbe: rgba (20.241.217,0.66)

Zu diesem Zeitpunkt haben alle Klappentexte das Styling an Ort und Stelle. Wir müssen immer noch die Transformationsoptionen verwenden, um den Maßstab und die Position jedes der Klappentexte einzeln zu ändern, was den schwebenden 3D-Effekt der Klappentexte verstärkt. Aber bevor wir das tun, duplizieren wir die Zeile, um unsere zweite Zeile mit Klappentexten zu erstellen.

Erstellen der zweiten Reihe von Klappentexten

Um die zweite Reihe von Klappentexten zu erstellen, duplizieren Sie einfach die Reihe mit 5 Klappentexten, die Sie gerade angepasst haben.

Um einen Kollisionseffekt zu erzeugen, können wir die duplizierte Reihe in die entgegengesetzte Richtung drehen (-45 Grad).

Öffnen Sie die duplizierte Zeile und aktualisieren Sie Folgendes:

Transformieren X-Achse drehen: -45deg

Erhöhen Sie die Polsterung des oberen und unteren Abschnitts

An diesem Punkt können sich die vorderen Klappentexte außerhalb des Abschnitts erstrecken. Um dies zu beheben, fügen Sie Ihrem Abschnitt die folgende Auffüllung hinzu:

Benutzerdefinierte Polsterung: 15 % oben, 15 % unten

Verwenden von Transformationsoptionen zum individuellen Anpassen der Größe und Positionierung jedes Klappentexts

An diesem Punkt sind Sie bereit, kreativ zu werden, wie jeder über Ihren Klappentexten im 3D-Raum „schweben“ soll. Um dies zu tun, können Sie die Transformationsoptionen verwenden, um jeden Klappentext nacheinander genau an der gewünschten Stelle zu positionieren und zu skalieren. Auf diese Weise erscheinen Ihre Klappentexte im 3D-Raum unterschiedlich tief.

Der Einfachheit halber nummeriere ich die Klappentexte von 1-10, beginnend mit dem Klappentext ganz links in der oberen Reihe ( Klappentext Nr. 1) und endend mit dem Klappentext ganz rechts in der zweiten Reihe ( Klappentext Nr. 10 ).

Klappentext Nr. 1

Beginnen wir mit unserem ersten Klappentext in der obersten Reihe. Öffnen Sie die Klappeneinstellungen und aktualisieren Sie Folgendes:

Transformationsskala (x- und y-Achse): 90%

Klappentext #2

Öffnen Sie die Einstellungen für Blurb #2 und aktualisieren Sie Folgendes:

Transformationsskala (x- und y-Achse): 80%
Transformieren X-Achse verschieben: -10%

Klappentext #3

Transformationsskala (x- und y-Achse): 80%
Transformieren X-Achse verschieben: 20 %

Klappentext #4

Transformationsskala (x- und y-Achse): 85%
Transformieren X-Achse verschieben: -30%

Klappentext #5

Transformationsskala (x- und y-Achse): 60%

Wenn Sie fertig sind, sollte Ihre erste Reihe ungefähr so ​​​​aussehen.

Passen Sie die Transformationsoptionen für die Klappentexte 6-10 weiter an, beginnend mit Klappentext Nr. 6 ganz links in der zweiten Reihe.

Klappentext #6

Transformationsskala (x- und y-Achse): 60%
Transformieren X-Achse verschieben: -40%
Transformieren Y-Achse verschieben: -20%

Klappentext #7

Transformationsskala (x- und y-Achse): 90%
Transformieren X-Achse verschieben: 20 %

Klappentext #8

Transformationsskala (x- und y-Achse): 70%
Transformieren X-Achse verschieben: -50%

Klappentext #9

Transformationsskala (x- und y-Achse): 80%
Transformieren X-Achse verschieben: -20%

Klappentext #10

Transformationsskala (x- und y-Achse): 70%
Transformieren X-Achse verschieben: -60%

Schauen wir uns nun an, wie die zweite Reihe aussieht, wenn sie mit unserer ersten Reihe im 3D-Raum kollidiert.

Um das Design zu vervollständigen, können wir dem Abschnitt ein schönes 3D-Raumhintergrundbild hinzufügen. Ich verwende das Hintergrundbild des oberen Abschnitts, das mit dem Layout der Zielseite für Videospiele geliefert wurde, das wir für dieses Tutorial verwendet haben.

Endgültiges Design

Schauen wir uns nun das endgültige Design unserer schwebenden 3D-Module an.

Desktop

Tablette

Telefon

Aufgrund der 5 Klappentexte, die sich über die Reihe erstrecken, ist es eine etwas größere Herausforderung, alle 5 Klappentexte einzupassen, ohne dass sie über das Ansichtsfenster hinausragen. Um dies zu beheben, können Sie einfach den weit entfernten Klappentext in jeder Zeile auf dem Telefon ausblenden. Oder Sie können jedem Ihrer Klappentexte am Telefon eine kleinere Größe zuweisen.

Abschließende Gedanken

Ich hoffe, dieses Tutorial wird Ihnen einige Inspirationen geben, wie Sie Ihre eigenen schwebenden Module im 3D-Raum erstellen können. Alles, was Sie wirklich brauchen, sind ein paar Schritte, um Ihre gesamte Modulreihe mit Perspektiven- und Transformationsoptionen in 3D zu drehen. Danach können Sie jedes der Module so positionieren, dass sie an einer beliebigen Stelle schweben.

Viel Spaß beim Erkunden.

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

Danke schön!