So gestalten und positionieren Sie Bilder an abstrakten Orten in Divi

Bilder sind ein wichtiger Aspekt des Webdesigns. Und modernes Webdesign scheint nach neuen und abstrakten Wegen zu verlangen, Bilder auf Ihrer Website anzuzeigen. Mit den Transformationsoptionen von Divi können Sie Bilder auf Ihrer Seite ganz einfach gestalten und positionieren, wo immer Sie möchten. Dies öffnet die Tür für die Erstellung einzigartiger Layouts, die Ihre Website auf die nächste Stufe heben.

In diesem Tutorial zeige ich Ihnen einige Möglichkeiten, wie Sie Bilder an abstrakten Stellen auf Ihrer Website gestalten und positionieren können. Auf diese Weise können Sie unzählige Designvariationen für Bilder erstellen, die Sie vielleicht nur in einem Bildbearbeitungsprogramm wie Photoshop oder Sketch für möglich gehalten hätten.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf die Designs, die wir in diesem Tutorial erstellen werden.

Laden Sie die Design-Beispiele aus diesem Tutorial KOSTENLOS herunter

Um diese Beispieldesigns 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.

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 nun zum Tutorial, sollen wir?

Erste Schritte

Stellen Sie zunächst sicher, dass das Divi-Design installiert und aktiv ist. Erstellen Sie dann eine neue Seite und stellen Sie den Divi Builder am Frontend bereit. Wählen Sie die Option „Von Grund auf neu erstellen“.

Jetzt sind Sie bereit zu entwerfen!

Positionieren von Bildern teilweise außerhalb des Ansichtsfensters (rechts oder links)

In diesem ersten Beispiel zeige ich Ihnen, wie Sie Bilder teilweise außerhalb des Ansichtsfensters positionieren. Dies ist eine schöne Möglichkeit, Ihren Bildern eine abstraktere Anzeige hinzuzufügen, die ähnlich wie ein benutzerdefiniertes Hintergrundbild für Ihre Inhalte funktioniert. Dann können Sie das Bild für noch einzigartigere Designs stylen.

So geht's.

Erstellen und gestalten Sie das Textmodul

Zuerst werden wir ein Textmodul erstellen, das als Hauptinhalt für unseren Abschnitt dienen wird.

Erstellen Sie, falls noch nicht geschehen, einen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann den Textbaustein in die Zeile ein.

Aktualisieren Sie den Inhalt, um Folgendes einzuschließen:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Textschriftart: Raleway
Überschrift 2 Schriftart: Raleway
Überschrift 2 Schriftstärke: Fett
Überschrift 2 Textgröße: 44px (Desktop), 24px (Telefon)
Breite: 680px (Desktop), 60 % (Tablet), 80 % (Telefon)
Benutzerdefinierte Polsterung: 10 % oben, 10 % unten, 10 % links, 5 % rechts

Bild 1 hinzufügen

Jetzt können wir das erste Bild hinzufügen. Fahren Sie fort und fügen Sie direkt über dem Textmodul ein Bildmodul hinzu.

Dann laden Sie Ihr Bild in das Bildmodul hoch. Stellen Sie sicher, dass das Bild groß genug ist, damit es beim Vergrößern des Bilds mit der Eigenschaft transform nicht an Qualität verliert. Ich verwende ein Bild, das 400 x 580 Pixel groß ist.

Bringen Sie als nächstes die Breite des Bildmoduls nach unten und richten Sie es wie folgt nach links aus:

Breite: 5%
Modulausrichtung: links

Wenn wir das Bildmodul auf diese Weise verkleinern, können wir zunächst den Negativraum des Layouts reduzieren. Auf diese Weise müssen wir den Abstand nicht mit negativen Rändern anpassen.

Jetzt können wir das Bild mit den Transformationsoptionen wie folgt vergrößern:

X-Achse der Transformationsskala: 416%
Transformationsskala Y-Achse: 416%

Dann können wir das Bild mit der Transformation translate wie folgt positionieren:

Transformieren X-Achse verschieben: -36%
Transformieren Y-Achse übersetzen: 41%

Schließlich können Sie das Bild mit der Funktion „Transformieren drehen“ drehen:

Transformieren Z-Achse drehen: 11deg

Jetzt können wir das zweite Bild hinzufügen. Fahren Sie fort und fügen Sie ein Bildmodul direkt unter dem Textmodul hinzu.

Laden Sie dann ein neues Bild in das Bildmodul hoch.

Bringen Sie als nächstes die Breite des Bildmoduls nach unten und richten Sie es wie folgt nach links aus:

Breite: 10%
Modulausrichtung: links

Die Breite muss nicht genau 10 % betragen. Alles, was Sie tun möchten, ist, das Modul so weit zu verkleinern, dass es nicht zu viel vertikalen Platz auf dem Layout einnimmt.

