So erstellen Sie unregelmäßig geformte Abschnittsübergänge mit Divi

Eine der besten Möglichkeiten, das Design Ihrer Website zu verbessern, besteht darin, verschiedene Abschnittsübergänge zu verwenden. In einem früheren Beitrag haben wir Ihnen gezeigt, wie Sie dies nur mit den integrierten Divi-Optionen tun können. Wenn Sie jedoch etwas fortgeschritteneres oder personalisierteres erstellen möchten, können Sie auch unregelmäßig geformte Abschnittsübergänge erstellen. Aufgrund ihrer Komplexität ist dies der beste Weg, um dies zu erreichen, indem Sie Bilder mit einem transparenten Rahmen verwenden.

In diesem Beitrag zeigen wir Ihnen, wie Sie das tun können. Wir zeigen Ihnen nicht nur, was im Divi Builder zu tun ist, sondern zeigen Ihnen auch, wie Sie mit Photoshop in wenigen Schritten diese transparenten Rahmen auf Bildern erstellen können.

Beispielergebnis

Schauen wir uns ein Layoutbeispiel mit atemberaubenden unregelmäßig geformten Abschnittsübergängen an:

Wie Sie feststellen können, können Sie diese transparenten Rahmen auf Ihrer gesamten Website und in verschiedenen Abschnitten verwenden. Denken Sie daran, dass Sie je nach Größe Ihres transparenten Rahmens genügend Platz innerhalb der Abschnitte haben sollten, um den verschiedenen Inhalten zu entsprechen, die Sie teilen möchten. Es wird auch eine schöne Balance zwischen den verschiedenen Abschnitten schaffen.

So erstellen Sie unregelmäßig geformte Abschnittsübergänge mit Divi

Abonnieren Sie unseren Youtube-Kanal

Erstellen Sie transparente Ränder mit Photoshop

Sie können mit Photoshop so originelle Formen erzielen, wie Sie möchten. Sie können sich auch für eine kostenlose Alternative namens GimpShop entscheiden. Für dieses Tutorial verwenden wir jedoch Photoshop.

Öffnen Sie Photoshop

Öffnen Sie zunächst Photoshop auf Ihrem Computer.

Bild öffnen

Öffnen Sie anschließend das Bild, an dem Sie arbeiten möchten.

Doppelklick auf Bild & Ebene erstellen

Sobald Ihr Bild in Photoshop hochgeladen wurde, doppelklicken Sie auf die Bildebene und erstellen Sie eine neue Ebene dafür (Ebene 0).

Eine weitere Ebene hinzufügen

Um den transparenten Rahmen hinzuzufügen, benötigen Sie auch eine weitere Ebene. Fügen Sie sie also hinzu, indem Sie auf das Symbol klicken, das wir unten im Druckbildschirm markiert haben. Stellen Sie nach dem Erstellen der Ebene (Ebene 1) sicher, dass sie über der Ebene platziert wird, die Ihr Bild enthält.

Pinsel & Größe auswählen

Während die Ebene 1 aktiviert ist, fahren Sie fort und klicken Sie auf das Pinselsymbol.

Sobald Sie dies getan haben, können Sie die Größe und das Muster, das für den Pinsel verwendet wird, nach Ihren Wünschen anpassen. Es gibt Unmengen an kostenlosen Photoshop-Pinseln im Internet. Wählen Sie also je nach Art der Website, die Sie erstellen, einen passenden aus. Stellen Sie außerdem sicher, dass die Deckkraft auf 100 % eingestellt ist.

Beginnen Sie mit der Verwendung des Pinsels an den Rändern

Sobald Sie Ihren Pinsel an Ort und Stelle haben, verwenden Sie ihn auf der Seite, die transparent sein soll. Achte darauf, dass du den gesamten Rand mit deinem Pinsel bedeckst, damit alles danach transparent wird.

STRG (Windows) oder Befehl (Mac) + Neue Ebene auswählen

Wenn Sie fertig sind, können Sie STRG (für Windows) oder Befehl (für Mac) auf Ihrer Tastatur drücken und gleichzeitig auf Layer 1 klicken. Sie werden sehen, dass Photoshop alles auswählt, was Sie dieser Ebene hinzugefügt haben, in diesem Fall der geformte Rahmen.

