Laden Sie 5 KOSTENLOSE Rahmenbilder für Divi . herunter

Es ist immer gut, zusätzliche Ressourcen zu haben, die Sie verwenden können, wenn Sie eine neue Website für sich selbst oder für einen Kunden erstellen. Deshalb stellen wir sicher, dass Sie jede Woche neue Layoutpakete erhalten. Es gibt jedoch auch andere Ressourcen, die sich als nützlich erweisen können, z. B. „Rahmenbilder“ oder Bilder, die Sie entlang der einen oder anderen Seite eines Divi-Designelements verwenden können, um einen stilistischen Akzent zu setzen. Wenn Sie die integrierten Optionen von Divi zusammen mit diesen Randbildern verwenden, können Sie beeindruckende Ergebnisse erzielen. In diesem Beitrag haben wir Ihnen 5 verschiedene Rahmenbilder zur Verfügung gestellt, die Sie unten kostenlos herunterladen können. Wir erklären Ihnen, wie Sie diese Randbilder zu Ihrem Vorteil nutzen und ein beeindruckendes Endergebnis erzielen können.

Lasst uns anfangen!

Vorschau

Werfen wir einen Blick auf die verschiedenen Rahmenbilder, die Sie weiter unten in diesem Beitrag herunterladen können. Für jede der Formen finden Sie 4 Versionen: eine obere, eine untere, eine linke und eine rechte. Mit diesen Bildern können Sie genau das gleiche Ergebnis erzielen, wie es in den ersten vier Bildern unten gezeigt wird:

Laden Sie die Bilddateien KOSTENLOS herunter

Um die kostenlosen Randbilder 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!

Sich nähern

• Nachdem Sie den Ordner mit allen 5 Randbildern heruntergeladen und entpackt haben, finden Sie 4 Unterordner: oberer Rand, unterer Rand, linker Rand und rechter Rand
• Das bedeutet, dass Ihnen insgesamt 20 Bilddateien zur Verfügung stehen
• Später in diesem Beitrag finden Sie die zugehörigen Einstellungen, die zu jeder der Randseiten passen
• Um das Ganze abzurunden, können Sie die Randbilder mit Verlaufsüberlagerungen kombinieren
• Diese Farbüberlagerungen helfen Ihnen, die Bilder so lebendig oder subtil erscheinen zu lassen, wie Sie es wünschen
• Sie können diese Randbilder ohne Einschränkungen verwenden, auch für kommerzielle Zwecke

Erstellen des Gesamtdesigns

Neuen Abschnitt hinzufügen

Abstand

Beginnen wir mit der Erstellung des Gesamtdesigns, mit dem wir die Rahmenbilder präsentieren. Öffnen Sie eine neue oder vorhandene Seite, fügen Sie einen neuen regulären Abschnitt hinzu und fügen Sie benutzerdefinierte Auffüllungen hinzu:

• Obere Polsterung: 300px
• Untere Polsterung: 300px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zu den Größeneinstellungen und machen Sie die Zeile auf volle Breite.

• Machen Sie diese Zeile in voller Breite: Ja

Titeltextmodul zu Spalte 1 hinzufügen

H2-Inhaltsbox hinzufügen

Beginnen wir mit dem Hinzufügen einiger Module! Das erste benötigte Modul ist ein Textmodul. Fügen Sie eine in die erste Spalte ein und fügen Sie Ihre H2-Kopie Ihrer Wahl in das Inhaltsfeld ein.

Überschriftstexteinstellungen

Nehmen Sie dann einige Änderungen an den H2-Texteinstellungen auf der Registerkarte Design vor.

• Überschrift 2 Schriftart: Abril Fatface
• Überschrift 2 Textgröße: 80px (Desktop), 70px (Tablet), 50px (Telefon)

Abstand

Fahren Sie fort, indem Sie oben in diesem Textmodul etwas Rand hinzufügen.

• Oberer Rand: 150px

Link-Textmodul zu Spalte 1 hinzufügen

Link zum Inhaltsfeld hinzufügen