Aktualisieren Sie dann die Transformationsoptionen wie folgt:

X-Achse der Transformationsskala: 464%
Transformationsskala Y-Achse: 464%

Transformieren X-Achse verschieben: 7%
Transformieren Y-Achse verschieben: -80%

Transformieren Z-Achse drehen: -10deg

Fügen Sie dann einen Kastenschatten für ein zusätzliches Gestaltungselement hinzu.

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -20px
Vertikale Position des Boxschattens: -7px

Sicherstellen, dass das Textmodul an der Spitze bleibt

Wir möchten sicherstellen, dass das Textmodul über den Bildern bleibt, wenn sie sich auf dem Handy überlappen. Dadurch wird sichergestellt, dass die Bilder weiterhin als Hintergrundbilder im Design dienen.

Öffnen Sie dazu das Textmodul und fügen Sie das folgende Custom CSS zum Main Element hinzu:

Hauptelement-CSS:

position: relative;

Setzen Sie dann den Z-Index auf 1.

Ausblenden des Abschnittsüberlaufs

Da wir Bilder haben, die sich außerhalb des Seitenbereichs erstrecken, wird die Breite des Browser-Darstellungsfensters erhöht, um den zusätzlichen Platz aufzunehmen. Dadurch wird die horizontale Bildlaufleiste am unteren Rand des Browsers aktiviert. Um dies zu deaktivieren, müssen Sie dem Abschnitt ein CSS-Snippet hinzufügen.

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

overflow: hidden;

Sehen Sie sich jetzt das Endergebnis an.

Erstellen eines abstrakten Bildcollagenhintergrunds für Ihre Kopfzeile

Für dieses nächste Design zeige ich Ihnen, wie Sie eine abstrakte Collage von Bildern erstellen, die als Hintergrund für einen Header dienen. Dazu verwenden wir die display flex-Eigenschaft, um eine Reihe von Bildern zu erstellen, die wir auf kreative Weise skalieren und verschieben können.

So geht's.

Entwerfen des Kopfzeilen-Textmoduls

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile ein Textmodul hinzu und aktualisieren Sie den folgenden Inhalt:

<h1>Interior Design</h1>
<p>This is some content</p>

Aktualisieren Sie dann das Design wie folgt:

Hintergrundfarbe: rgba(0,0,0,0.07)
Text Textfarbe: #ffffff
Textausrichtung: Mitte
Überschrift Schriftart: Raleway
Schriftstärke der Überschrift: Fett
Ausrichtung des Überschriftentextes: Rechts
Textfarbe der Überschrift: #ffffff
Überschriftstextgröße: 44px (Desktop), 34px (Tablet), 24px (Telefon)
Breite: 500px (Desktop), 60 % (Tablet), 80 % (Telefon)
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 5vw oben, 5vw unten, 1vw rechts

Abschnittseinstellungen

Bevor wir unsere Bilder hinzufügen und den Collagenhintergrund erstellen, passen wir unseren Abschnitt an. Dies stellt unsere Leinwand für den Rest des Designs bereit.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe: #4c606d
Benutzerdefiniertes Padding (Desktop): 0px oben, 0px unten
Benutzerdefinierte Polsterung (Tablet): 20px unten
Benutzerdefinierte Polsterung (Telefon): 40px unten

Fügen Sie als Nächstes einen inneren Kastenschatten am unteren Rand des Abschnitts hinzu, dessen Farbe dem Hintergrund des nächsten Abschnitts auf der Seite entspricht (in diesem Fall ist er weiß). Auf diese Weise können wir den Effekt unserer Bilder erzeugen, die den unteren Teil der Kopfzeile in den nächsten Abschnitt überlappen (Sie werden später sehen, was ich meine).

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px
Vertikale Position des Boxschattens: -80px
Schattenfarbe: #ffffff

Und da wir für unsere Collage Bilder außerhalb des Schnittansichtsfensters bewegen, müssen wir das folgende CSS zum Hauptelement hinzufügen.

overflow: hidden;

Zeile 1 Einstellungen

Jetzt müssen wir der Zeile, die unser Textmodul enthält, etwas Auffüllen hinzufügen. Wir müssen auch einen Z-Index hinzufügen, um den Abschnitt über den Bildern zu halten, die wir unserem Abschnitt hinzufügen werden. Standardmäßig hat jeder Abschnitt einen Z-Index-Wert von 9. Wir müssen also nur einen Z-Index von 10 zu der Zeile hinzufügen, die wir oben behalten möchten.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Polsterung: 10vw oben
Z-Index: 10

Erstellen der abstrakten Bildcollage

An dieser Stelle ist der Abschnitt bereit, um mit dem Hinzufügen unserer Bilder zu beginnen.