Neue Ebene unsichtbar machen

Machen Sie als nächstes Layer 1 unsichtbar, indem Sie das Auge entfernen, wie im Druckbildschirm unten markiert.

Bild auswählen und neue Ebene löschen

Klicken Sie dann auf die Ebene, die Ihr Bild enthält, und drücken Sie die Löschtaste auf Ihrer Tastatur. Sobald Sie dies tun, werden Sie sehen, dass der Rahmen transparent wird.

Wählen Sie das rechteckige Auswahlwerkzeug und klicken Sie auf das Bild

Klicken Sie auf das Rechteckige Auswahlwerkzeug und drücken Sie zufällig irgendwo auf das Bild.

Bild als PNG speichern

Schließlich müssen Sie das Bild als PNG speichern, damit Sie es auf Ihrer Website verwenden können.

Hintergründe zu Divi . hinzufügen

Sobald Sie die verschiedenen Bilder erstellt haben, die Sie auf Ihrer Divi-Website verwenden möchten (mit der obigen Photoshop-Technik), ist der Rest einfach. Die von Ihnen erstellten Bilder dienen als Hintergrund für einen bestimmten Abschnitt. Wir zeigen Ihnen nur, wie Sie den Heldenabschnitt unseres Beispiels erstellen, da die gleiche Methode auch für die verschiedenen Abschnitte gilt.

Neuen Standardabschnitt hinzufügen

Fügen Sie eine neue Seite hinzu, wechseln Sie zu Visual Builder und fügen Sie dieser Seite einen neuen Standardabschnitt hinzu.

Hintergrundbild hochladen

Nachdem Sie alle Module, die Sie im Heldenbereich anzeigen möchten, platziert haben, können Sie fortfahren und das Bild hinzufügen, das Sie im vorherigen Teil dieses Beitrags erstellt haben.

Hintergrundfarbe hinzufügen

Sobald Sie dies getan haben, können Sie entscheiden, welche Farbe im transparenten Teil Ihres Bildes angezeigt wird. In diesem Beispiel haben wir '#dddddd' als Hintergrundfarbe verwendet. Sie können sofort sehen, dass die Farbe direkt im transparenten Teil des Bildes erscheint.

Stellen Sie sicher, dass genügend Polsterung vorhanden ist

Abhängig von der Anzahl der Module und der Größe Ihres transparenten Rahmens, den Sie in Ihrem Heldenbereich verwendet haben, müssen Sie möglicherweise benutzerdefinierte Polster hinzufügen. Spielen Sie mit den verschiedenen Abschnitts-Padding-Werten herum und sehen Sie, welcher Ihnen das beste Ergebnis liefert.

Fügen Sie dem nächsten Abschnitt dieselbe Hintergrundfarbe hinzu

Um sicherzustellen, dass die verschiedenen Abschnitte gut miteinander verschmelzen, verwenden Sie auch im nächsten Abschnitt dieselbe Hintergrundfarbe, die Sie in Ihrem Heldenabschnitt verwendet haben. Das bedeutet nicht unbedingt, dass Sie für Ihren nächsten Abschnitt eine einfarbige Hintergrundfarbe verwenden müssen, Sie können auch einen Verlaufshintergrund verwenden, solange die Farben beider Abschnitte schön harmonieren.

Beispiel

Wie bereits erwähnt, können Sie beliebig viele Bildränder erstellen und diese auf kreative Weise auf Ihrer Website verwenden. Um Ihnen einen Vorgeschmack zu geben, haben wir die folgende Beispielvorschau erstellt:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie unregelmäßig geformte Schnittübergänge ganz einfach nutzen können. Mit dieser Methode können Sie grundsätzlich jeden gewünschten Abschnittsübergang erstellen. Wir zeigen Ihnen nicht nur, wie Sie diese unregelmäßigen Formen mit wenigen Schritten in Photoshop erstellen, sondern auch, wie Sie sie dann im Divi Builder zum Laufen bringen können. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!