So erstellen Sie Hintergrundbild-Rand-Designs in Divi

Rahmen und Hintergrundbilder sind nach wie vor beliebte Gestaltungsmittel beim Erstellen von Websites. Die Verwendung der richtigen Hintergrundbilder kann Ihrer Website Persönlichkeit und Stil verleihen, ohne Zeit und Geld für benutzerdefinierte Grafiken aufwenden zu müssen. Und Rahmen sind hilfreich, um Ihren Inhalten Struktur zu verleihen.

Heute werden wir diese beiden Assets zusammenbringen, indem wir Hintergrundbilder als Rahmen gestalten. Divi bietet eine Reihe nützlicher Optionen zum Anpassen von Hintergrundbildern, die es einfach machen, Hintergrundbilder für einzigartige Rahmendesigns zu entwerfen. Dies ermöglicht es uns, Farben, Verläufe, Boxschatten und Mischmodi auf alle möglichen kreativen Arten zu kombinieren.

Lass uns anfangen.

Vorgeschmack

Hier sind die Hintergrundbilder, die wir zusammen bauen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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!

Abonnieren Sie unseren Youtube-Kanal

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

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
3. Bilder, die für simulierte Inhalte verwendet werden sollen

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

Allgemeine Tipps zum Erstellen von Hintergrundbild-Rahmendesigns

Bevor wir mit dem Erstellen beginnen, sind hier einige allgemeine Tipps, die Sie beim Erstellen von Hintergrundbildrahmendesigns beachten sollten.

#1 Wählen Sie Bilder mit viel Textur

Meistens möchten Sie, dass Ihre Grenzen eher schmal sind. Dies bedeutet, dass Sie nicht viel vom Bild sehen können. Es hilft also, Bilder mit viel Textur zu verwenden. Sie können beispielsweise ein Foto einer Landschaft, eines Blumenstraußes oder eines Stadthochhauses verwenden. Hier sind ein paar Bilder, die ich für dieses Tutorial verwende.

#2 Verwenden Sie Farbverläufe und Transparenz mit Ihren Hintergrundbildrändern

Hintergrundbilder können manchmal als großartiger Rahmen für Ihre Inhalte allein stehen. Aber meistens möchten Sie Ihrem Hintergrundbild einige Überlagerungen hinzufügen, um etwas Farbe zu erhalten oder die Hintergründe dunkler oder heller zu machen. Hintergrundverläufe sind eine großartige Möglichkeit, Ihren Hintergrundbildern Überlagerungen hinzuzufügen und einzigartige Rahmendesigns zu erstellen.

#3 Mischmodi verwenden

Durch die Verwendung von Mischmodi für Ihre Hintergrundbilder können Sie einzigartige Farben und Texturen in die Rahmendesigns implementieren. Alles, was Sie tun müssen, ist, zusammen mit Ihrem Hintergrundbild eine Hintergrundfarbe oder einen Farbverlauf hinzuzufügen und dann einen Mischmodus für das Hintergrundbild auszuwählen. Einige großartige Mischmodi für Hintergrundbildränder sind Farbe, Helligkeit, Multiplizieren und Bildschirm.

Verwenden Sie Optionen für abgerundete Ecken für einzigartige Formen

Nicht alle Ränder müssen gerade Kanten haben. Mischen Sie es ein wenig! Die Optionen für runde Ecken von Divi ermöglichen es Ihnen, diese Ecken auf kreative Weise zu gestalten.

Verwenden Sie Parallax-Hintergrundbilder als Rahmen

Das Tolle an Parallax ist, dass es das Design mit Bewegung lebendig macht. Wenn Sie Hintergrundbilder mit Parallaxe für Ihre Rahmendesigns verwenden, können Sie außerdem subtile Bewegungen erzeugen, die hervorstechen und Ihre Inhalte hervorheben.

Entwerfen von Hintergrundbildrändern in Divi

