Möchten Sie einen Heldenbereich in erstellen Divi Was ist flüssig statt traditionell reaktionsschnell?
Der Heldenabschnitt von a Website ist einer der besten Kandidaten für Fluid Design. Im Gegensatz zu herkömmlichem Responsive Design, das sich an verschiedene Haltepunkte anpasst, passt sich Fluid Design nahtlos an den Darstellungsbereich des Browsers an und hält das Design auf allen Geräten konsistent. Schließlich ist der Hero-Bereich das erste, was Benutzer auf a sehen Website.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen ganzen flüssigen Heldenabschnitt in erstellen Divi. Der Schlüssel zum Erstellen dieses fließenden Designs besteht darin, jedem der verwendeten Module eine fließende Grundschriftgröße hinzuzufügen und dann die Längeneinheit zu integrieren em (Wer ist relativ zur Schriftgröße des Stammtexts ) in den Moduleinstellungen.
Fangen wir an!
Übersicht
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Beachten Sie, wie sich das flüssige Design nahtlos an die Breite des Browserfensters anpasst.
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 die Divi Baumeister
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, auf der Sie mit dem Entwerfen beginnen können Divi.
Lesen Sie auch: Divi: So erstellen Sie einen Hero-Bereich mit dem Fullwidth Header-Modul
So entwerfen Sie einen Fluid Hero-Abschnitt in Divi
Abschnittseinstellungen
Lassen Sie uns zunächst die vorhandenen Designeinstellungen für den Abschnitt aktualisieren. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:
- Gradientenstopps:
- 30 %: #ff2000
- 30 %: #121212
- Steigungsrichtung: 45 Grad
Unter der Registerkarte Design, aktualisieren Sie die Polsterung:
- Polsterung: 0 Pixel oben, 0 Pixel unten
Erstellen Sie eine Linie
Als Nächstes fügen Sie dem Abschnitt eine einspaltige Zeile hinzu.
Leitungseinstellungen
Öffnen Sie die Leitungseinstellungen und aktualisieren Sie Folgendes unter der Registerkarte Design :
- Rinnenbreite: 1
- Breite: 100 %
- Maximale Breite: 1 Pixel
- Mindesthöhe: 100 vh (Desktop), keine (Tablet und Telefon)
- Polsterung: 0px (oben und unten)
Erstellen Sie fließenden Kopfzeilentext mit Rahmen
Nachdem der Abschnitt und die Zeile nun vollständig sind, können wir den fließenden Kopfzeilentext zum Hero-Abschnitt hinzufügen. Wir werden dem Textmodul auch einen fließenden Rand für ein kreatives Designelement hinzufügen.
Fügen Sie ein Textmodul hinzu
Um den Titeltext und den Rahmen zu erstellen, fügen Sie der Spalte ein neues Textmodul hinzu.
Texteinstellungen
Unter der Registerkarte Inhalt, Aktualisiere es Inhalt des Körpers mit folgendem HTML-Code:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Um die Designelemente fließend zu machen, müssen wir dem Modul zunächst mithilfe der CSS-Clamp()-Funktion eine fließende Stammschriftgröße hinzufügen.
Unter der Registerkarte Fortgeschrittener, fügen Sie das folgende CSS-Snippet ein:
font-size: clamp(32px, 4.1vw, 70px);
Unter der Registerkarte Design, aktualisieren Sie die folgenden Designeinstellungen für den Kopfzeilentext:
- Überschriftentext:
- Typ: H1
- Schrift: Montserrat
- Schriftgewicht: Schwer
- Farbe: #ffffff
- Größe: 1em
- Buchstabenabstand: 0,1 em
- Zeilenhöhe: 1,2 cm
Aktualisieren Sie auch das Mod-Padding wie folgt:
- Polsterung: 1. (Oben, Unten, Links und Rechts)
Aktualisieren Sie Folgendes, um das fließende Rahmendesign zu erstellen:
- Randbreite: 1em
- Rahmenfarbe: #ffffff
- Untere Rahmenfarbe: klar
- Linke Randfarbe: klar
Erstellen der Akzentgrenze
Um den Akzentrahmen zu erstellen, können wir das vorhandene Textmodul duplizieren.
Lösche es Inhalt des vorhandenen Körpers und aktualisieren Sie die Designparameter wie folgt:
- Maximale Breite: 6,5 cm
- Höhe: 3,25 cm
- Rahmenbreite: 0,5 cm
- Rahmenfarbe: #ff2000
Um den Akzentrahmen zu positionieren, fügen Sie eine absolute Position mit einem Versatz hinzu, der der Breite des Rahmens im Modul Überschriftentext (1em) entspricht.
Unter der Registerkarte Fortgeschrittener, aktualisieren Sie die folgenden Positionsoptionen:
- Position: Absolut
- Ort: oben rechts
- Vertikaler Versatz: 1em
- Horizontaler Versatz: 1em
Untertiteltext erstellen
Unter dem Titeltext fügen wir den fließenden Untertiteltext hinzu. Da dieser Text kleiner ist, fügen wir eine kleinere Fluid-Root-Schriftgröße hinzu.
Fügen Sie ein neues Textmodul hinzu
Um den Beschriftungstext zu erstellen, fügen Sie ein neues Textmodul unterhalb des vorhandenen Kopfzeilentextmoduls hinzu.
Sie können einige Fülltextsätze wie folgt hinzufügen:
- Inhalt: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fließende Stammschriftgröße hinzufügen
Als nächstes müssen wir eine neue flüssige Schriftgröße hinzufügen, die besser für kleinen Text 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 das Textdesign
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Text:
- Schriftstärke: Semi Bold
- Farbe: #ffffff
- Größe: 1em
- Höhe: 1,6 cm
Aktualisieren Sie dann die Größe und den Abstand wie folgt:
- Maximale Breite: 19 cm
- Rand: 2 em (unten), auto (links), 5 em (rechts)
Erstellen Sie die Fluid-Schaltfläche
Um die Fluid-Schaltfläche zu erstellen, fügen Sie unterhalb des Untertiteltextmoduls ein neues Schaltflächenmodul hinzu.
Aktualisieren Sie als Nächstes den Schaltflächentext so, dass er „7 Day Free Trial“ lautet.
Fließende Stammschriftgröß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.
Unter der Registerkarte Fortgeschrittener, fügen Sie das folgende CSS-Snippet unter dem Hauptelement ein:
font-size: clamp(20px, 2.35vw, 40px);
Schaltflächendesign-Einstellungen
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Tastenausrichtung: Rechts
- Benutzerdefinierte Größe für Schaltfläche verwenden: JA
- Schaltflächentextfarbe: #ff2000
- Gradientenstopps:
- Farbe 1 25 %: klar
- Farbe 2 25 %: #ffffff
- Verlaufsrichtung: 45 Grad
- Taste :
- Randbreite: 0 Pixel
- Randradius: 0 Pixel
- Schrift: Montserrat
- Schriftstärke: dick
- Stil: kursiv
- Schaltflächensymbol anzeigen: JA
- Symbol: dreieckiger Pfeil nach rechts (siehe Screenshot)
- Icon-Platzierung: Rechts
- Rand: 8em (rechts)
- Polsterung: 0,2 m (oben und unten), 1,5 m (links), 1 m (rechts)
Erstellen Sie ein Bild für den Abschnitt „Hero“.
Mit all dem Inhalt Um den Heldenbereich auf die richtige Seitengröße zu bringen, können wir nun das Bild des Heldenbereichs auf der linken Seite hinzufügen. Fügen Sie dazu zunächst ein Bildmodul unterhalb der Schaltfläche hinzu.
Öffnen Sie die Bildeinstellungen und laden Sie ein Bild hoch.
Bilddesign-Einstellungen
Unter der Registerkarte Design, aktualisieren Sie die folgenden Einstellungen:
- Bildausrichtung: links (Desktop und Tablet), Mitte (Telefon)
- Maximale Breite: 48 % (Desktop und Tablet), 70 % (Telefon)
- Polsterung: 4 % (links)
Geben Sie dem Bild schließlich eine absolute Position mit einem Offset unter Verwendung der vmin-Längeneinheit 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.
Siehe auch: Divi: So verwenden Sie Masken und Hintergrundmuster für einen Heldenabschnitt
So passt sich das flüssige Design nahtlos an die Breite des Browserfensters an.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Das Hinzufügen eines fließenden Designs zu einem Hero-Bereich kann eine praktische Möglichkeit sein, um sicherzustellen, dass die obere Kante der Falte über alle Browsergrößen hinweg schön konsistent ist, ohne das Design an bestimmten Stellen aktualisieren oder Medienabfragen verwenden zu müssen.
Hoffentlich wird diese Technik eine weitere nützliche Designfähigkeit für zukünftige Projekte hinzufügen.
Wir hoffen auch, 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.
...