Direkt unter dem Titel Textmodul, das Sie gerade hinzugefügt haben, fahren Sie fort und fügen Sie ein neues Textmodul hinzu. Wir verwenden dieses Textmodul als Schaltfläche, also stellen Sie sicher, dass Sie einen Link zum CTA hinzufügen.

Linktext-Einstellungen

Ändern Sie als Nächstes die Linktexteinstellungen auf der Registerkarte Design.

• Link-Schriftstärke: Ultra Bold
• Link-Schriftart: Großbuchstaben
• Linktextfarbe: #000000
• Linktextgröße: 21px

Abstand

Fügen Sie einen oberen Rand hinzu, um auch zwischen diesem Textmodul und dem vorherigen Platz zu schaffen.

• Oberer Rand: 100px

Grenze

Schließlich fügen Sie dem Link-Textmodul einen subtilen unteren Rand hinzu.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #333333

Beschreibungstextmodul zu Spalte 2 hinzufügen

Texteinstellungen

Die zweite Spalte benötigt nur eine Beschreibung Textbaustein. Nachdem Sie dem Inhaltsfeld Inhalt hinzugefügt haben, wenden Sie die folgenden Texteinstellungen an:

• Textgröße: 22px (Desktop), 20px (Tablet), 18px (Telefon)
• Textzeilenhöhe: 2.6em
• Textausrichtung: Begründen

Größe

Passen Sie die Größeneinstellungen auch an verschiedene Bildschirmgrößen an:

• Breite: 82 % (Desktop), 100 % (Tablet & Telefon)

Abstand

Und schließlich fügen Sie etwas oberen und unteren Rand hinzu.

• Oberer Rand: 100px
• Unterer Rand: 100px

Hinzufügen der Rahmenformen

Hintergrundeinstellungen für den linken Rand

Nachdem wir das Gesamtdesign abgeschlossen haben, können wir mit dem Hinzufügen der Rahmenbilder beginnen! Wir beginnen mit der linken Grenzseite. Suchen Sie Ihr gewünschtes Rahmenbild im Ordner "Linker Rahmen" und laden Sie es als Hintergrundbild für den Abschnitt hoch. Wenden Sie dann die folgenden Hintergrundbildeinstellungen an:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte links
• Hintergrundbild wiederholen: Keine Wiederholung

Hintergrundeinstellungen für den rechten Rand

Oder Sie finden Ihr gewünschtes Rahmenbild im Ordner "Rechter Rahmen" und fügen es mit den folgenden Einstellungen als Abschnittshintergrund hinzu:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte rechts
• Hintergrundbild wiederholen: Keine Wiederholung

Hintergrundeinstellungen für den oberen Rand

Das gleiche gilt für das obere Randbild, aber verwenden Sie stattdessen die folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Oben Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Hintergrundeinstellungen für den unteren Rand

Oder, last but not least, Sie können die unteren Randbilder im Ordner 'Bottom Border' finden und mit diesen Hintergrundeinstellungen für den Abschnitt kombinieren:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Unten Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Mischen Sie Farben mit halbtransparenter Überlagerung

Für jede der enthaltenen Rahmenformen können Sie auch eine Farbüberlagerung hinzufügen. Diese Überlagerung hilft Ihnen, die Randbilder subtiler aussehen zu lassen. Um eine Überlagerung hinzuzufügen, gehen Sie zu Ihren Abschnittseinstellungen und fügen Sie einen Verlaufshintergrund über dem Rahmenhintergrundbild hinzu.

• Farbe 1: #ffffff
• Farbe 2: rgba(255,255,255,0.36)
• Verlaufsrichtung: 141deg
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf einige potenzielle Designs, die Sie mit diesen kostenlosen Rahmenbildern erzielen können.

Abschließende Gedanken

In diesem Beitrag haben wir 5 verschiedene Rahmenbilder geteilt, die Sie kostenlos herunterladen können. Sie können diese Rahmenbilder ohne Einschränkungen für jede Website verwenden, an der Sie arbeiten. Wir empfehlen Ihnen, sie alle auszuprobieren und atemberaubende Designs zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!