Nachdem wir nun die allgemeine Idee hinter dem Erstellen von Hintergrundbildrahmen-Designs verstanden haben, lassen Sie uns einige zusammen entwerfen. Wir werden 4 verschiedene Designs bauen. Jeder verfügt über ein grundlegendes Klappenmodul, das als simulierter Inhalt dient. Und wir verwenden die Spalteneinstellungen, um den Hintergrundbildrahmen für das Modul hinzuzufügen.

Beginnen wir mit unserem ersten Design.

Hintergrundbild Rahmendesign #1

Dieses erste Design verfügt über einen schmalen Hintergrundbildrahmen mit Boxschatten, damit es eher wie ein Rahmen für den Inhalt aussieht.

So gestalten Sie es.

Fügen Sie zunächst eine zweispaltige Zeile zu einem regulären Abschnitt hinzu.

Fügen Sie das Blurb-Modul hinzu

Fügen Sie dann in der linken Spalte ein Klappenmodul hinzu.

Sobald der Klappentext vorhanden ist, öffnen Sie die Klappentexteinstellungen und nehmen Sie das Standardbild heraus, sodass nur der Titel und der Hauptinhalt sichtbar sind.

Als nächstes geben Sie Ihrem Klappentext eine weiße Hintergrundfarbe.

Aktualisieren Sie dann die Klappendesign-Einstellungen wie folgt:

• Titelschriftart: Oswald
• Körperschriftart: Lato
• Rand 5 % oben, 5 % unten, 5 % links, 5 % rechts
• Polsterung: 7 % oben, 7 % unten, 10 % links, 10 % rechts
• Abgerundete Ecken: 20px oben rechts, 20px unten links
• Box Shadow: siehe Screenshot

Fügen Sie das Hintergrundbild zur Spalte hinzu

Dafür sorgt unser Klappenmodul. Jetzt fügen wir unseren Hintergrundbildrahmen hinzu. Dazu fügen wir der Spalte, die das Klappenmodul enthält, ein Hintergrundbild hinzu. Öffnen Sie die Zeileneinstellungen und dann die Einstellungen für Spalte 1 und fügen Sie folgenden Hintergrund hinzu:

• Hintergrundbild: [Bild Ihrer Wahl hochladen]
• Hintergrundfarbe: #303a7a
• Hintergrundbild-Mischung: Helligkeit

Aktualisieren Sie dann die abgerundeten Ecken und den Boxschatten wie folgt:

• Abgerundete Ecken: 20px oben rechts, 20px unten links
• Box Shadow: siehe Screenshot

Endergebnis

Schauen Sie sich nun das endgültige Design an.

Hintergrundbild Rahmendesign #2

Dieses nächste Design unterstreicht, wie die Verwendung von Bildern mit viel Textur wirklich schöne Ränder erzeugen kann, insbesondere wenn Sie sie mit Bildmischmodi kombinieren.

So gestalten Sie es.

Fügen Sie das Blurb-Modul hinzu

Um das Design zu erstellen, fügen wir den Klappentext zu Spalte 2 derselben Zeile hinzu, die Design Nr. 1 enthält. Fahren Sie fort und kopieren Sie das Klappenmodul aus Design Nr. 1 und fügen Sie es in Spalte 2 ein. Aktualisieren Sie dann die Klappenmoduleinstellungen wie folgt:

• Abgerundete Ecken: auf Standard zurücksetzen
• Rand: 10 % oben, 10 % unten, 10 % links, 10 % rechts
• Polsterung: 15 % oben, 15 % unten, 10 % links, 10 % rechts
• Randbreite: 1px
• Rahmenfarbe: #ffffff

Fügen Sie das Hintergrundbild zur Spalte hinzu

Öffnen Sie mit unserem Modul die Zeileneinstellungen und fügen Sie der Spalte 2 einen Hintergrundverlauf hinzu.

• Hintergrundfarbe links: #f7e0a5
• Hintergrundfarbe rechts: rgba(237,240,0,0.79)
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 0%

Fügen Sie dann ein Hintergrundbild mit einem schönen Farbmischeffekt hinzu.

• Hintergrundbild: [Bild hochladen]
• Hintergrundbild-Mischung: Farbe

Wie Sie sehen, behält der Farbmischmodus die Leuchtkraft der beiden Verlaufsfarben hinter dem Bild bei, um ein schönes Bildrahmendesign mit weichen Farben zu erstellen.

