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.
Was Sie brauchen, um loszulegen
Um zu beginnen, müssen Sie Folgendes tun:
- 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).
- Erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Frontend mit Divi Builder (visueller Konstruktor).
- 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.
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.
Laden Sie ein Bild hoch, das ungefähr 500 x 700 Pixel groß ist. Ich verwende eine aus dem Eye Doctor Layout Pack.
Nachdem 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
Wir 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;
Bild Nr. 2
Fügen Sie dann ein neues Bildmodul unter dem aktuellen Bild hinzu.
Laden Sie anschließend ein neues Bild herunter, dessen Abmessungen 1000-Pixel für 667-Pixel entsprechen.
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.
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:
- 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
Passen Sie dann die Polsterung etwas an.
- Polsterung (Büro): 0px oben, 0px unten
- Auffüllen (Telefon): 0px oben, 10vw unten
Leitungseinstellungen
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
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
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;
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
- Transformatorübersetzung: 5vw (X-Achse), 11vw (Y-Achse)
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
Wir können sogar einige Filter hinzufügen, um das Bild schärfer zu machen.
- Sättigung: 30%
- Deckkraft: 60%
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 dann dem regulären Abschnitt eine Zeile einer Spalte hinzu.
Fügen Sie dann der Zeile einen Textbaustein hinzu.
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
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
Endgültiges Design
Hier ist das endgültige Design.
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!
Sehr schlecht anpassbar mit anderen Bildern, deren Implementierung kompliziert ist, aber trotzdem danke
Danke !! 🙂