Das Zusammenführen mehrerer Bilder kann nützlich sein, um professionelle Hintergründe für Sie zu erstellen Website. Die Idee ist, zwei oder drei separate Bilder aufzunehmen und sie zu überlagern. Verwenden Sie dann einen Mischmodus, um die Ebenen miteinander zu verschmelzen, um ein nahtloses, einheitliches Design zu erstellen.

Jedes Element von Divi Builder verfügt über einen integrierten Zusammenführungsmodus und Filteroptionen, die das Zusammenführen der Elemente im Divi Builder vereinfachen. Natürlich können Sie Bilder in Photoshop (oder einem anderen Bildbearbeitungsprogramm) mischen, aber für diejenigen, die nach einer praktischen Divi-Lösung suchen, sollte dieses Tutorial hilfreich sein, da es mit Divi ziemlich einfach ist. Sobald Sie die Bilder an der richtigen Stelle haben, können Sie sie mit nur wenigen Klicks mischen. Und natürlich haben Sie ein Arsenal an Divi-Optionen, um den letzten Schliff zu geben und dem Design eine neue kreative Dimension zu verleihen.

Lassen Sie uns beginnen.

Übersicht

Hier ist eine Übersicht über das Design, das wir zusammen bauen werden.

Beispielmodell zum Erstellen von Divi

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

  1. Falls noch nicht geschehen, installieren und aktivieren Sie die Divi-Thema installiert (oder das Divi Builder-Plug-in, wenn Sie das nicht verwenden Divi-Thema).
  2. Erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Frontend mit Divi Builder (visueller Konstruktor).
  3. Laden Sie einige Dummy-Bilder in die Medienbibliothek hoch, um sie für das Lernprogramm zu verwenden. Ich benutze Bilder von Augenarzt-Layoutpaket .

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

So mischen Sie mehrere Bilder, um in Divi ein benutzerdefiniertes Hintergrunddesign zu erstellen

Beginnen wir mit dem Abschnitt und der Zeile

Fügen Sie dazu dem regulären Abschnitt eine Zeile einer Spalte hinzu.

Fügen Sie einen Divi-Abschnitt hinzu

Bilder mit dem Bildmodul hinzufügen

Bild Nr. 1

Sobald die Zeile und die Spalte definiert sind, fügen Sie der Zeile ein Bildmodul hinzu.

Fügen Sie ein Divi-Image-Modul hinzu

Laden Sie ein Bild hoch, das ungefähr 500 x 700 Pixel groß ist. Ich verwende eine aus dem Eye Doctor Layout Pack.

Divi BildeinstellungenNachdem das Bild hochgeladen wurde, stellen Sie die maximale Breite des Bilds mit der vw-Längeneinheit so ein, dass es gut zu den anderen Bildern passt, die zusammengeführt werden sollen, und richten Sie es dann wie folgt links aus ::

  • Maximale Breite: 33vw
  • Ausrichtung des Moduls: links

Änderung der Bildausrichtung des Divi-ModulsWir möchten, dass das nächste Bild, das wir hinzufügen, rechts von diesem Bild ausgerichtet wird. Also müssen wir dieses Bild nach links schweben lassen. Fügen Sie dazu dem Hauptelement folgendes CSS hinzu:

float: left;

Fügen Sie einen Divisionscode hinzu

Bild Nr. 2

Fügen Sie dann ein neues Bildmodul unter dem aktuellen Bild hinzu.

Fügen Sie ein Bild unter divi hinzu

Laden Sie anschließend ein neues Bild herunter, dessen Abmessungen 1000-Pixel für 667-Pixel entsprechen.

Fügen Sie ein Divi 2-Modul-Image ein

Geben Sie dem Bild dann eine neue Breite und eine neue maximale Ausrichtung.

  • Maximale Breite: 40vw
  • Ausrichtung des Moduls: rechts

Da das erste Bild nach links schwebt, muss das zweite Bild nun rechts nebeneinander liegen.

Divi Bildänderung

Wir werden zurückkommen, um diesen Bildern den letzten Schliff zu geben, aber jetzt gehen wir zu den Einstellungen im Abschnitt über.

Abschnittseinstellungen

Öffnen Sie die Abschnittseinstellungen und fügen Sie ein Hintergrundbild und einen Verlauf wie folgt hinzu:

  • Hintergrundbild: [Bild herunterladen ca. 1920 x 1280 Pixel]
    Fügen Sie ein Divi-Abschnitt-Hintergrundbild hinzu
  • Linke Hintergrundfarbe: rgba (1,16,63,0.64)
  • Rechter Hintergrundverlauf Farbe: rgba (12,113,195,0.82)
  • Platzieren Sie den Farbverlauf über dem Hintergrundbild: JA

Fügen Sie einen verschlechterten Effekt hinzu

Passen Sie dann die Polsterung etwas an.

  • Polsterung (Büro): 0px oben, 0px unten
  • Auffüllen (Telefon): 0px oben, 10vw unten

Konfigurieren Sie die Divi-PolsterungLeitungseinstellungen

Wenn der Abschnitt abgeschlossen ist, öffnen Sie die Leitungseinstellungen und aktualisieren Sie die folgenden Elemente:

  • Breite: 100%;
  • Maximale Breite: 100%;
  • Polsterung: 0px oben, 0px unten

Divi Line Modul Einstellung

Fügen Sie der Linie den Zusammenführungsmodus hinzu

