5 Hintergrundmasken und Musterüberlagerungen, die Sie auf Ihr Hintergrundbild anwenden können

Mit Divis neuester Feature-Version für Hintergrundmasken und Hintergrundmuster können Sie einige einzigartige Hero-Abschnitte für Ihre Website erstellen. Ein Hero-Bereich ist der erste Bereich Ihrer Website und das erste, was Ihre Besucher sehen, bevor sie durch Ihre Website scrollen. Daher ist es wichtig, auffällig zu sein! Durch die Kombination der Optionen für Hintergrundbild, Hintergrundmaske und Hintergrundmuster von Divi können wir überzeugende Hero-Abschnitte erstellen, damit Ihre Website einen großartigen ersten Eindruck hinterlässt.

Dieser Beitrag zeigt Ihnen, wie Sie fünf einzigartige Hintergrundmasken und Musterüberlagerungen erstellen, die Sie auf ein Hintergrundbild anwenden können, um wirklich atemberaubende Heldenabschnitte zu erstellen. Dieses Tutorial behandelt die wesentlichen Schritte, die zum Erstellen der einzelnen Hero-Abschnitte erforderlich sind, und gibt Ihnen die Tools an die Hand, die Sie benötigen, um in wenigen Minuten einen auffälligen Hero-Abschnitt für Ihre Website zu erstellen.

In diesem Beispiel verwenden wir kostenlose Fotos aus dem Online Course Layout Pack. Um dieselben Bilder zu verwenden, scrollen Sie bis zum Ende dieses Beitrags, um die Bilder in voller Auflösung herunterzuladen.

Lass uns anfangen!

Was wir schaffen

Hier ist ein kurzer Blick auf die fünf Heldenabschnitte, die wir heute in diesem Beitrag erstellen werden.

Die Designs sind subtil, einfach und dennoch wirkungsvoll.

Laden Sie das Layout KOSTENLOS herunter

Wenn Sie das vorgefertigte Layout-Design aus diesem Tutorial herunterladen möchten, müssen Sie es zunächst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. 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 unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.

DOWNLOAD

Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!

So laden Sie die Layouts herunter und verwenden sie

Gehen Sie wie folgt vor, um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren:

1. Navigieren Sie zur Divi-Bibliothek.
2. Klicken Sie oben auf der Seite auf die Schaltfläche Importieren.
3. Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus.
4. Wählen Sie die Download-Datei von Ihrem Computer aus (stellen Sie sicher, dass Sie die Datei zuerst entpacken und die JSON-Datei verwenden).
5. Klicken Sie dann auf die Importschaltfläche.

Sobald Sie die Layouts erfolgreich importiert haben, werden sie in Ihrer Divi-Bibliothek angezeigt und stehen zur Verwendung in Divi Builder zur Verfügung.

Kommen wir nun zum Tutorial!

Was Sie brauchen, um loszulegen

Bevor wir beginnen können, müssen Sie:

1. Installieren und aktivieren Sie das Divi-Design.
2. Erstellen Sie eine neue Seite, veröffentlichen Sie sie und klicken Sie auf die Schaltfläche „Use The Divi Builder“, um die Seite im Frontend mit Visual Builder zu bearbeiten.
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Jetzt haben wir eine leere Leinwand, um mit dem Entwerfen zu beginnen!

So erstellen Sie 5 Hintergrundmasken- und Musterüberlagerungen zur Anwendung auf ein Hintergrundbild

Lassen Sie uns zuerst den Heldenabschnitt erstellen

Alle unsere Designbeispiele verwenden dieselbe Abschnitts-, Zeilen- und Spaltenstruktur, also richten wir diese jetzt ein.

1. Layoutstruktur erstellen

Fügen Sie Ihrer Seite eine Zeile hinzu und klicken Sie dann auf das grüne „+“-Symbol, um die Spaltenstruktur aufzurufen, und wählen Sie die erste Spalte aus, die eine Spalte mit voller Breite.

2. Abschnittsabstand hinzufügen

Jetzt, da wir unsere Zeile und Spalte festgelegt haben, ist es an der Zeit, dem Abschnitt einen Abstand hinzuzufügen.

