So entwerfen Sie einen Fluid Hero-Bereich in Divi

Der Heldenbereich einer Website ist einer der besten Kandidaten für flüssiges Design. Im Gegensatz zum traditionellen responsiven Design, das sich an verschiedenen Haltepunkten anpasst, skaliert das flüssige Design nahtlos mit dem Browser-Viewport und hält das Design auf jedem Gerät konsistent. Schließlich ist der Hero-Bereich das Erste, was Benutzer auf einer Website sehen.

In früheren Tutorials zu Fluidtypografie, Fluidmodulen und/oder Fluidschaltflächen haben Sie vielleicht schon Fluid Design demonstriert gesehen. In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi einen kompletten flüssigen Heldenbereich erstellen. Der Schlüssel zum Erstellen dieses flüssigen Designs besteht darin, jedem der verwendeten Module eine flüssige Root-Schriftgröße hinzuzufügen und dann die em-Längeneinheit (die relativ zur Root-Body-Schriftgröße ist) in die Einstellungen des Moduls einzubeziehen.

Lass uns anfangen!

Vorgeschmack

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

Beachten Sie, wie sich das flüssige Design nahtlos mit der Breite des Browser-Ansichtsfensters skaliert.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. 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 einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

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

So entwerfen Sie einen Fluid Hero-Bereich in Divi

Um den Abschnitt „Fluid Hero“ zu erstellen, fügen wir jedem der drei Module eine flüssige Root-Schriftgröße hinzu. Diese Module bilden die Überschrift, den Untertitel und die Schaltfläche. Dann verwenden wir die Längeneinheit em in den Designeinstellungen des Moduls, um sicherzustellen, dass die Designelemente relativ zur Schriftgröße des flüssigen Stamms sind. Dann positionieren wir das Bild auf der linken Seite der Seite mit einer absoluten Position und einem Versatz. Das Ergebnis ist ein flüssiger Heldenbereich, der perfekt mit der Breite des Ansichtsfensters skaliert, sodass das Design auf allen Geräten konsistent ist.

Abschnittseinstellungen

Lassen Sie uns zunächst die vorhandenen Entwurfseinstellungen für den Abschnitt aktualisieren. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe links: #ff2000
• Hintergrund mit Farbverlauf rechts: #121212
• Steigungsrichtung: 45deg
• Startposition: 30%
• Endposition: 0%

Aktualisieren Sie auf der Registerkarte "Design" die Auffüllung:

• Padding: 0px oben, 0px unten

Zeile erstellen

Fügen Sie als Nächstes dem Abschnitt eine einspaltige Zeile hinzu.

Zeileneinstellungen

Öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie Folgendes unter der Registerkarte Design:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 1700px
• Mindesthöhe: 100 Vh (Desktop), keine (Tablet und Telefon)
• Padding: 0px oben, 0px unten

Fließenden Überschriftentext mit Rahmen erstellen

Nachdem der Abschnitt und die Zeile fertig sind, können wir den flüssigen Überschriftentext zum Heldenabschnitt hinzufügen. Für ein kreatives Gestaltungselement werden wir dem Textmodul auch einen fließenden Rahmen hinzufügen.

Textmodul hinzufügen

Um den Überschriftentext und den Rahmen zu erstellen, fügen Sie der Spalte ein neues Textmodul hinzu.

Texteinstellungen

Aktualisieren Sie auf der Registerkarte Inhalt den Textkörperinhalt mit dem folgenden HTML-Code:

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

Um die Designelemente flüssig zu gestalten, müssen wir dem Modul zunächst mit der CSS-Funktion Clamp() eine flüssige Root-Schriftgröße hinzufügen. Unter dem Tab "Erweitert" hinter dem folgenden CSS-Snippet:

font-size: clamp(32px, 4.1vw, 70px);

Mit der flüssigen Root-Schriftgröße sind wir bereit, die Designeinstellungen zu aktualisieren. Es ist wichtig, die Einheit der Geb-Länge durchgängig zu verwenden, da die Geb-Längeneinheit relativ zur Stammschriftgröße des Elements ist.

Aktualisieren Sie auf der Registerkarte "Design" die folgenden Designeinstellungen für den Überschriftentext:

• Überschriftstyp: H1
• Überschrift Schriftart: Montserrat
• Schriftstärke der Überschrift: Schwer
• Textfarbe der Überschrift: #ffffff
• Überschrift Textgröße: 1em
• Überschriftsbuchstabenabstand: 0.1em
• Höhe der Überschriftslinie: 1.2em

Aktualisieren Sie außerdem die Modulauffüllung wie folgt:

• Polsterung: 1em (oben, unten, links, rechts)

Um das Design mit fließenden Rändern zu erstellen, aktualisieren Sie Folgendes:

• Randbreite: 1em
• Rahmenfarbe: #ffffff
• Farbe des unteren Rands: transparent
• Farbe des linken Rands: transparent

Erstellen der Akzentgrenze

Um den Akzentrahmen zu erstellen, können wir das vorhandene Textmodul duplizieren.

Entfernen Sie den vorhandenen Körperinhalt und aktualisieren Sie die Designeinstellungen wie folgt:

• Maximale Breite: 6.5em
• Höhe: 3,25 em
• Randbreite: 0.5em
• Rahmenfarbe: #ff2000

Denken Sie daran, dass in diesem doppelten Modul dieselbe flüssige Root-Schriftgröße enthalten ist. So können wir die em-Längeneinheit verwenden, um die Größe und Breite der Umrandung anzupassen. Dadurch wird sichergestellt, dass sich das Design zusammen mit dem Design des Überschrift-Textmoduls anpasst.

