Wie man Portfolioelemente mit den Transformationsoptionen von Divi schön stapelt

Die neuen Divi-Transformationsoptionen haben eine Menge neuer Türen für die Erstellung eines optisch ansprechenden Webdesigns geöffnet. Es bringt uns einen Schritt näher daran, keine Bildbearbeitungssoftware zu benötigen, wenn wir eine Website von Grund auf neu gestalten. Wir können es so umgestalten, dass es genau so aussieht, wie wir es möchten, während wir immer noch ein 100% responsives Design haben.

In diesem Beitrag werden wir die neuen Transformationsoptionen verwenden, um Portfolioelemente schön zu stapeln. Dies ist ein großartiger Ansatz, um beispielsweise zuvor erstellte Websites zu präsentieren. Wir sorgen auch dafür, dass die Bilder genau dort bleiben, wo sie sind, unabhängig von der Bildschirmgröße der Besucher. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, mit den neuen Transformationsoptionen von Divi kreativ zu werden, wenn Sie eine Website an Ihre Bedürfnisse anpassen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Beginnen Sie damit, Ihrer Seite einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #f4f4f4
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 30%
• Endposition: 30%

Abstand

Wechseln Sie dann zur Registerkarte Design und ändern Sie die benutzerdefinierten Abstandswerte in den Abstandseinstellungen.

• Obere Polsterung: 0px (Desktop), 18vw (Tablet), 40vw (Telefon)
• Untere Polsterung: 0px (Desktop), 18vw (Tablet), 40vw (Telefon)

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie den oberen und unteren Standardabstand.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Anzeige

Außerdem stellen wir sicher, dass beide Spalten auf kleineren Bildschirmgrößen nebeneinander angezeigt werden. Dazu müssen wir dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

display: flex;

Bildmodul Nr. 1 zu Spalte 1 hinzufügen

Bild hochladen

Wir können jetzt mit dem Hinzufügen der verschiedenen Module beginnen! Damit Sie diesem Tutorial folgen können, speichern Sie den folgenden Druckbildschirm auf Ihrem Computer:

Laden Sie den Druckbildschirm in ein Bildmodul in der ersten Spalte hoch.

Größe

Gehen Sie dann zur Registerkarte "Design" und aktivieren Sie die Option "Vollbreite erzwingen". Sobald Sie dies tun, nimmt das Bild die gesamte Breite der Spalte ein.

• Volle Breite erzwingen: Ja

Abstand

Um die Größe des Bildes zu verkleinern, fügen wir einen benutzerdefinierten linken und rechten Rand hinzu. Sie werden feststellen, dass wir eine Viewport-Einheit verwenden, um sicherzustellen, dass die Größe des Bildes unabhängig von der Bildschirmgröße erhalten bleibt.

• Obere Marge: -10vw
• Linke Polsterung: 11vw
• Rechte Polsterung: 11vw

Grenze

Fügen Sie als nächstes '2vw' zu jeder der Ecken in den Rahmeneinstellungen hinzu.

Box Schatten

Zusammen mit einem Kastenschatten.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Transformieren Übersetzen

Jetzt können wir mit der Transformation des Bildes beginnen! Fügen Sie der Registerkarte "Transformation Translate" der Transformationsoptionen die folgenden Werte hinzu:

• Unten: -26vw
• Rechts: -2vw

Die Werte, die Sie hier hinzufügen, hängen von der Breite und Höhe Ihres Bildes ab. Wenn Sie also ein anderes Bild verwenden, müssen Sie die Werte entsprechend ändern. Stellen Sie sicher, dass Sie Ansichtsfenstereinheiten verwenden, um sicherzustellen, dass die Position des Bildes über alle Bildschirmgrößen hinweg gleich bleibt.

Transformieren Drehen

Wechseln Sie zur Registerkarte „Transformieren drehen“ und drehen Sie das Bild entsprechend:

• Links: 24°
• Mitte: 46°
• Rechts: -7deg

Schiefe übersetzen

Zu guter Letzt aktivieren Sie translate skew mit den folgenden Werten:

• Unten: -4deg
• Rechts: 24°

Bildmodul #2 zu Spalte 1 hinzufügen

Bild hochladen

Auf zum nächsten Bildmodul! Speichern Sie den folgenden Druckbildschirm auf Ihrem Computer oder verwenden Sie einen anderen Druckbildschirm Ihrer Wahl:

Fahren Sie fort, indem Sie den Druckbildschirm in das zweite Bildmodul in Spalte 1 hochladen.

Größe

Gehen Sie dann zu den Größeneinstellungen und aktivieren Sie die Option "Vollbreite erzwingen".

• Volle Breite erzwingen: Ja

Abstand

Wir verkleinern das Bild und überlappen es mit dem vorherigen Bild, indem wir einige benutzerdefinierte Randwerte in den Abstandseinstellungen verwenden.

• Obere Marge: -81vw (Desktop), -50vw (Tablet & Telefon)
• Linker Rand: 11vw
• Rechter Rand: 11vw

Grenze

Als nächstes fügen wir '2vw' zu jeder der Ecken in den Rahmeneinstellungen hinzu.

Box Schatten

Und wir fügen auch einen Boxschatten hinzu. Beachten Sie, wie wir für das zweite Bild des Portfolioelements einen dunkleren Kastenschatten verwenden. Dies wird Ihnen helfen, mehr Tiefe zwischen den Portfolioelementen zu schaffen.

• Stärke der Box-Schattenunschärfe: 150px
• Schattenfarbe: rgba(0,0,0,0.6)