Aktualisieren Sie auf der Registerkarte Abstand Folgendes:

• Desktop: 400 Pixel oben und 400 Pixel unten
• Tablet: 200 Pixel oben und 200 Pixel unten; 25px links und rechts
• Telefon: 50 Pixel oben und 50 Pixel unten; 25px links und rechts

So entwerfen Sie Heldenabschnitt Nr. 1

Lassen Sie uns den ersten Heldenabschnitt entwerfen.

1. Überschriftentext hinzufügen

Klicken Sie auf das graue „+“-Symbol, um die Modulbibliothek aufzurufen. Scrollen Sie zum Text und klicken Sie zum Laden.

Geben Sie den Überschriftentext ein und konfigurieren Sie dann auf der Registerkarte Überschriftentext diese Einstellungen:

• Schriftfamilie: Work Sans
• Schriftfarbe: Weiß #ffffff
• Schriftgröße:
  • Desktop: 3rem
  • Tablette: 2,2 rem
  • Telefon: 1.4rem

2. Schaltflächenmodul hinzufügen

Fügen Sie eine Schaltfläche hinzu und konfigurieren Sie diese Einstellungen:

• Geben Sie auf der Registerkarte „Text“ Folgendes ein: Mehr erfahren
• Wählen Sie auf der Registerkarte Ausrichtung: Zentrieren
• Klicken Sie auf Benutzerdefinierte Stile verwenden und konfigurieren Sie dann:
  • Schaltflächentextgröße:
    • Desktop: 20px
    • Tablet: 16px
    • Telefon: 14px
  • Schaltflächentextfarbe: Weiß #ffffff
  • Hintergrundfarbe der Schaltfläche: Schwarz #1d1d1d
  • Rahmenbreite der Schaltfläche: 0
  • Randradius der Schaltfläche: 0
  • Tastenabstand: 3pt
  • Schaltflächenschriftart: Work Sans
  • Schaltflächen-Schriftstil: Großbuchstaben

3. Hintergrundbild hinzufügen

Nachdem wir unsere Inhalte eingerichtet haben, ist es an der Zeit, mit der Gestaltung des Bereichshintergrunds zu beginnen.

1. Navigieren Sie zum Umschalter Hintergrund und klicken Sie auf die dritte Registerkarte, die Registerkarte Bild, und klicken Sie dann auf „Hintergrundbild hinzufügen“.
2. Dadurch wird Ihre Medienbibliothek geöffnet, in der Sie ein Foto auswählen oder ein neues hochladen können.
3. Sobald Ihr Foto ausgewählt ist, klicken Sie unten rechts auf die Schaltfläche „Bild hochladen“.

4. Hintergrundmuster hinzufügen

Nachdem wir nun unser Hintergrundbild eingerichtet haben, fügen wir ein Muster hinzu.

• Navigieren Sie auf der Registerkarte Hintergrund zur 5. Registerkarte, der Registerkarte Muster, und klicken Sie dann auf „Hintergrundmuster hinzufügen“.
• Wählen Sie Getuftet aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(255,255,255,0,31)
  • Mustertransformation: keine
  • Mustergröße: Tatsächliche Größe
  • Ursprung der Musterwiederholung: Oben links
  • Musterwiederholung: Wiederholen
  • Mischmodus: Normal

5. Hintergrundmaske hinzufügen

Nachdem wir nun unser Hintergrundbild und Muster eingerichtet haben, fügen wir eine Hintergrundmaske hinzu.

• Navigieren Sie auf der Registerkarte „Hintergrund“ zur 6. Registerkarte, der Registerkarte „Maske“, und klicken Sie auf „Hintergrundmaske hinzufügen“.
• Wählen Sie Bean aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba(0,0,0,0.36)
  • Seitenverhältnis der Maske: horizontales Rechteck
  • Maskengröße: Zum Füllen dehnen

Voila! Jetzt haben Sie einen wunderschön gestalteten Heldenbereich.

So entwerfen Sie den Heldenabschnitt Nr. 2

Lassen Sie uns nun den zweiten Heldenabschnitt entwerfen.

1. Fügen Sie ein Hintergrundbild hinzu und stellen Sie den Mischmodus auf Überlagern ein

