Laden Sie 10 KOSTENLOSE Hintergrundbilder für Fluid Sections für Divi . herunter

Wenn Sie das Erscheinungsbild Ihrer Abschnitte auffrischen möchten, ist dies möglicherweise der ideale Beitrag für Sie. Wir haben 10 verschiedene Hintergrundbilder für flüssige Abschnitte erstellt, die Sie kostenlos herunterladen und auf jeder Website verwenden können, die Sie erstellen. Darüber hinaus zeigen wir Ihnen, wie Sie diese fließenden Hintergrundbilder mit den integrierten Optionen von Divi kombinieren können. Sie können Ihrem fließenden Hintergrundbild einen beliebigen Hintergrund mit Farbverlauf zuweisen und ihn mit einem Hintergrund mit Zeilenverlauf kombinieren, um sicherzustellen, dass Ihr Inhalt auch lesbar bleibt.

Lasst uns anfangen!

Vorschau

Beginnen wir mit einem Blick auf die 10 verschiedenen Hintergrundbilder für flüssige Bereiche, die Sie weiter unten im Beitrag herunterladen können. Wir haben die Bilder mit Verlaufshintergründen kombiniert, um einzigartige Ergebnisse zu erzielen. Wir werden auch jede der Farbverlaufskombinationen in diesem Beitrag teilen, aber Sie können gerne mit verschiedenen Farben experimentieren, um Ihr gewünschtes Endergebnis zu erzielen.

Laden Sie die Hintergrundbilder für den Flüssigkeitsbereich KOSTENLOS herunter

Um die kostenlosen Hintergrundbilder für den Flüssigkeitsbereich 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!

Abschnitt neu erstellen

Neuen regulären Abschnitt hinzufügen

Abstand

Nachdem Sie alle Bilddateien heruntergeladen haben, gehen Sie zu Ihrer WordPress-Website und öffnen Sie eine neue oder vorhandene Seite. Fügen Sie dann mit dem Visual Builder von Divi einen neuen regulären Abschnitt hinzu. Öffnen Sie die Einstellungen und ändern Sie die Abstandswerte.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

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

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie Änderungen an den Größeneinstellungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie auch einige Abstandswerte zu den Abstandseinstellungen hinzu.

• Obere Polsterung: 312px
• Untere Polsterung: 312px
• Spaltenbreite links: 50px
• Spaltenbreite rechts: 50px

Textmodul hinzufügen

Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen der Module zu beginnen! Das erste Modul, das wir brauchen, ist ein Textmodul. Fahren Sie fort und fügen Sie dem Inhaltsfeld etwas Inhalt hinzu, vorzugsweise einen H2-Titel und einen Absatz.

H2-Texteinstellungen

Gehen Sie als nächstes zu den H2-Texteinstellungen und wenden Sie die folgenden Änderungen an:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Ultra Bold
• Überschrift 2 Textfarbe: #FFFFFF
• Überschrift 2 Textgröße: 82px (Desktop), 60px (Tablet), 40px (Telefon)
• Überschrift 2 Zeilenhöhe: 1,4em

Texteinstellungen

Ändern Sie auch die allgemeinen Texteinstellungen.

• Textfarbe: #FFFFFF
• Textgröße: 16px
• Textzeilenhöhe: 1.9em
• Textausrichtung: Mitte

Größe

Fahren Sie fort, indem Sie die Breite dieses Moduls auf dem Desktop verringern.

• Breite: 58 % (Desktop), 100 % (Tablet & Telefon)
• Modulausrichtung: Mitte

Schaltflächenmodul hinzufügen

Kopie hinzufügen

Das zweite und letzte Modul, das wir brauchen, ist ein Button-Modul. Nachdem Sie das Modul unter dem Textmodul hinzugefügt haben, fügen Sie eine Kopie hinzu.

Tastenausrichtung

Ändern Sie als nächstes die Tastenausrichtung.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Gehen Sie dann zu den Schaltflächeneinstellungen und nehmen Sie einige Änderungen vor.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 18px
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #FFFFFF
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: -1px
• Button-Schriftart: Montserrat
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Fügen Sie zu guter Letzt etwas Platz zwischen dem vorherigen Modul und diesem hinzu, indem Sie einen oberen Rand hinzufügen.

• Oberer Rand: 25px

Flüssiger Abschnitt Hintergrund #1

Abschnitt Hintergrund mit Farbverlauf

Verwenden Sie den folgenden Verlaufshintergrund für Ihren Abschnitt:

• Farbe 1: #000000
• Farbe 2: #2d5b9b
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-1.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte

Zeilenverlaufshintergrund

Um das Ganze abzurunden, fügen Sie einen Zeilenverlauf über Ihrem Abschnittshintergrund hinzu. Dadurch wird der Text lesbarer. Es wird Ihnen auch helfen, Ihrer Seite etwas Tiefe zu verleihen.

• Farbe 1: rgba(0,0,0,0.67)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Fluid Section Background #2 & #3

Abschnitt Hintergrund mit Farbverlauf

Die Hintergrundbilder für den zweiten und dritten Flüssigkeitsabschnitt verwenden den folgenden Abschnittsverlaufshintergrund:

