So verwenden Sie Perspektive mit Transformationsoptionen zum Entwerfen von 3D-Fotowänden in Divi
Veröffentlicht: 2019-05-04Das Entwerfen einer 3D-Fotowand scheint nur mit einem Bildbearbeitungsprogramm wie Photoshop oder Sketch möglich zu sein. Aber es ist nicht! Heutzutage gibt es eine Menge scheinbar unmöglicher Designs, die Sie nur mit CSS im Web erstellen können. Und mit einem Page Builder wie Divi müssen Sie nicht einmal viel über CSS wissen, um diese Art von Designs zu erstellen. Deshalb zeige ich Ihnen heute, wie Sie in Divi 3D-Fotowände gestalten können.
Der Trick besteht darin, die perspektivische CSS-Eigenschaft zu verwenden. Mit nur einer einzigen CSS-Zeile, die einem übergeordneten Element hinzugefügt wird, können Sie die integrierten Transformationsoptionen von Divi verwenden, um Elemente in lebensechte 3D-Designs zu drehen.
Lass uns anfangen!
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf die 3D-Fotowände, die wir heute gestalten werden.
Laden Sie die 3D-Fotowand-Designbeispiele KOSTENLOS herunter
Um die 3D-Fotowand-Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie 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
Einstieg
Um mit diesem Tutorial zu beginnen, müssen Sie lediglich das Divi-Theme installiert und aktiviert haben. Sie benötigen einige Bilder, um damit zu arbeiten, also können Sie die gleichen Bilder verwenden, die ich aus dem Reisebüro-Layout-Paket verwende. Danach müssen Sie eine neue Seite erstellen, die Seite und den Titel angeben und den Divi Builder bereitstellen, um das Frontend zu erstellen. Wählen Sie dann die Option „von Grund auf neu erstellen“. Das ist es. Ihre Design-Leinwand wartet!
Verstehen, wie Perspektive mit Transformationsoptionen funktioniert
Wenn Sie jemals einen grundlegenden Kunstkurs besucht haben, sind Sie wahrscheinlich mit der Perspektive vertraut. Es ist eine Technik, die von Künstlern verwendet wird, um Objekte zu zeichnen, die 3D zu sein scheinen, obwohl sie auf einem 2D-Papier oder einer Leinwand vorhanden sind. Im Webdesign können Sie Elemente mithilfe der Eigenschaft transform in 3D-Positionen positionieren. In Divi sind diese Transformationsoptionen in den Divi-Builder integriert. Die Haupttransformationseigenschaft, die ein Element in eine 3D-Position bringt, ist die Transformationsdrehung, mit der Sie Elemente entlang der z-, x- oder y-Achse drehen können. Wenn Sie jedoch ein Element mithilfe von Transformationsdrehung drehen, wird das Element nicht als 3D angezeigt, es sei denn, die perspektivische Eigenschaft wird angewendet.
Angenommen, Sie haben ein einzelnes Bildmodul mit einem Bild, das zu einer einspaltigen Zeile hinzugefügt wurde.
Dann verwenden Sie die Eigenschaft Transform drehen, um das Bild entlang der x-Achse zu drehen. Das Bild wird gedreht, bleibt aber 2D, sodass das Bild einfach so aussieht, als wäre es von oben und unten gequetscht worden, um kürzer zu werden.
Wenn Sie dem Hauptelement von Row (das ein übergeordnetes Element des Bildes ist) eine Perspektive mit einem kleinen CSS-Schnipsel hinzufügen, fügen Sie dem Bild eine Perspektive hinzu. Je nach Perspektivenwert können Sie den Abstand vergrößern oder verkleinern, in dem das Objekt vom auf den Bildschirm schauenden Benutzer erscheint. Hier ist ein Beispiel dafür, wie das Bild aussehen wird, wenn Sie der Zeile „Perspektive: 600px“ hinzufügen.
Sie können sehen, dass der obere Teil des Bildes kleiner und der untere Teil des Bildes größer ist, wodurch der perspektivische 3D-Effekt entsteht. Grundsätzlich sieht das Bild 900px von dem Benutzer entfernt aus, der die Seite betrachtet.
In diesem Tutorial verwende ich dieselbe Technik, um eine ganze Reihe von Bildern zu drehen und dann dem übergeordneten Abschnitt eine Perspektive hinzuzufügen, um 3D-Fotowände zu erstellen.
Gestaltung von oberen und unteren 3D-Fotowänden
In diesem ersten Design werden wir oben und unten eine 3D-Fotowand hinzufügen, die als Überschrift verwendet werden kann. So geht's.
Erstellen der Top-3D-Fotowand
Um auf Ihrer neuen Seite zu beginnen, erstellen Sie einen regulären Abschnitt mit einer vierspaltigen Zeile.
Fügen Sie in Spalte 1 ein Bildmodul mit Ihrem ersten Bild hinzu. Alle Bilder, die ich in diesem Beispiel verwende, sind 600 x 800 Pixel groß.
Nachdem Sie Ihr Bild in das Bildmodul hochgeladen haben, aktualisieren Sie das Padding wie folgt:
Benutzerdefinierte Polsterung: 3 % oben, 3 % unten, 3 % links, 3 % rechts
Duplizieren Sie das Bild (oder kopieren Sie es und fügen Sie es ein) und fügen Sie es jeder der vier Spalten hinzu, sodass Sie drei Bilder in jeder der vier Spalten haben.
Dies dient als obere Wand (oder Decke), die wir drehen und die Perspektive hinzufügen, um das 3D-Wanddesign zu erstellen.
Passen Sie den Abschnitt an, um Perspektive hinzuzufügen und Überlauf auszublenden
Da wir das Zeilenmodul (nicht einzelne Bilder) drehen werden, müssen wir die perspektivische Eigenschaft zum übergeordneten Element der Zeile, dem Abschnitt, hinzufügen. Und um zu verhindern, dass die Bilder den Abschnittscontainer verlassen, müssen wir sowohl dem vertikalen als auch dem horizontalen Überlauf einen versteckten Überlauf hinzufügen.
Öffnen Sie dazu die Abschnittseinstellung und aktualisieren Sie Folgendes:
Hintergrundfarbe: #000000
Benutzerdefiniertes Padding: 0px oben, 0px unten
Um die perspektivische Eigenschaft hinzuzufügen, fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
Hauptelement-CSS:
perspective: 400px;
Sie sehen die Überlaufeigenschaften wie folgt:
Horizontaler Überlauf: versteckt
Vertikaler Überlauf: versteckt 
Reiheneinstellungen aktualisieren: Breite und Bundstegbreite
Jetzt ist es an der Zeit, die Reihe anzupassen, um sie für das gedrehte 3D-Design vorzubereiten. Dazu werden wir die Breite verkleinern und alle Ränder zwischen den Bildern entfernen, indem wir die Bundstegbreite aktualisieren.
Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Dachrinnenbreite: 1
Breite: 300px (Desktop, Tablet und Telefon)
Zeileneinstellungen aktualisieren: Transformieren, Drehen und Ursprung
Verwenden Sie nun die Option zum Drehen der Transformation, um die Zeile wie folgt zu drehen:
Transformieren Y-Achse drehen: -58deg
Ändern Sie den Transformationsursprung wie folgt:
Ursprung der Transformation: unten Mitte (oder 100% 50%)
Zeileneinstellungen aktualisieren: Benutzerdefinierte Spaltenbreiten
Da das vierspaltige Layout auf Tablet- und Telefondisplays erhalten bleiben soll, müssen wir die CSS für die Spaltenbreite an diesen Haltepunkten überschreiben. Dazu müssen wir jeder der Spalten eine CSS-Eigenschaft width hinzufügen. Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS-Snippet wie folgt zum Hauptelement jeder Spalte hinzu:
(Hinweis: Stellen Sie sicher, dass die Bundstegbreite auf 1 eingestellt ist, sonst funktioniert dies nicht)
Spalte 1 Hauptelement:
width: 25% !important;
Spalte 2 Hauptelement:
width: 25% !important;
Spalte 3 Hauptelement:
width: 25% !important;
Spalte 4 Hauptelement:
width: 25% !important;
Das ist es. Unsere erste 3D-Fotowand ist entstanden.
Erstellen Sie den Überschriftenabschnitt
Um unsere Überschrift für das Design zu erstellen, müssen wir einen neuen regulären Abschnitt mit einer einspaltigen Zeile direkt unter dem aktuellen Abschnitt erstellen.
Aktualisieren Sie den Abschnitt mit einem schwarzen Hintergrund, bevor Sie ein Modul hinzufügen:
Hintergrundfarbe: #000000
Fügen Sie dann dem Hauptelement des Abschnitts dieselbe perspektivische Eigenschaft wie zuvor wie folgt hinzu:
Fügen Sie dann der Zeile einen Textbaustein mit folgendem hinzu:
Inhalt: Fotografie
Textschriftart: Titillium Web
Textschriftart: TT
Text Textfarbe: #ffffff
Text Textgröße: 5vw
Text Buchstabenabstand: 6px
Textzeilenhöhe: 1em
Textausrichtung: Mitte
Jetzt können wir dem Textmodul eine Transformationsdrehung hinzufügen. Wenn die Perspektive auf das übergeordnete Element (oder den Abschnitt) eingestellt ist, tritt der 3D-Effekt auf, sobald wir den Text drehen.
Fügen Sie die Rotationswerte der Transformation wie folgt hinzu:
Transformieren X-Achse drehen: -12deg
Transformieren Y-Achse drehen: 32deg
Jetzt können wir die untere 3D-Fotowand erstellen.
Erstellen Sie die untere 3D-Fotowand (oder den Boden)
Um die untere 3D-Fotowand zu erstellen, können wir einfach den oberen Abschnitt mit der oberen Wand kopieren und einfügen und direkt unter dem Überschriftenabschnitt einfügen.
Aktualisieren Sie als Nächstes die Zeileneinstellungen des neuen Abschnitts wie folgt:
Transformieren Y-Achse drehen: 58deg
Ursprung der Transformation: Oben Mitte
Endgültiges Design
Das ist es! Schauen wir uns das endgültige Design an.
Das Design bleibt auch auf dem Handy erhalten (abgesehen von einem kleinen Überlauf).
Erstellen von linken und rechten 3D-Fotowänden
Für dieses nächste Design erstellen wir 3D-Fotowände auf der linken und rechten Seite unserer Überschrift statt oben und unten. Um den Designprozess zu beschleunigen, werden wir in unserem ersten Beispiel einige unserer vorgefertigten Designs verwenden.
Duplizieren Sie zunächst den unteren Abschnitt des ersten Entwurfsbeispiels, der die untere Bildwand enthält. Öffnen Sie dann die Zeileneinstellungen des neuen Abschnitts und setzen Sie die Transformationsoptionen auf den Standardzustand zurück.
Als nächstes duplizieren Sie die Zeile.
Kopieren Sie als Nächstes die Zeile (nicht den Abschnitt), die den Textbaustein mit der Überschrift im ersten Entwurfsbeispiel enthält. Fügen Sie es dann zwischen den beiden Zeilen mit den Bildern ein.
Dies ist ein ähnliches Setup wie das erste Design, außer dass sich alle unsere Zeilen innerhalb eines Abschnitts befinden. Dies ist wichtig für den nächsten Schritt.
Wir möchten, dass sich unsere beiden Bildwände links und rechts auf der Seite befinden, wobei der Text in der Mitte steht. Eine einfache Möglichkeit, dies zu tun, ist die Verwendung von Display-Flex in unserem Bereich. Dadurch werden unsere Zeilen innerhalb des Abschnitts horizontal ausgerichtet.
Öffnen Sie dazu die Abschnittseinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:
(Beachten Sie, dass wir den Perspektivenwert auf 700px erhöhen, um mehr „Z-Raum“-Abstand der Benutzerperspektive zu schaffen.)
Hauptelement-CSS:
perspective: 700px; display:flex;
Und voila! Unsere Wände sind an Ort und Stelle und bereit zum Drehen.
Fügen Sie mehr Bilder für eine höhere Wand hinzu
Um unsere 3D-Fotowand etwas höher zu gestalten, müssen wir nur in jeder unserer vier Spalten in jeder Reihe mit Bildern ein weiteres Bild hinzufügen. Stellen Sie nur sicher, dass sie die 3%-Polsterung wie die anderen tragen.
Ändern der Breite der beiden Seitenreihen
Bevor wir unsere Bildwand drehen, müssen wir zuerst ihre Breite auf 100% anpassen. Öffnen Sie die Zeileneinstellungen für die Bildwand auf der linken Seite und aktualisieren Sie Folgendes:
Breite: 100% (Desktop, Tablet, Telefon)
Max-Breite: 100%
Dann verfahren Sie mit der Reihe auf der rechten Seite genauso.
Drehen der Seitenreihen für 3D-Effekt
Jetzt können wir jeder unserer Zeilen unsere Transformationsrotation hinzufügen. Öffnen Sie zunächst die Zeileneinstellungen für die linke Zeile und aktualisieren Sie Folgendes:
Transformieren X-Achse drehen: 90deg
Öffnen Sie als Nächstes die Zeileneinstellungen für die Zeile auf der rechten Seite und aktualisieren Sie Folgendes:
Transformieren X-Achse drehen: -90deg
Mit unserer Perspektive auf Abschnittsebene werden unsere Zeilen als 3D-Fotowände auf jeder Seite unseres Textmoduls angezeigt.
Endergebnis
Schauen wir uns das Endergebnis an.
Als kleines Sahnehäubchen können Sie ein Hintergrundbild mit 3D-Grafikelementen hinzufügen. Hier ist ein Beispiel für das Design mit einem Hintergrundbild aus dem Cryptocurrency Layout Pack.
Bonus-Hover-Effekt: Schwingen Sie diese Wände beim Schweben in Sicht!
Sie können ganz einfach einen Transform-Rotation-Hover-Effekt hinzufügen, der es dem Benutzer ermöglicht, die Bildwand anzuzeigen, indem er sie beim Hover in die Ansicht schwenkt. Öffnen Sie dazu die Einstellungen der linken Zeile und aktualisieren Sie Folgendes:
Ursprung der Transformation: linke Mitte
Transformieren X-Achse drehen (Hover): 0deg
Aktualisieren Sie dann in den Einstellungen der rechten Zeile Folgendes:
Ursprung der Transformation: rechte Mitte
Transformieren X-Achse drehen (Hover): 0deg
Sehen Sie sich nun das Ergebnis an.
Bonus-Design-Effekt: Lassen Sie Bilder in den Weltraum brechen
Da die Bildreihe mit der richtigen Perspektive gedreht wird, können Sie die Bilder innerhalb Ihrer Reihe mit transform translate verschieben. Das Coole daran ist, dass die Bewegung entlang der 3D-Ebene bleibt. Öffnen Sie dazu einfach die Einstellungen eines Bildes und verwenden Sie die Option Transform translate, um das Bild außerhalb des Rasters in den Weltraum zu verschieben!
Hier ist ein Beispiel dafür, wie das aussehen würde, wenn Sie Bildern einige Transformationsübersetzungswerte hinzufügen.
Abschließende Gedanken
Das Erstellen von 3D-Fotowänden in Divi hat wirklich einen beeindruckenden Einfluss auf das Design einer Seite. Und ich muss sagen, es macht wirklich Spaß, mit den Techniken in diesem Artikel mit verschiedenen Designs zu experimentieren. Die perspektivische Eigenschaft arbeitet Hand in Hand mit den Transformationsoptionen, um unzählige lebensähnliche 3D-Designs zu erstellen! Und vergessen Sie nicht, dass diese Zeilen (oder Wände) mit jedem Modul in Divi gefüllt werden können. Probieren Sie also ruhig auch ein paar Klappentexte aus. Ich hoffe, das wird Sie inspirieren, heute etwas Einzigartiges zu schaffen.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!