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:

  1. Le Divi-Thema installiert und aktiv
  2. Eine neue Seite, die von Grund auf neu erstellt wurde (visueller Konstruktor)
  3. 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.

Variety Darriete Plan

# 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

Verwenden Sie FarbverläufeDurch 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

Rahmen mit abgerundeten Ecken

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

Verwenden Sie Parallaxenbilder als RahmenDas 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.

Wählen Sie ein zweispaltiges Layout

Zusammenfassungsmodul hinzufügen

Fügen Sie dann ein Klappentextmodul in die linke Spalte ein.

Divi-Zusammenfassungsmodul hinzufügen

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.

Standard-Image zurücksetzen

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

Modifizierter Stil des Zusammenfassungsmoduls

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

Divi Farbhintergrund verschmelzenAktualisieren Sie dann die abgerundeten Ecken und den Schatten der Box wie folgt:

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

Änderung der Divi-Border-Spalte

Endergebnis

Überprüfen Sie nun das endgültige Design.

Endergebnis Teilrand mit Bild

Rahmenhintergrundbild # 2

Bild mit quadratischem RandDieses 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

Konfiguration des Divi-ZusammenfassungsmodulabstandsHintergrundbild 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%

rand zeichnungen hintergrundbild divi

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

  • Hintergrundbild: [Bild herunterladen]
  • Hintergrundbildmischung: Farbe

Divi Farbmischung

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.

Endergebnis divi

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.