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.
Und hier ist das Desktop- und Mobile-Header-Design.
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.
...