Divi: 5 Überlagerungen von Masken und Mustern, die auf ein Hintergrundbild anwendbar sind

Möchten Sie die Masken- und Hintergrundmuster-Überlagerung von Divi verwenden?

Mit dem letzten Version der Funktion Hintergrundmaske und Hintergrundmuster von Divi kannst du einzigartige Heldenabschnitte für deine erstellen Website. Ein Heldenabschnitt ist der erste Abschnitt Ihres Website und das ist das erste, was Ihr Besucher Sehen Sie sich das an, bevor Sie scrollen Website, also ist es wichtig, ein Blickfang zu sein!

Dieser Artikel 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 jedes Hero-Bereichs erforderlich sind, und gibt Ihnen die Tools an die Hand, die Sie benötigen, um in wenigen Minuten einen beeindruckenden Hero-Bereich für Ihre Website zu erstellen.

Fangen wir an!

Übersicht

Hier ist ein kurzer Überblick über die fünf Heldenabschnitte, die wir heute in diesem Artikel erstellen werden.

Laden Sie DIVI jetzt herunter!!!

Die Designs sind dezent, schlicht und dennoch wirkungsvoll.

Lesen Sie auch: Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern

Erstellen Sie eine neue Seite mit Divi Builder

Um zu beginnen, müssen Sie Folgendes tun:

Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.

Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder

klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)

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

Fünf Beispiele für Hintergrundmasken und Musterüberlagerungen, die auf ein Hintergrundbild angewendet werden können

Lassen Sie uns zuerst den Abschnitt „Hero“ erstellen

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

1. Erstellen Sie eine Layoutstruktur

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

2. Abschnittsabstand hinzufügen

Nachdem wir nun unsere Zeile und Spalte definiert haben, ist es an der Zeit, dem Abschnitt etwas Abstand hinzuzufügen.

Aktualisieren Sie auf der Registerkarte Abstand Folgendes:

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

Design des Heldenabschnitts Nr. 1

Lassen Sie uns den ersten Heldenabschnitt entwerfen.

Laden Sie DIVI jetzt herunter!!!

1. Kopfzeilentext hinzufügen

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

Geben Sie den Titeltext ein, dann unter der Registerkarte Überschrift Text, konfigurieren Sie diese Einstellungen:

• Überschriftenschrift: Work Sans
• Textfarbe: Weiß #ffffff
• Textgröße der Überschrift:
  • Desktop: 3em
  • Tablet: 2,2 em
  • Telefon: 1.4em

2. Schaltflächenmodul hinzufügen

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

• Unter der Registerkarte Inhalts: Erfahren Sie mehr
• Unter der Registerkarte Ausrichtung, wählen Sie: Mitte
• Klicken Sie auf Verwenden Sie benutzerdefinierte Stile für die Schaltfläche dann konfigurieren:
  • Schaltflächentextgröße:
    • Desktop: 20px
    • Tablet: 16px
    • Telefon: 14px
  • Schaltflächentextfarbe: #ffffff
  • Hintergrund: #1d1d1d
  • Rahmenbreite der Schaltfläche: 0
  • Randradius: 0
  • Buchstabenabstand: 3 Punkte
  • Schaltflächenschriftart: Work Sans
  • Schriftstil: TT

3. Fügen Sie ein Hintergrundbild hinzu

Nun, da unser Inhalt konfiguriert ist, ist es an der Zeit, mit der Gestaltung des Hintergrunds des Abschnitts zu beginnen.

• Gehen Sie zum Umschalter für den Hintergrund und klicken Sie auf die dritte Registerkarte, die Registerkarte „Bild“, und klicken Sie dann auf „Hintergrundbild hinzufügen“.
• Dadurch wird Ihre Medienbibliothek geöffnet, in der Sie ein Foto auswählen oder ein neues hochladen können.
• Nachdem Sie Ihr Foto ausgewählt haben, klicken Sie unten rechts auf die Schaltfläche „Bild hochladen“.

4. Fügen Sie ein Hintergrundmuster hinzu

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

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

5. Hintergrundmaske hinzufügen

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

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

So ! Sie haben jetzt einen wunderschön gestalteten Heldenbereich.

Abschnitt Held Nr. 2 Design

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 Überlagern ein und fügen Sie eine Überlagerungsfarbe von rgba (10,10,10,0.64) hinzu.

2. Fügen Sie ein Hintergrundmuster hinzu

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

• Wechseln Sie auf der Registerkarte Hintergrund zur 5. Registerkarte, der Registerkarte Hintergrundmuster, und klicken Sie dann auf „Hintergrundmuster hinzufügen“.
• wählen Getuftet aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(255,255,255,0.09)
  • Mustertransformation: keine
  • Größ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.

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