Jetzt sollte die Linie den gesamten unteren Teil des Abschnitts abdecken. Auf diese Weise können wir der Linie einen Zusammenführungsmodus hinzufügen, um die beiden Bilder mit dem Hintergrund des Abschnitts zusammenzuführen. Fügen Sie dazu den folgenden Mischmodus hinzu.

  • Fusionsmodus: Multiplizieren

Divi Line Merge-Modus

Warum multiplizieren?

Der Mischmodus "Multiplizieren" multipliziert die aktuelle Ebene / Zeile (einschließlich aller darin enthaltenen Bilder) mit der darunter liegenden Ebene (dem Hintergrund des Abschnitts). Eine einfache Möglichkeit, über den Effekt nachzudenken, besteht darin, sich zwei Dias in einem Diaprojektor vorzustellen, die hintereinander gestapelt sind. Wenn Sie die beiden Bilder auf einen Bildschirm projizieren, erhalten Sie eine etwas dunklere Mischung aus beiden.

Bilder vertikal zentrieren

Sie müssen nicht, aber wenn Sie sicherstellen möchten, dass beide Bilder in der Zeile vertikal zentriert bleiben, können Sie der Spalte ein CSS-Snippet hinzufügen. Öffnen Sie dazu die Zeileneinstellungen und klicken Sie dann auf Spalteneinstellungen. Fügen Sie dann dem Hauptelement den folgenden CSS-Code hinzu.

Anzeige: Flex; Align-Items: Center;

Zeilenparameter divi

Letzter Schliff für die beiden besten Bilder

Momentan passen unsere beiden Top-Bilder gut zusammen, aber sie können einige Designänderungen verwenden, um sie ein bisschen professioneller aussehen zu lassen. Wir können einen weißen Kastenschatten verwenden, um die Ränder der Bilder zu mildern, und den Befehl Transformieren verwenden, um sie genau dort zu positionieren, wo sie bleiben sollen.

Bild # 1 Final Keys

Öffnen Sie die Einstellungen des Bildmoduls auf der linken Seite und aktualisieren Sie Folgendes:

  • Box Shadow: siehe Screenshot
  • Box Shadow Blur Force: 6vw
  • Box Schattenstärke: 6vw
  • Schattenfarbe: #ffffff
    Schattenmodul Bild Divi Konfiguration
  • Transformatorübersetzung: 5vw (X-Achse), 11vw (Y-Achse)

Divi-Bildmodul-Achsentransformation

Bild # 2 Final Keys

Wenn Sie mit der Bearbeitung von Bild 1 links fertig sind, öffnen Sie die Einstellungen für Bild 2 rechts und nehmen Sie die folgenden Änderungen vor:

  • Box Shadow: siehe Screenshot
  • Box Shadow Blur Force: 3vw
  • Box Shadow Spread Force: 3vw
  • Schattenfarbe: #ffffff

Modifikation des zweiten Divi-Bildes

Wir können sogar einige Filter hinzufügen, um das Bild schärfer zu machen.

  • Sättigung: 30%
  • Deckkraft: 60%

Filterkonfiguration des Divi-Bildmoduls

Textinhalt hinzufügen

Da unser Abschnitt nun mit drei schön zusammengefügten Bildern komplett ist, können wir unsere hinzufügen Inhalt oben im Abschnitt. Fügen Sie dazu unterhalb des aktuellen Abschnitts einen neuen Abschnitt hinzu.

Fügen Sie einen neuen Abschnitt über divi hinzuFügen Sie dann dem regulären Abschnitt eine Zeile einer Spalte hinzu.

Wählen Sie das Divi-Layout

Fügen Sie dann der Zeile einen Textbaustein hinzu.

Fügen Sie ein Divi für den zweiten Abschnitt eines Textmoduls ein

Körperinhalt

Aktualisieren Sie die Inhalt des Textbausteins mit dem Inhalt des folgenden Gremiums:

Buchen Sie eine Augenuntersuchung Ihr Inhalt geht hier. Bearbeiten oder entfernen Sie diesen Text inline oder in den Inhaltseinstellungen des Moduls. Sie können auch jeden Aspekt dieses Inhalts in den Modul-Designeinstellungen formatieren und in den erweiterten Einstellungen des Moduls sogar benutzerdefiniertes CSS auf diesen Text anwenden

Buchen Sie eine Divi-Modul-Prüfung

Formatieren Sie den Text

Sobald der Inhalt des Körpers vorhanden ist, aktualisieren Sie die Entwurfsparameter wie folgt:

  • Text Textfarbe: #ffffff
  • Schrift: Poppins
  • Titeltextfarbe: #ffffff
  • Text Title Size: 5vw
  • Breite: 60vw (Desktop), 100% (Telefon)
  • Rand (Desktop): -35% nach oben, 35% nach unten
  • Margin (Telefon): -70% nach oben, 70% nach unten

Divi-Textmodul zur Anpassung der Schriftarten

Endgültiges Design

Hier ist das endgültige Design.

Endgültiges Designbuch eine Beratung

Abschließende Gedanken

Der Mischmodus und die Filteroptionen von Divi bieten alles, was Sie zum Mischen von Bildern benötigen, um professionelle Hintergründe zu erstellen. Der Trick besteht darin, die Bilder mit vw-Längeneinheiten so zu positionieren, dass das Hintergrunddesign auch auf Mobilgeräten reagiert. Sobald die Bilder in Position sind, können wir mit allen Arten von Mischmodi und unzähligen anderen Designoptionen experimentieren, um äußerst harmonische Designs zu erstellen.

Ich hoffe, dieser Artikel hat Sie inspiriert und hoffe, in den Kommentaren von Ihnen zu hören.

Ihrer Gesundheit zuliebe!