Möchten Sie einen einzigartigen und atemberaubenden Hintergrund mit Masken und Hintergrundmustern erstellen? Divi ?

Die neuen Hintergrundmasken und -muster verfügen über Divi wird am häufigsten für Abschnitte einer Seite verwendet. Aber wir können sie auch zu Kopfzeilen hinzufügen! 

In diesem Tutorial zeigen wir Ihnen, wie Sie Masken und Hintergrundmuster zu einer Header-Vorlage hinzufügen Divi mit dem Konstruktor Themen

Es ist eine großartige Möglichkeit, völlig einzigartige Header-Designs für Ihre zu erstellen Website.

Lassen Sie uns beginnen.

Übersicht

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Gehen Sie zum Theme Builder von Divi und beginnen Sie mit der Erstellung eines globalen Headers

Gehen Sie im WordPress-Dashboard zu Divi > Themenersteller

Klicken Sie auf „Globale Kopfzeile hinzufügen“

wählen „Globale Kopfzeile erstellen“.

Danach können Sie mit dem Divi Builder einen neuen Header entwerfen.

So fügen Sie einer Divi-Kopfzeile Hintergrundmasken und Muster hinzu

Erstellen des Abschnittshintergrunds mit einer Hintergrundfarbe und einem Muster

Lesen Sie auch: Divi: So erstellen Sie einen Testimonials-Bereich in Form eines Rasters

Öffnen Sie zunächst die Einstellungen des vorhandenen Abschnitts. 

Unter der Registerkarte Inhalt, aktualisieren Sie die Hintergrundoptionen mit den folgenden Einstellungen:

Hintergrundfarbe:

  • Hintergrund: #262d3f

Hintergrundmuster:

  • Modell: Pillen
  • Musterfarbe: rgba (255,255,255,0.1)
  • Mustergröße: benutzerdefinierte Größe.
  • Musterbreite: 1px

Polsterung

Unter der Registerkarte Design, aktualisieren Sie die Abschnittsauffüllung wie folgt:

  • Polsterung (oben und unten): 0px

Dadurch wird der vertikale Abstand der Kopfzeile etwas verringert.

Fügen Sie eine Zeile mit dem folgenden Spaltenlayout hinzu

Platzhalter-Header-Inhalt hinzugefügt (ein Menü und eine Schaltfläche)

Fügen Sie in der linken Spalte der Zeile ein neues Menü hinzu.

Wählen Sie ein Menü aus.

Fügen Sie dann ein Logo hinzu und verwenden Sie die Einstellungen, um das Menü und das Logo wie gewünscht anzupassen.

Fügen Sie in der rechten Spalte ein Schaltflächenmodul hinzu und passen Sie es nach Ihren Wünschen an.

Erstellen des Linienhintergrunds mit Farbverlauf, Maske und Muster

Der Gradient

Öffnen Sie die Zeileneinstellungen, die Ihr Menü und Ihre Schaltfläche enthalten. Aktualisieren Sie dann die Hintergrundoptionen mit den folgenden Hintergrundeinstellungen:

Hintergrundverlauf:

  • Gradient Stops 1 (50 %): Klar
  • Gradientenstopps 2 (75 %): #ff4c00
  • Lenkung: 90 Grad

Schnittmuster

  • Modell: Pillen
  • Musterfarbe: rgba (38,45,63,0.48)
  • Mustergröße: 1 Pixel
  • Vertikaler Versatz: 20px

Hinweis: Der vertikale Versatz des Musters ist auf 20 Pixel eingestellt, da im Bereich über der Linie eine obere Polsterung von 20 Pixel vorhanden ist. Dadurch wird sichergestellt, dass das Abschnittsmuster mit dem Reihenmuster übereinstimmt.

Hintergrundmaske

  • Maske: Fischgrät
  • Maskenfarbe: #262d3f

HINWEIS: Für Kopfzeilen ist es am besten, die Maskengröße auf „Erweitern zum Füllen“ zu belassen, damit sie den horizontalen Raum abdeckt, ohne das Design der Maske zu beeinträchtigen.

Letzter Schliff für die Linie

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

Um das Design zu vervollständigen, fügen wir der Linie einen Randradius und ein paar weitere Bearbeitungen hinzu.

Radius, Rand und Randabstand

Unter der Registerkarte Design, aktualisieren Sie die Auffüllung wie folgt:

  • Polsterung (oben und unten): 5px

Geben Sie der Reihe dann eine schöne abgerundete Ecke für ein zusätzliches Designelement.

  • Abgerundete Ecken: 50px
  • Linke Randbreite: 50px
  • Linke Randfarbe: #262d3f

Wir müssen der linken Seite der Reihe einen Rahmen geben, da die quadratische Kante der Maske trotz der abgerundeten Ecken die Reihe überlaufen wird.

Endergebnis

Lassen Sie uns das Endergebnis sehen.

Der Verlauf ist ein wenig subtil, also sehen Sie sich hier an, wie er aussieht.

Divi

Und hier ist das Desktop- und Mobile-Header-Design.

Divi-Hintergrundmuster
Divi-Hintergrundmuster
Divi-Hintergrundmuster

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Das Header-Hintergrunddesign ist nur die Spitze des Eisbergs. Mit den in Divi verfügbaren Hintergrundoptionen muss viel erforscht werden.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu verstehen, wie die Hintergrundmasken und -muster von Divi zusammenarbeiten können, um ein einzigartiges Hintergrunddesign für Ihre Kopfzeilen zu erstellen. 

Fühlen Sie sich frei, mit mehr Kombinationen von Hintergrunddesigns zu experimentieren, um sie an Ihr eigenes Design anzupassen. Website oder Ihr anstehendes Projekt.

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.

...