• Farbe 1: #4f009e
• Farbe 2: #fa00ff
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-2.png ' oder ' fluid-style-3.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte

Zeilenverlaufshintergrund

Fügen Sie auch einen subtilen Zeilenverlaufshintergrund hinzu:

• Farbe 1: rgba(255,48,75,0.13)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Hintergrund des flüssigen Abschnitts #4

Abschnitt Hintergrund mit Farbverlauf

Verwenden Sie den folgenden Verlaufshintergrund für Ihren Abschnitt:

• Farbe 1: #00245e
• Farbe 2: #ffee00
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-4.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte

Zeilenverlaufshintergrund

Fügen Sie zum Abschluss einen Zeilenverlaufshintergrund mit den folgenden Einstellungen hinzu:

• Farbe 1: rgba(0,0,0,0.37)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Flüssiger Abschnitt Hintergrund # 5

Abschnitt Hintergrund mit Farbverlauf

Fügen Sie Ihrem Abschnitt den folgenden Verlaufshintergrund hinzu:

• Farbe 1: #04000f
• Farbe 2: #00436d
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie dann die Datei ' fluid-style-5.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte

Zeilenverlaufshintergrund

Vervollständigen Sie Ihr Design mit dem folgenden Zeilenverlaufshintergrund:

• Farbe 1: rgba(0,0,0,0.58)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Flüssiger Abschnitt Hintergrund #6

Abschnitt Hintergrund mit Farbverlauf

Verwenden Sie die folgende atemberaubende Kombination mit Abschnittsverlaufshintergrund:

• Farbe 1: #4800ff
• Farbe 2: #c854ff
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-6.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte

Zeilenverlaufshintergrund

Zu guter Letzt fügen Sie eine Hintergrundüberlagerung mit Zeilenverlauf hinzu.

• Farbe 1: rgba(0,0,0,0.51)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Flüssiger Abschnitt Hintergrund #7

Abschnitt Hintergrund mit Farbverlauf

Wenden Sie die folgenden Verlaufshintergrundeinstellungen auf Ihren Abschnitt an:

• Farbe 1: #ff8300
• Farbe 2: #52006b
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-7.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Oben rechts

Zeilenverlaufshintergrund

Fügen Sie schließlich einen Zeilenverlaufshintergrund über Ihrem Abschnitt hinzu.

• Farbe 1: rgba(106,0,198,0.34)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Flüssiger Abschnitt Hintergrund #8

Abschnitt Hintergrund mit Farbverlauf

Wenden Sie den folgenden blauen Hintergrund mit Farbverlauf auf Ihren Abschnitt an:

• Farbe 1: #0b43dd
• Farbe 2: #09f9ed
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-8.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Oben links

Zeilenverlaufshintergrund

Vervollständigen Sie Ihr Design, indem Sie einen Zeilenverlaufshintergrund anwenden.

• Farbe 1: rgba(0,7,119,0,57)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Linear
• Radiale Richtung: Mitte

Flüssiger Abschnitt Hintergrund # 9

Abschnitt Hintergrund mit Farbverlauf

Fügen Sie Ihrem Abschnitt den folgenden Verlaufshintergrund hinzu:

• Farbe 1: #051f89
• Farbe 2: #6d0272
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-9.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte

Zeilenverlaufshintergrund

Erhöhen Sie nicht zuletzt die Lesbarkeit Ihrer Inhalte mit einem Zeilenverlaufshintergrund.

• Farbe 1: rgba(0,0,0,0.59)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Flüssiger Abschnitt Hintergrund #10

Abschnitt Hintergrund mit Farbverlauf

Das letzte Beispiel benötigt den folgenden Abschnittsverlaufshintergrund:

• Farbe 1: #051f89
• Farbe 2: #6d0272
• Verlaufstyp: Linear
• Verlaufsrichtung: 137deg
• Startposition: 48%

Abschnitt Hintergrundbild

Laden Sie die Datei ' fluid-style-10a.png ' hoch , die Sie im Download-Ordner finden und kombinieren Sie diese mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Oben links

Zeilenverlaufshintergrund

Fügen Sie als nächstes einen Zeilenverlaufshintergrund hinzu.

• Farbe 1: rgba(0,0,0,0.59)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte

Zeile Hintergrundbild

Fügen Sie Ihrer Zeile auch ein Hintergrundbild hinzu. Suchen Sie ' fluid-style-10b.png ' im Download-Ordner, laden Sie es hoch und kombinieren Sie es mit den folgenden Hintergrundeinstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Unten rechts

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Endergebnis.

Abschließende Gedanken

In diesem Beitrag haben wir 10 verschiedene und einzigartige Hintergrundbilder für flüssige Abschnitte geteilt, die Sie ohne Einschränkungen auf Ihren eigenen Websites verwenden können. Darüber hinaus haben wir Ihnen auch atemberaubende Verlaufshintergründe zur Verfügung gestellt, die Sie nur mit den integrierten Optionen von Divi mit den fließenden Hintergrundbildern kombinieren können. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten und lassen Sie uns wissen, welches Hintergrundbild der Fluid-Bereiche Ihnen am besten gefällt!