Rahmen- und Hintergrundbilder sind nach wie vor beliebte Gestaltungselemente beim Erstellen von Websites. Durch die Verwendung der richtigen Hintergrundbilder können Sie Ihrer Website Persönlichkeit und Stil verleihen, ohne Zeit und Geld für benutzerdefinierte Grafiken aufzuwenden. Und Ränder sind nützlich, um Ihrem Zuhause Struktur zu verleihen Inhalt.
Heute bringen wir diese beiden zusammen, indem wir Hintergrundbilder als Rahmen gestalten. Divi verfügt über eine Reihe nützlicher Optionen zum Anpassen von Hintergrundbildern, wodurch es einfach ist, Hintergrundbilder für einzigartige Randdesigns zu entwerfen. Auf diese Weise können wir Farben, Farbverläufe, Kastenschatten und Mischmodi auf alle möglichen kreativen Arten kombinieren.
Lassen Sie uns beginnen.
Was Sie brauchen, um loszulegen
Für den Einstieg benötigen Sie Folgendes:
- Le Divi-Thema installiert und aktiv
- Eine neue Seite, die von Grund auf neu erstellt wurde (visueller Konstruktor)
- Bilder zur Verwendung Inhalt fiktiv
Danach haben Sie eine leere Leinwand, auf der Sie mit dem Entwerfen beginnen können Divi.
Allgemeine Tipps zum Erstellen von Hintergrundbild-Rahmenmustern
Bevor Sie mit dem Erstellen beginnen, finden Sie hier einige allgemeine Tipps, die Sie beim Erstellen von Rahmenmustern für Hintergrundbilder berücksichtigen sollten.
# 1 Wählen Sie Bilder mit viel Textur
Meistens möchten Sie, dass Ihre Grenzen enger werden. Dies bedeutet, dass Sie nicht viel von dem Bild sehen können. Es ist daher nützlich, Bilder mit viel Textur zu verwenden. Sie können beispielsweise ein Foto einer Landschaft, einen Blumenstrauß oder einen hohen Turm verwenden. Hier sind einige Bilder, die ich für dieses Tutorial verwende.
# 2 verwenden Farbverläufe und Transparenz mit den Rändern des Hintergrundbilds
Hintergrundbilder können manchmal allein schon eine tolle Umrandung für Sie sein Inhalt. Meistens möchten Sie Ihrem Hintergrundbild jedoch Überlagerungen hinzufügen, um Farbe zu erzielen oder den Hintergrund dunkler oder heller zu machen. Hintergrundverläufe sind eine großartige Möglichkeit, Ihren Hintergrundbildern Ebenen hinzuzufügen und einzigartige Rahmendesigns zu erstellen.
# 3 Verwenden Sie die Zusammenführungsmodi
Durch die Verwendung von Mischmodi für Hintergrundbilder können eindeutige Farben und Texturen auf Rahmenmuster angewendet werden. Sie müssen lediglich eine Hintergrundfarbe oder einen Hintergrund mit Ihrem Hintergrundbild hinzufügen und dann einen Mischmodus für das Hintergrundbild auswählen. Farbe, Helligkeit, Multiplikation und Bildschirm sind einige großartige Mischmodi für Hintergrundbildränder.
Verwenden Sie abgerundete Ecken für einzigartige Formen
Nicht alle Ränder müssen gerade Kanten haben. Mischen Sie es ein wenig! Optionen mit abgerundeten Ecken Divi ermöglichen es Ihnen, diese Ecken kreativ zu gestalten.
Verwenden Sie Parallaxen-Hintergrundbilder als Rahmen
Das Tolle an Parallaxe ist, dass sie Design mit Bewegung zum Leben erweckt. Wenn Sie Hintergrundbilder mit Parallaxe für Ihre Rahmenentwürfe verwenden, können Sie außerdem subtile Bewegungen erstellen, die hervorstechen und Ihre Inhalte hervorheben.
Hintergrundgrenzdesign in Divi
Nachdem wir nun die allgemeine Idee verstanden haben, die der Erstellung von Hintergrundbild-Rahmenmustern zugrunde liegt, stellen wir uns einige zusammen vor. Wir werden 2 verschiedene Modelle bauen. Jedes wird ein grundlegendes Präsentationsmodul haben, das als fiktiver Inhalt dient. Und wir werden die Spaltenparameter verwenden, um den Hintergrundbildrand des Moduls hinzuzufügen.
Beginnen wir mit unserem ersten Entwurf.
#1 Rahmenhintergrundbild
Dieser erste Entwurf kennzeichnet einen schmalen Hintergrundbildrand mit einem Flächenschatten, damit er eher wie ein Rahmen für den Inhalt aussieht.
So gestalten Sie es.
Fügen Sie zunächst einem regulären Abschnitt eine Zeile mit zwei Spalten hinzu.
Zusammenfassungsmodul hinzufügen
Fügen Sie dann ein Klappentextmodul in die linke Spalte ein.
Sobald der Klappentext vorhanden ist, öffnen Sie die Einstellungen für den Explosionstext und extrahieren Sie das Standardbild, sodass nur der Titel und der Textinhalt sichtbar sind.
Dann geben Sie Ihrem Text einen weißen Hintergrund.
Aktualisieren Sie dann die Präsentationsdesignparameter wie folgt:
- Texttitel: Oswald
- Körperpolizei: 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
Hintergrundbild zur Spalte hinzufügen
Dies kümmert sich um unser Präsentationsmodul. Fügen wir nun unseren Hintergrundbildrand hinzu. Dazu fügen wir der Spalte mit dem Klappentext-Modul ein Hintergrundbild hinzu. Öffnen Sie die Zeileneinstellungen und dann die Einstellungen für Spalte 1 und fügen Sie den folgenden Hintergrund hinzu:
- Hintergrundbild: [Bild Ihrer Wahl hochladen]
- Hintergrundfarbe: #303a7a
- Hintergrundbild der Mischung: Helligkeit
Aktualisieren Sie dann die abgerundeten Ecken und den Schatten der Box wie folgt:
- Abgerundete Ecken: 20px oben rechts, 20px unten links
- Box Shadow: siehe Screenshot
Endergebnis
Überprüfen Sie nun das endgültige Design.
Rahmenhintergrundbild # 2
Dieses nächste Design unterstreicht die Tatsache, dass die Verwendung von Bildern mit hoher Textur schöne Ränder erzeugen kann, insbesondere wenn Sie sie mit Bildüberblendungsmodi kombinieren.
So gestalten Sie es.
Fügen Sie das Blurb-Modul hinzu
Um das Design zu erstellen, fügen wir den Klappentext in Spalte 2 derselben Zeile ein, die Design Nr. 1 enthält. Kopieren Sie das Design-Layout-Modul Nr. 1 und fügen Sie es in Spalte 2 ein. Aktualisieren Sie die Einstellungen des Präsentationsmoduls wie folgt:
- Abgerundete Ecken: Standardeinstellungen wiederherstellen
- Rand: 10% oben, 10% unten, 10% links, 10% rechts
- Polsterung: 15% oben, 15% unten, 10% links, 10% rechts
- Breite des Rahmens: 1px
- Rahmenfarbe: #ffffff
Hintergrundbild zur Spalte hinzufügen
Öffnen Sie mit unserem Modul die Linieneinstellungen und fügen Sie der 2-Spalte einen Hintergrundverlauf hinzu.
- Linker Hintergrundverlauf: #f7e0a5
- Rechter Hintergrundverlauf Farbe: rgba (237,240,0,0.79)
- Verlaufsrichtung: 90deg
- Ausgangsposition: 50%
- Endgültige Position: 0%
Fügen Sie dann ein Hintergrundbild mit einem schönen Verlaufseffekt hinzu.
- Hintergrundbild: [Bild herunterladen]
- Hintergrundbildmischung: Farbe
Wie Sie sehen können, behält der Farbmischmodus die Helligkeit der beiden Farbverläufe hinter dem Bild bei, um ein schönes Bildrandmuster mit weichen Farben zu erstellen.
Endergebnis
Entdecken Sie das Endergebnis des Designs.
Neueste Gedanken
Das Erstellen von Rahmen mit Bildern ist eine einfache Möglichkeit, Ihrem Design Schönheit und Persönlichkeit zu verleihen. Das in diesem Tutorial hervorgehobene Design soll die Möglichkeiten hervorheben, die Divi bei der Gestaltung einzigartiger Ränder bietet. Daher sind die Designs mit den verschiedenen Farbkombinationen unbegrenzt. Holen Sie sich also einige Bilder und erfahren Sie mehr über die Gestaltung von Rahmen mit Bildern auf Divi.
Ihrer Gesundheit zuliebe.