Abschnitt Held Nr. 3 Design

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 Überlagern ein und fügen Sie eine Überlagerungsfarbe von rgba (10,10,10,0.39) hinzu.

2. Fügen Sie ein Hintergrundmuster hinzu

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

• In der Registerkarte Hintergrund, navigieren Sie zur 5. Registerkarte, der Registerkarte Hintergrundmuster, und klicken Sie dann auf „Hintergrundmuster hinzufügen“.
• wählen Diagonale Streifen 2 aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(0,0,0,0.06)
  • Mustertransformation: keine
  • Größ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.

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

Abschnitt Held Nr. 4 Design

Lassen Sie uns nun den vierten Abschnitt von Hero entwerfen.

1. Fügen Sie ein Hintergrundbild hinzu

Wählen Sie Ihr Hintergrundbild aus.

2. Fügen Sie ein Hintergrundmuster hinzu

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

• In der Registerkarte Hintergrund, navigieren Sie zur 5. Registerkarte, der Registerkarte Hintergrundmuster, und klicken Sie dann auf „Hintergrundmuster hinzufügen“.
• wählen Smiles aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – rgba(0,0,0,0.2)
  • Mustertransformation: keine
  • Größe: Abdeckung
  • Ursprung wiederholen: oben links
  • Musterwiederholung: Wiederholen
  • Mustermischmodus: Normal

3. Hintergrundmaske hinzufügen

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

• In der Registerkarte Hintergrund, navigieren Sie zur 6. Registerkarte, der Registerkarte Hintergrundmaske, dann klicken Sie auf „Hintergrundmaske hinzufügen“.
• wählen Ecksee  aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba (10, 10, 10, 0,61)
  • Maskentransformation: horizontal
  • Seitenverhältnis: Horizontales Rechteck
  • Größe: Abdeckung
  • Maskenposition: Mitte links
  • Maskenmischmodus: Normal

3. Leitungsparameter konfigurieren

Bevor wir gehen, hat dieser Heldenabschnitt einzigartige Linienstile. Lassen Sie uns das einrichten.

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

Abschnitt Held Nr. 5 Design

Lassen Sie uns nun den fünften Heldenabschnitt entwerfen.

Laden Sie DIVI jetzt herunter!!!

1. Fügen Sie ein Hintergrundbild hinzu

Wählen Sie Ihr Hintergrundbild aus.

2. Fügen Sie ein Muster hinzu

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

• In der Registerkarte Hintergrund, navigieren Sie zur 5. Registerkarte, der Registerkarte Hintergrundmuster, und klicken Sie dann auf „Hintergrundmuster hinzufügen“.
• wählen Kreuze aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Musterfarbe – #ffffff
  • Mustertransformation: keine
  • Größe: Benutzerdefinierte Größe
  • Musterbreite: 10px
  • Musterhöhe: 10px
  • Ursprung wiederholen: Oben Unten
  • Musterwiederholung: Wiederholen
  • Mustermischmodus: Normal

3. Hintergrundmaske hinzufügen

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

• In der Registerkarte Hintergrund, navigieren Sie zur 6. Registerkarte, der Registerkarte Hintergrundmaske, dann klicken Sie auf „Hintergrundmaske hinzufügen“.
• wählen Diagonale Pillen  aus dem Dropdown-Menü und konfigurieren Sie diese Einstellungen:
  • Maskenfarbe: rgba (10, 10, 10, 0,61)
  • Maskentransformation: horizontal
  • Seitenverhältnis: Horizontales Rechteck
  • Größe: Abdeckung
  • Maskenposition: Mitte links
  • Maskenmischmodus: Normal

3. Leitungsparameter konfigurieren

Bevor wir gehen, hat dieser Heldenabschnitt auch einzigartige Linienstile. Lassen Sie uns das einrichten.

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

Siehe auch: Divi: So fügen Sie einer Kopfzeile Masken und Hintergrundmuster hinzu

Zusammenfassung

Mit den neuen Optionen ist es ganz einfach, einen einzigartigen und auffälligen Hero-Bereich für Ihre Website zu entwerfen Hintergrund- und Mustermaske von Divi. Jede Funktion hat viele Optionen, mit denen Sie wirklich kreative Hintergründe erstellen können. 

Außerdem können Sie jedem Divi Builder-Element Hintergrundmuster und Masken hinzufügen! Die Gestaltungsmöglichkeiten sind endlos.

Hoffentlich wird diese Technik eine weitere nützliche Designfähigkeit für zukünftige Projekte hinzufügen.

Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...