Transformieren Übersetzen

Gehen Sie dann zu den Transformationseinstellungen und ändern Sie die Transformationswerte der Transformation:

• Unten: -8vw
• Rechts: 0px

Auch hier hängen diese Werte wirklich davon ab, wie Sie das Drucksieb positionieren möchten und welche Abmessungen Ihr Drucksieb hat. Je kleiner das Bild ist, desto mehr müssen Sie es nach links verschieben, indem Sie einen größeren negativen Wert verwenden.

Transformieren Drehen

Wechseln Sie zur Registerkarte „Transformieren drehen“ und spielen Sie mit allen drei Werten herum.

• Links: 24°
• Mitte: 46°
• Rechts: -7deg

Schiefe übersetzen

Ändern Sie zu guter Letzt die Werte für die Übersetzungsschiefe:

• Unten: -4deg
• Rechts: 24°

Bildmodul #3 zu Spalte 1 hinzufügen

Bild hochladen

Weiter zum nächsten und letzten Bildmodul, das wir in Spalte 1 benötigen. Speichern Sie den folgenden Druckbildschirm auf Ihrem Computer oder verwenden Sie einen anderen Druckbildschirm Ihrer Wahl:

Fügen Sie den gespeicherten Druckbildschirm zu einem neuen Bildmodul hinzu.

Größe

Gehen Sie dann zu den Größeneinstellungen und aktivieren Sie die Option "Vollbreite erzwingen".

• Volle Breite erzwingen: Ja

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen und ändern Sie die Randwerte entsprechend:

• Obere Marge: -107vw
• Linker Rand: 19vw
• Rechter Rand: 19vw

Grenze

Fahren Sie fort, indem Sie '2vw' zu jeder Ecke des Bildmoduls hinzufügen.

Box Schatten

Fügen Sie als nächstes einen Boxschatten hinzu. Auch hier verwenden wir eine stärkere Schattenfarbe als die, die wir für die beiden vorherigen Bildmodule verwendet haben.

• Stärke der Box-Schattenunschärfe: 200px
• Schattenfarbe: rgba(0,0,0,0.82)

Transformieren Übersetzen

Gehen Sie dann zu den Transformationseinstellungen und ändern Sie die Transformationswerte der Transformation:

• Unten: -42vw
• Rechts: 11vw

Transformieren Drehen

Wechseln Sie zur Registerkarte „Transformieren drehen“ und nehmen Sie auch dort einige Änderungen vor.

• Links: 24°
• Mitte: 46°
• Rechts: -7deg

Schiefe übersetzen

Ändern Sie zu guter Letzt die Werte für die Übersetzungsschiefe.

• Unten: -4deg
• Rechts: 24°

Titeltextmodul zu Spalte 2 hinzufügen

H2-Kopie hinzufügen

Auf zur zweiten Spalte! Fügen Sie ein Textmodul mit H2-Inhalten Ihrer Wahl hinzu.

H2-Texteinstellungen

Gehen Sie als nächstes zu den H2-Texteinstellungen und nehmen Sie einige Änderungen vor.

• Überschrift 2 Schriftart: Roboto
• Überschrift 2 Schriftstärke: Dünn
• Überschrift 2 Textausrichtung: Links
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 5vw (Desktop), 6vw (Tablet), 7vw (Telefon)
• Überschrift 2 Buchstabenabstand: -1px

Abstand

Fahren Sie fort, indem Sie einige benutzerdefinierte Randwerte in den Abstandseinstellungen hinzufügen.

• Obere Marge: 35vw (Desktop), 10vw (Tablet), 0vw (Telefon)
• Linker Rand: -4vw
• Rechter Rand: 4vw

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das nächste Modul, das wir in Spalte 2 benötigen, 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 Teilerfarbe.

• Farbe: #8193fa

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 8px
• Breite: 28%

Abstand

Und fügen Sie einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 1vw
• Linker Rand: -4vw
• Rechter Rand: 4vw

Beschreibungstextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir in Spalte 2 benötigen, ist ein weiteres Textmodul. Fügen Sie einen Absatzinhalt Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textschriftart: Open Sans
• Textgröße: 0.6vw (Desktop), 1.2vw (Tablet), 1.8vw (Telefon)
• Textzeilenhöhe: 3,1em (Desktop), 2,7em (Tablet), 2,6em (Telefon)
• Textausrichtung: Links

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: 1vw
• Linker Rand: -4vw
• Rechter Rand: 4vw

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir brauchen, um das Design zu vervollständigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Farbe 1: #5627ba
• Farbe 2: #8fb5fc
• Steigungsrichtung: 122deg
• Breite des Tastenrahmens: 0px
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Ändern Sie auch die benutzerdefinierten Werte für Rand und Abstand.

• Obere Marge: 2vw (Desktop), 3vw (Tablet), 5vw (Telefon)
• Unterer Rand: 6vw (Tablet), 8vw (Telefon)
• Linker Rand: -4vw
• Rechter Rand: 4vw
• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Box Schatten

Zu guter Letzt noch einen subtilen Boxschatten hinzufügen und fertig!

• Stärke der Box-Schattenunschärfe: 40px
• Schattenfarbe: rgba(0,0,0,0.3)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den neuen Transformationsoptionen von Divi kreativ werden. Genauer gesagt haben wir Portfolio-Elemente gestapelt, um ein schönes und optisch ansprechendes Design zu erstellen. Wir haben auch dafür gesorgt, dass die Bilder auf allen Bildschirmgrößen gut aussehen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!