Um den Akzentrahmen zu positionieren, fügen Sie eine absolute Position mit einem Versatz hinzu, der der Breite des Rahmens im Überschriftentextmodul (1em) entspricht. Aktualisieren Sie auf der Registerkarte "Erweitert" die folgenden Positionsoptionen:

• Position: Absolut
• Ort: oben rechts
• Vertikaler Versatz: 1em
• Horizontaler Versatz: 1em

Erstellen Sie den Fließtext für den Untertitel

Unterhalb des Überschriftentextes werden wir den fließenden Untertiteltext hinzufügen. Da dieser Text kleiner ist, werden wir eine kleinere flüssige Root-Schriftgröße hinzufügen.

Neues Textmodul hinzufügen

Um den Untertiteltext zu erstellen, fügen Sie ein neues Textmodul unterhalb des bestehenden Überschriften-Textmoduls hinzu.

Sie können ein paar Sätze Fülltext wie folgt hinzufügen:

• Körperinhalt: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fließende Root-Schriftgröße hinzufügen

Als nächstes müssen wir eine neue flüssige Schriftgröße hinzufügen, die für kleineren Text besser geeignet ist. Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS-Snippet unter dem Hauptelement ein:

font-size: clamp(14px, 1.4vw, 24px);

Einstellungen für Textdesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Schriftstärke des Textes: Halbfett
• Text Textfarbe: #ffffff
• Text Textgröße: 1em
• Textzeilenhöhe: 1,6em

Aktualisieren Sie dann die Größe und den Abstand wie folgt:

• Maximale Breite: 19em
• Rand: 2em unten, automatisch links, 5em rechts

Erstellen Sie den Fluid-Button

Um die flüssige Schaltfläche zu erstellen, fügen Sie unterhalb des Untertitel-Textmoduls ein neues Schaltflächenmodul hinzu.

Aktualisieren Sie dann den Text der Schaltfläche auf „7 Tage kostenlose Testversion“.

Fließende Root-Schriftgröße hinzufügen

Als nächstes müssen wir eine neue flüssige Schriftgröße hinzufügen, die für eine Schaltfläche geeignet ist. Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS-Snippet unter dem Hauptelement ein:

font-size: clamp(20px, 2.35vw, 40px);

Einstellungen für das Schaltflächendesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Tastenausrichtung: Rechts

• Schaltflächentextfarbe: #ff2000
• Schaltfläche Hintergrund Farbverlauf links: transparent
• Schaltfläche Hintergrund Farbverlauf rechts: #ffffff
• Steigungsrichtung: 45deg
• Startposition: 25%
• Endposition: 0%
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Montserrat
• Tastenschriftgewicht: Schwer
• Schaltflächenschriftart: Kursiv
• Schaltflächensymbol: rechter Dreieckspfeil (siehe Screenshot)
• Platzierung der Schaltflächensymbole: Links

• Rand: 8em rechts
• Polsterung: 0.2em oben, 0.2em unten, 1.5em links, 1em rechts

Bild für Heldenabschnitt erstellen

Mit dem gesamten Inhalt des Heldenbereichs in der richtigen Größe der Seite sind wir bereit, das Bild des Heldenbereichs auf der linken Seite hinzuzufügen. Fügen Sie dazu zunächst ein Bildmodul unter der Schaltfläche hinzu.

Öffnen Sie die Bildeinstellungen und laden Sie ein Bild hoch.

Bilddesign-Einstellungen

Aktualisieren Sie auf der Registerkarte Design die folgenden Einstellungen:

• Bildausrichtung: Links (Desktop und Tablet), Mitte (Telefon)
• Max. Breite: 48 % (Desktop und Tablet), 70 % (Telefon)
• Polsterung: 4% übrig

Geben Sie dem Bild schließlich eine absolute Position mit einem Offset mit der Längeneinheit vmin wie folgt:

• Position: Absolut (Desktop und Tablet), Relativ (Telefon)
• Ort: Oben links (Desktop und Tablet)
• Vertikaler Versatz 30 vmin (Desktop und Tablet), 0 Pixel (Telefon)

Endergebnis

Hier ist das Endergebnis auf einer Live-Seite.

So skaliert das flüssige Design reibungslos mit der Breite des Browser-Ansichtsfensters.

Browser-Unterstützung

Die CSS-Clamp()-Funktion (die in diesem Tutorial für die flüssige Schriftgröße verwendet wird) wird von allen gängigen Browsern außer dem IE überraschend gut unterstützt. Es gibt einen seltsamen Safari-Bug, der beim Anpassen des Browserfensters nicht dynamisch skaliert, aber beim Laden der Seite korrekt angezeigt wird. Um dies zu beheben, müssen Sie scheinbar nur jedem der Module eine Mindesthöhe von 0vw zuweisen.

Abschließende Gedanken

Das Hinzufügen eines flüssigen Designs zu einem Hero-Bereich kann eine bequeme Möglichkeit sein, sicherzustellen, dass das Over-the-Fold in allen Browsergrößen schön konsistent aussieht, ohne das Design an bestimmten Haltepunkten aktualisieren oder Medienabfragen verwenden zu müssen.

Vergiss nicht, unsere anderen Artikel zum Thema Fluid Design zu lesen, einschließlich der Erstellung von Fluid-Typografie, Fluid-Modulen und Fluid-Buttons.

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

Danke schön!