Um die abstrakte Bildcollage zu erstellen, fügen wir 5 Bilder zu einer einspaltigen Zeile hinzu und verwenden dann "display: flex", um alle diese Bilder horizontal auf der Seite auszurichten. Dies ist notwendig, um die Bilder in allen Browsergrößen (horizontal) an Ort und Stelle zu halten. Wenn wir ein traditionelles 5-Spalten-Layout verwenden würden, brechen die Bilder auf verschiedenen Geräten in verschiedene Spaltenlayouts auf und brechen das Design.

Danach können wir unsere Bilder einzeln mit Transformationsoptionen stylen und positionieren.

Hinzufügen der Bildreihe

Fahren Sie fort und erstellen Sie eine neue einspaltige Zeile direkt unter der Zeile, die das Textmodul enthält.

Öffnen Sie dann die Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 50%
Dachrinnenbreite: 1

Und um alle Module in dieser Zeile horizontal auszurichten, fügen Sie das folgende CSS zum Column Main Element hinzu:

display: flex;

Wenn Sie der Reihe jetzt Bildmodule hinzufügen, werden sie horizontal ausgerichtet.

Sehen Sie sich an, was passiert, wenn ich ein Bildmodul in der Zeile mit display:flex in die Spalte dupliziere.

Fahren Sie fort und fügen Sie der Reihe 5 Bilder hinzu, um sicherzustellen, dass sie groß genug sind, um die Größenzunahme beim Skalieren des Bildes für die Collage zu berücksichtigen. Ich verwende Bilder aus unserem Home Improvement Layout Pack, die alle etwa 800px breit sind und in der Höhe variieren. Bilder mit unterschiedlichen Abmessungen ergeben in der Regel eine besser aussehende abstrakte Collage.

Positionieren der Bilder mit Transform Translate

Es ist an der Zeit, unsere Bilder zu positionieren, um unsere Collage zu erstellen.

Bild #1

Öffnen Sie die Einstellungen für das erste Bildmodul (ganz links) und aktualisieren Sie die Transformationsoptionen wie folgt:

X-Achse der Transformationsskala: 266%
Transformationsskala Y-Achse: 266%

Transformieren Übersetzen: X-Achse: -68%
Transformieren Übersetzen: Y-Achse: -54%

Bild #2

Öffnen Sie die Einstellungen für das zweite Imagemodul und aktualisieren Sie die Transformationsoptionen wie folgt:

X-Achse der Transformationsskala: 184%
Transformationsskala Y-Achse: 184%

Transformieren Übersetzen: X-Achse: -36%
Transformieren Übersetzen: Y-Achse: -66%

Bild #3

Öffnen Sie die Einstellungen für das dritte Bildmodul und aktualisieren Sie die Transformationsoptionen wie folgt:

X-Achse der Transformationsskala: 206%
Transformationsskala Y-Achse: 206%

Transformieren Übersetzen: X-Achse: -51%
Transformieren Übersetzen: Y-Achse: -27%

Bild #4

Öffnen Sie die Einstellungen für das vierte Bildmodul und aktualisieren Sie die Transformationsoptionen wie folgt:

X-Achse der Transformationsskala: 180 %
Transformationsskala Y-Achse: 180 %

Transformieren Übersetzen: X-Achse: 20%
Transformieren Übersetzen: Y-Achse: 42%

Bild #5

Öffnen Sie die Einstellungen für das fünfte Bildmodul und aktualisieren Sie die Transformationsoptionen wie folgt:

X-Achse der Transformationsskala: 290 %
Transformationsskala Y-Achse: 290 %

Transformieren Übersetzen: X-Achse: -50%
Transformieren Übersetzen: Y-Achse: 72 %

Hinzufügen eines Boxschattens zu den Bildern

Um ein zusätzliches Gestaltungselement zu schaffen, können wir unseren Bildern einen Kastenschatten hinzufügen. Aktivieren Sie dazu den Rastermodus und wählen Sie mit der Multiselect-Funktion alle Bildmodule aus. Öffnen Sie dann die Einstellungen eines der Bildmodule, um die Elementeinstellungen modal bereitzustellen.

Aktualisieren Sie dann Folgendes:

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -40px
Vertikale Position des Kastenschattens: 40px
Schattenfarbe: rgba(255,255,255,0.13)

Endergebnis

Hier ist das Endergebnis des Designs.

Desktop

Tablette

Telefon

Abschließende Gedanken

Diese Beispieldesigns sollen Ihnen einige Inspirationen geben, wie Sie Bilder auf Ihrer Website so gestalten und positionieren können, wie Sie es außerhalb einer Fotobearbeitungssoftware vielleicht nie für möglich gehalten hätten. Sobald Sie gelernt haben, wie Sie Ihr Layout richtig anpassen, können die Transformationsoptionen von Divi Bilder an einzigartigen und abstrakten Orten positionieren. Hoffentlich wird dies für Ihr nächstes Projekt nützlich sein.

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

Danke schön!