Wählen Sie Ihr Hintergrundbild aus, stellen Sie den Mischmodus auf Überlagerung ein und fügen Sie eine Überlagerungsfarbe von rgba (10,10,10,0,64) hinzu.

2. Hintergrundmuster hinzufügen

Nachdem wir nun das Hintergrundbild eingerichtet haben, fügen wir ein Hintergrundmuster hinzu.

• Navigieren Sie auf der Registerkarte Hintergrund zur 5. Registerkarte, der Registerkarte Muster, und klicken Sie auf „Hintergrundmuster hinzufügen“.
• Wählen Sie Getuftet aus der Dropdown-Liste und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(255,255,255,0,09)
  • Mustertransformation: keine
  • Mustergröße: Abdeckung
  • Ursprung der Musterwiederholung: Oben links
  • Musterwiederholung: Wiederholen
  • Mischmodus: Normal

3. Hintergrundmaske hinzufügen

Nachdem wir nun unser Hintergrundbild und Muster eingerichtet haben, fügen wir eine Hintergrundmaske hinzu.

• Navigieren Sie auf der Registerkarte „Hintergrund“ zur 6. Registerkarte, der Registerkarte „Maske“, und klicken Sie auf „Hintergrundmaske hinzufügen“.
• Wählen Sie Caret aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba(0,0,0,0.36)
  • Maskentransformation: Keine
  • Seitenverhältnis der Maske: horizontales Rechteck
  • Maskengröße: Zum Füllen dehnen
  • Maskenmischmodus: Normal

So entwerfen Sie den Heldenabschnitt Nr. 3

Lassen Sie uns nun den dritten Heldenabschnitt entwerfen.

1. Fügen Sie ein Hintergrundbild hinzu und stellen Sie den Mischmodus auf Überlagern ein

Wählen Sie Ihr Hintergrundbild aus, stellen Sie den Mischmodus auf Überlagerung ein und fügen Sie eine Überlagerungsfarbe von rgba (10,10,10,0,39) hinzu.

2. Hintergrundmuster hinzufügen

Nachdem wir nun unser Hintergrundbild eingerichtet haben, fügen wir ein Hintergrundmuster hinzu.

• Navigieren Sie auf der Registerkarte „Hintergrund“ zur 5. Registerkarte, der Registerkarte „Muster“, und klicken Sie auf „Hintergrundmuster hinzufügen“.
• Wählen Sie Diagonale Streifen 2 aus der Dropdown-Liste und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(0,0,0,0.06)
  • Mustertransformation: keine
  • Mustergröße: Tatsächliche Größe
  • Ursprung der Musterwiederholung: Oben links
  • Musterwiederholung: Wiederholen
  • Mischmodus: Normal

3. Hintergrundmaske hinzufügen

Nachdem wir nun ein Hintergrundbild und ein Muster hinzugefügt haben, fügen wir eine Hintergrundmaske hinzu.

• Navigieren Sie auf der Registerkarte „Hintergrund“ zur 6. Registerkarte, der Registerkarte „Maske“, und klicken Sie auf „Hintergrundmaske hinzufügen“.
• Wählen Sie Dreiecke aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba (10,10,10,0,61)
  • Mustertransformation: keine
  • Seitenverhältnis der Maske: horizontales Rechteck
  • Maskengröße: Zum Füllen dehnen
  • Maskenmischmodus: Normal

Wie man Heldenabschnitt #4 gestaltet

Lassen Sie uns nun den vierten Heldenabschnitt entwerfen.

1. Fügen Sie ein Hintergrundbild hinzu

Wählen Sie Ihr Hintergrundbild aus.

2. Hintergrundmuster hinzufügen

Nachdem wir nun unser Hintergrundbild hinzugefügt haben, fügen wir ein Hintergrundmuster hinzu.

• Navigieren Sie auf der Registerkarte Hintergrund zur 5. Registerkarte, der Registerkarte Muster, und klicken Sie auf „Hintergrundmuster hinzufügen“.
• Wählen Sie Smiles aus der Dropdown-Liste und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(0,0,0,0.2)
  • Mustertransformation: keine
  • Mustergröße: Abdeckung
  • Ursprung der Musterwiederholung: Oben links
  • Musterwiederholung: Wiederholen
  • Mischmodus: Normal