Endergebnis

Sehen Sie sich das Endergebnis des Designs an.

Hintergrundbild Rahmendesign #3

Dieses nächste Design hebt die Verwendung von Parallax-Bildern in einem Rahmendesign hervor. Wir werden auch einen Box-Schatten-Trick verwenden, um eine Farbüberlagerung für das Parallaxenbild zu erstellen.

So gestalten Sie es.

Fügen Sie zunächst eine neue zweispaltige Zeile unterhalb der ersten Zeile hinzu und kopieren Sie das Klappenmodul aus dem Klappentext in Spalte 1 der oberen Zeile und fügen Sie es in Spalte 1 der neuen Zeile ein.

Aktualisieren Sie dann das Klappenmodul wie folgt.

• Hintergrundfarbe: #333344
• Textfarbe: Hell
• Rand: 10 % oben, 10 % unten, 10 % links, 10 % rechts
• Polsterung: 10 % oben, 10 % unten
• Abgerundete Ecken: 20px
• Boxschatten: keiner

Wenn der Klappentext vorhanden ist, öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Einstellungen für Spalte 1 wie folgt:

• Hintergrundbild: [Bild hochladen]
• Verwenden Sie den Parallax-Effekt: JA
• Parallaxenmethode: Echte Parallaxe
• Abgerundete Ecken: 20px
• Box Shadow: siehe Screenshot

Im Moment ist der Hintergrundbildrahmen mit Parallaxe standardmäßig etwas überladen und könnte vom Inhalt ablenken.

Um das Hintergrundbild mit Parallaxe heller zu machen, können wir dem Klappentext einen Kastenschatten hinzufügen, der als helle Überlagerung dient.

Öffnen Sie die Klappeneinstellungen erneut und fügen Sie Folgendes hinzu:

• Box Shadow: siehe Screenshot
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenausbreitung: 200px
• Schattenfarbe: #ffffff

Endgültiges Design

Schauen wir uns nun das endgültige Design an.

Hintergrundbild Rahmendesign #4

Für dieses nächste Design werden wir ein Hintergrundbild mit Farbverläufen kombinieren, um als oberer und unterer Rand für den Klappentext zu dienen.

Fügen Sie das Blurb-Modul hinzu

Kopieren Sie zunächst das Klappenmodul in Spalte 2 der oberen Zeile und fügen Sie es in Spalte 2 der zweiten Zeile ein.

Wenn Sie fertig sind, aktualisieren Sie die Einstellungen des Klappenmoduls wie folgt:

• Rand: [Nehmen Sie den Rand heraus, indem Sie die Standardeinstellungen für den Rand wiederherstellen]
• Boxschatten: keiner
• Rand: 5 % oben, 5 % unten, 0 % links, 0 % rechts

Hinzufügen des Hintergrundbildrahmens

Um den Hintergrundbildrahmen für dieses Design hinzuzufügen, öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Einstellungen für Spalte 2 wie folgt:

• Hintergrundbild: [Bild hochladen]
• Hintergrund mit Farbverlauf links: #141777
• Hintergrundfarbe rechts: #ffb7eb
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 0%

• Hintergrundbild: [Bild hochladen]
• Hintergrundbild-Mischung: Leuchtkraft

Endgültiges Design

Sehen Sie sich das endgültige Design an.

Abschließende Gedanken

Das Erstellen von Hintergrundbildrahmen mit Divi ist eine einfache Möglichkeit, Ihrem Design Schönheit und Persönlichkeit zu verleihen. Die in diesem Tutorial vorgestellten Designs sollen die wichtigsten Optionen von Divi für die Erstellung einzigartiger Rahmendesigns demonstrieren. Bei all den verschiedenen verfügbaren Farbkombinationen und Mischmodi sind jedoch Ihrer Fantasie keine Grenzen gesetzt. Schnappen Sie sich also ein paar eigene Bilder und entdecken Sie neue und aufregende Bordüren-Designs für Ihr nächstes Projekt.

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

Danke schön!