So erstellen Sie ein schlankes Header-Design mit Parallelogrammen in Divi

Das Hinzufügen eines eleganten neuen Header-Designs zu Ihrer Seite ist eine effektive Möglichkeit, Ihre Besucher zu begeistern. Und das Entwerfen eines einzigartigen Hintergrunds für Ihre Kopfzeile ist ein großartiger Ausgangspunkt. In diesem Tutorial zeige ich Ihnen, wie Sie mit Divi auf kreative Weise Parallelogramme zu Ihrem Header-Design hinzufügen, indem Sie Verlaufshintergründe verwenden. Dies fügt dem Design ein schönes strukturelles Element hinzu, das sich vom traditionellen Box-Layout löst.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf das Design, das wir bauen werden.

Was wirst du brauchen

Um dieses Design zu erstellen, müssen Sie die wichtigsten Dinge tun:

1. Das Divi-Thema
2. The Interior Design Company Über das Seitenlayout (verfügbar im Divi Builder)

Einrichten der Seite

Für dieses Tutorial verwende ich das Interior Design Company About Page Layout auf einer neuen Seite. Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Seiten > Neu hinzufügen. Geben Sie dann Ihrer Seite einen Titel und klicken Sie, um den Divi Builder zu verwenden. Klicken Sie dann auf die Schaltfläche, um den Visual Builder bereitzustellen. Wählen Sie die Option „Ein vorgefertigtes Layout auswählen“. Suchen Sie dann das Interior Design Layout Pack und wählen Sie es aus. Wählen Sie das Seitenlayout Info und klicken Sie abschließend auf „Dieses Layout verwenden“.

Nachdem die Seite auf die Seite geladen wurde, können Sie mit der Bearbeitung beginnen.

Nehmen Sie die obere Polsterung des Abschnitts heraus und ersetzen Sie das Hintergrundbild

Dies ist ein einfacher erster Schritt. Alles, was Sie tun müssen, ist, mit der Maus über den oberen Teil des oberen Kopfbereichs der Seite zu fahren. Sie werden sehen, dass die aktuelle obere Polsterung auf 10 % eingestellt ist. Ziehen Sie die Polsterung einfach auf 0 %. Oder Sie können jederzeit in die Seiteneinstellungen gehen und das benutzerdefinierte obere Padding ebenfalls auf 0% setzen.

Sie können an dieser Stelle auch das Hintergrundbild ändern, dies ist jedoch nicht erforderlich. Gehen Sie dazu in die Abschnittseinstellungen und ändern Sie das Hintergrundbild unter der Registerkarte Inhalt. Nehmen Sie dann den Hintergrundverlauf heraus. Dies wird dazu beitragen, den Text (der weiß sein wird) auf Mobilgeräten besser lesbar zu machen, da etwas Text das Hintergrundbild überlappt.

Zeilengröße und Auffüllung anpassen

Gehen Sie als Nächstes zu den Zeileneinstellungen und aktualisieren Sie auf der Registerkarte Design Folgendes:

Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 100%
Benutzerdefinierte Polsterung: 0px oben, 10vw unten

Fügen Sie der Zeile und Spalte einen Hintergrund mit Farbverlauf hinzu

Um dieses schlanke Design zu erstellen, werden wir Verlaufshintergründe mit verschiedenen Start- und Stopppositionen überlappen. Zuerst müssen wir der Zeile und dann der Spalte einen Verlaufshintergrund hinzufügen.

Gehen Sie zu den Zeileneinstellungen auf der Registerkarte Inhalt und aktualisieren Sie Folgendes:

Hintergrundfarbe links: #1a1a1a
Hintergrundfarbe rechts: rgba(255,255,255,0)
Steigungsrichtung: 45deg
Startposition: 60%
Endposition: 0%

Spalte 1 Hintergrundfarbe links: rgba(244,88,63,0,83)
Spalte 1 Hintergrundfarbe rechts: rgba(255,255,255,0)
Spaltenverlaufsrichtung: 45deg
Säulenstartposition: 66%
Spaltenendposition: 0%

Der orangefarbene Farbverlauf, den wir der Spalte hinzugefügt haben, wird für das erste Parallelogramm in unserem Kopfzeilendesign verwendet. Um das Parallelogramm zu erstellen, müssen wir den orangefarbenen Farbverlauf mit einer linken Seite kürzen, die um 45 Grad abgewinkelt ist, um der rechten Seite zu entsprechen. Dazu fügen wir dem Call-to-Action-Modul einen Farbverlauf hinzu.

Anpassen der Textgröße und des Abstands des Call-to-Action-Moduls

Bevor wir unseren Hintergrundverlauf zum Call-to-Action-Modul hinzufügen, lassen Sie uns zuerst die Abstände und die Textstile eingeben.

