Springe zum Hauptinhalt

So erstellen Sie Ränder mit Divi-Hintergründen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Rahmen- und Hintergrundbilder sind weiterhin beliebte Gestaltungselemente 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 zu verschwenden. Und Rahmen sind nützlich, um Ihren Inhalten Struktur zu verleihen.

Heute werden wir diese beiden Stärken zusammenbringen, indem wir Hintergrundbilder wie Rahmen entwerfen. Divi bietet eine Reihe nützlicher Optionen zum Anpassen von Hintergrundbildern, mit denen Hintergrundbilder für einzigartige Randdesigns einfach gestaltet werden können. 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. Divi Theme installiert und aktiv
  2. Eine neue Seite, die von Grund auf neu erstellt wurde (visueller Konstruktor)
  3. Bilder für fiktive Inhalte

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

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 allein können manchmal eine gute Grenze für Ihre Inhalte sein. Meistens möchten Sie Ihrem Hintergrundbild jedoch Überlagerungen hinzufügen, um Farbe zu erhalten oder die Hintergründe dunkler oder heller zu machen. Hintergrundverläufe sind eine großartige Möglichkeit, Ihren Hintergrundbildern eine Überlagerung hinzuzufügen und einzigartige Rahmenmuster 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

Alle Ränder müssen keine geraden Kanten haben. Mischen Sie ein wenig! Mit den Optionen für abgerundete Ecken von Divi können Sie diese Ecken kreativ 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie4
tweet
Registrieren