3. Hintergrundmaske hinzufügen

Nachdem wir nun unser Hintergrundbild und Muster angewendet haben, fügen wir eine Hintergrundmaske hinzu.

• Navigieren Sie auf der Registerkarte „Hintergrund“ zur 6. Registerkarte, der Registerkarte „Maske“, und klicken Sie auf „Hintergrundmaske hinzufügen“.
• Wählen Sie Corner Lake aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba (10,10,10,0,61)
  • Maskentransformation: Horizontal
  • Seitenverhältnis der Maske: Horizontales Rechteck
  • Maskengröße: Abdeckung
  • Maskenposition: Mitte links
  • Maskenmischmodus: Normal

3. Konfigurieren Sie Zeileneinstellungen

Bevor wir gehen, hat dieser Heldenabschnitt einzigartige Zeilenstile. Richten wir das ein.

• Größe:
  • Breite: 80 %
  • Maximale Breite: 800 Pixel
• Zeilenausrichtung:
  • Desktop: Standard
  • Tablett: Mitte
  • Telefon: Zentrum
• Abstand:
  • Links: 20vw

So entwerfen Sie den Heldenabschnitt Nr. 5

Lassen Sie uns nun den fünften Heldenabschnitt entwerfen.

1. Fügen Sie ein Hintergrundbild hinzu

Wählen Sie Ihr Hintergrundbild aus.

2. Hintergrundmuster hinzufügen

Nachdem wir nun unser Hintergrundbild eingerichtet haben, wenden wir ein Hintergrundmuster an.

• Navigieren Sie auf der Registerkarte Hintergrund zur 5. Registerkarte, der Registerkarte Muster, und klicken Sie auf „Hintergrundmuster hinzufügen“.
• Wählen Sie Kreuze aus der Dropdown-Liste und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – #ffffff
  • Mustertransformation: keine
  • Mustergröße: Benutzerdefinierte Größe
  • Musterbreite: 10px
  • Musterhöhe: 10px
  • Ursprung der Musterwiederholung: Oben links
  • Musterwiederholung: Wiederholen
  • Mischmodus: Normal

3. Hintergrundmaske hinzufügen

Nachdem wir nun ein Hintergrundbild und ein Muster angewendet haben, fügen wir eine Hintergrundmaske hinzu.

• Navigieren Sie auf der Registerkarte „Hintergrund“ zur 6. Registerkarte, der Registerkarte „Maske“, und klicken Sie auf „Hintergrundmaske hinzufügen“.
• Wählen Sie Diagonal Pills aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba (10,10,10,0,61)
  • Maskentransformation: Horizontal
  • Seitenverhältnis der Maske: Horizontales Rechteck
  • Maskengröße: Abdeckung
  • Maskenposition: Mitte links
  • Maskenmischmodus: Normal

3. Konfigurieren Sie Zeileneinstellungen

Bevor wir gehen, hat dieser Heldenabschnitt einzigartige Zeilenstile. Richten wir das ein.

• Größe:
  • Breite: 80 %
  • Maximale Breite: 800 Pixel
• Zeilenausrichtung:
  • Desktop: Standard
  • Tablett: Mitte
  • Telefon: Mitte
• Abstand:
  • Rechts: 18vw

Holen Sie sich mehr Hintergrundmasken- und Musterdesigns!

Wenn Sie mehr Designs wie dieses möchten, sehen Sie sich diese 12 Hintergrundmasken- und Musterdesigns kostenlos zum Download an.

Abschließende Gedanken

Mit der neuen Hintergrundmaske und den Musteroptionen von Divi ist es ganz einfach, einen einzigartigen und auffälligen Heldenbereich für Ihre Website zu entwerfen. Jede Funktion hat viele Optionen, mit denen Sie wirklich kreative Hintergrunddesigns erstellen können. Außerdem können Sie jedem Divi Builder-Element Hintergrundmuster und Masken hinzufügen! Die Gestaltungsmöglichkeiten sind endlos.