Gehen Sie zu den Einstellungen des Call-to-Action-Moduls und aktualisieren Sie Folgendes auf der Registerkarte Design:

Textausrichtung: Links
Textfarbe: Hell
Titeltextgröße: 4.5vw (Desktop), 42px (Tablet)
Schaltflächentextfarbe: #1a1a1a
Hintergrundfarbe der Schaltfläche: #ffffff
Breite: 100%
Ränder zurücksetzen
Benutzerdefinierte Polsterung (Desktop): 10 vw oben, 5% links, 45% rechts
Benutzerdefinierte Polsterung (Tablet): 38% richtig
Benutzerdefinierte Polsterung (Smartphone): 5% richtig

Jetzt können wir unseren Hintergrundverlauf zu unserem Modul hinzufügen. Um diesen Vorgang zu beschleunigen, gehen Sie zu den Zeileneinstellungen und klicken Sie mit der rechten Maustaste und kopieren Sie den Hintergrundverlauf der Zeile.

Gehen Sie dann zu den Call-to-Action-Moduleinstellungen auf der Registerkarte Inhalt, klicken Sie mit der rechten Maustaste und fügen Sie den Hintergrundverlauf in das Modul ein. Stellen Sie dann die Startposition auf 47% ein.

Wie Sie sehen können, erzeugt dies den Effekt eines langen abgewinkelten Rechtecks, das den dunklen Hintergrund mit Farbverlauf überlappt, für ein einzigartiges Designelement.

Dies wäre ein großartiges Design, wie es jetzt aussieht, aber lassen Sie uns noch kreativer werden, indem wir ein zusätzliches Parallelogramm hinzufügen, das den unteren Rand unserer Reihe überlappt.

Erstellen eines zusätzlichen Parallelogramms mit leeren Textbausteinen

Das Konzept für diese letzte Phase des Header-Designs besteht darin, zwei Textmodule nebeneinander mit jeweils einem benutzerdefinierten Farbverlauf zu erstellen, die in Kombination eine einzige „Box“ mit gleich abgewinkelten Seiten rechts und links zeigen. Dazu müssen wir zunächst eine einspaltige Zeile für unsere Textbausteine ​​erstellen. Dann können wir unsere Module so dimensionieren und positionieren, dass sie nebeneinander stehen.

Fügen Sie eine einspaltige Zeile direkt unter dem Abschnitt hinzu, der unser Call-to-Action-Modul im selben Abschnitt enthält.

Fügen Sie dann in der linken Spalte einen Textbaustein hinzu und aktualisieren Sie den Textbaustein wie folgt:

Löschen Sie alle Inhalte im Inhaltsfeld (wir werden ein leeres Textmodul verwenden)
Hintergrundfarbe links: rgba(255,255,255,0)
Hintergrundfarbe rechts: rgba(58,80,107,0,83)
Steigungsrichtung: 45deg
Startposition: 50%
Endposition: 0%

Springen Sie nun über die Registerkarte Design und aktualisieren Sie Folgendes:

Textzeilenhöhe: 0em (dadurch werden unerwünschte Abstände entfernt)
Breite: 50%
Benutzerdefinierter Rand: -8vw oben, 0px unten
Benutzerdefinierte Polsterung: 8vw oben, 8vw unten

Einstellungen speichern.

Duplizieren Sie im Visual Builder das Modul und aktualisieren Sie die Textmoduleinstellungen für das neue Modul wie folgt:

Bewegen Sie den Mauszeiger über die Hintergrundverlaufsvorschau und klicken Sie auf das Symbol "Verlauf wechseln", um die Verlaufsfarben von links nach rechts zu wechseln.

Modulausrichtung: Rechts
Benutzerdefinierter Rand: -16vw oben, 0px unten

Einstellungen speichern.

Nachdem wir unsere Module ausgerichtet haben, können wir die Zeileneinstellungen anpassen, um unsere Module zu positionieren und ihre Größe an das Design anzupassen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Reihenausrichtung: Links
Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 45%
Benutzerdefinierter Rand: 30% übrig
Benutzerdefiniertes Padding: 0px oben, 0px unten

Das macht es ungefähr! Sehen Sie sich die Endergebnisse an.

Hier auf Tablet und Smartphone.

Abschließende Gedanken

Ich hoffe, diese Designtechnik gibt Ihnen ein wenig Inspiration dafür, wie Sie die Verlaufshintergrundoptionen von Divi verwenden können, um einige elegante Parallelogramme in Ihr eigenes Header-Design zu integrieren. Und natürlich ist dieses Design nicht auf Header beschränkt. Fühlen Sie sich frei, neue Bereiche zu erkunden, in denen dieses Design für Sie funktioniert. Weitere Inspiration finden Sie in einigen gebrochenen Grid-Design-Geheimnissen, die Ihnen auf Ihrem Weg helfen können.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!