So erstellen Sie ein responsives Fluid Divi-Modul

Um den Prozess der Implementierung eines konsistenten Responsive Designs für ein Divi-Modul weiter zu vereinfachen, können wir die Praktiken des flüssigen Webdesigns anwenden. Im Gegensatz zu den traditionelleren Methoden des responsiven Designs bricht das flüssige Webdesign nicht ab oder springt an verschiedenen Haltepunkten abrupt zu einer anderen Größe/einem anderen Stil. Es enthält responsive Längeneinheiten im Verhältnis zur Breite des Ansichtsfensters, sodass sich das Design fließend anpasst (oder skaliert) und das Design auf allen Geräten konsistent bleibt.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein flüssiges Divi-Modul erstellen. Unter Verwendung ähnlicher Fluid-Design-Praktiken zum Erstellen von Fluid-Typografie und/oder Fluid-Buttons werden wir ein Fluid-Divi-Modul erstellen, das sich nahtlos mit dem Browser-Ansichtsfenster skalieren lässt. Wie wir herausfinden werden, besteht die geheime Kombination darin, dem Modul eine Root-Body-Schriftgröße mit einer relativen (oder flüssigen) Längeneinheit hinzuzufügen und dann die em-Längeneinheit (die relativ zur Root-Body-Schriftgröße ist) in das gesamte Modul einzubauen Einstellungen bei Bedarf.

Lass uns anfangen!

Vorgeschmack

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

Und hier ist ein Codepen, der diese Fluidmodul-Funktionalität demonstriert.

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 erstellen Sie ein responsives Fluid Divi-Modul

Die Reihe

Erstellen Sie zunächst eine neue einspaltige Zeile innerhalb des standardmäßigen regulären Abschnitts.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite: auto
• Maximale Breite: 100%
• Polsterung: 5vw oben, 5vw unten

Entwerfen eines flüssigen Call-to-Action-Moduls

Obwohl die gleichen Fluid-Design-Techniken zu fast jedem Divi-Modul hinzugefügt werden können, gehen wir für dieses Tutorial zu einem der Call-to-Action-Module von Divi.

Fügen Sie ein neues Call-to-Action-Modul innerhalb der Spalte/Zeile hinzu.

Inhaltseinstellungen

Fügen Sie in den Inhaltseinstellungen eine URL für einen falschen Button-Link hinzu und aktualisieren Sie die Hintergrundfarbe wie folgt:

• Schaltflächen-Link-URL: #
• Hintergrundfarbe: #5e6472

Hinzufügen einer flüssigen Root-Schriftgröße zum Modul

Beim Entwerfen eines Fluidmoduls müssen wir dem Modul eine Fluid-Root-Schriftgröße hinzufügen. Sobald sie dem Modul hinzugefügt wurde, wird diese Root-Schriftgröße dynamisch in den Rest unserer Moduldesign-Einstellungen unter Verwendung der Längeneinheit em integriert.

Um dem Modul die flüssige Root-Schriftgröße hinzuzufügen, gehen Sie zur Registerkarte "Erweitert" und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

font-size: clamp(16px, 2vw, 24px);

Für diese Schriftgröße verwenden wir die CSS-Funktion Clamp(), um eine minimale Schriftgröße, eine flüssige Schriftgröße (bei Bedarf) und eine maximale Schriftgröße festzulegen.

Überschreiben von Elementen mit Standardabstand mit em-Längeneinheitenwerten

Obwohl dies nicht unbedingt erforderlich ist, müssen wir alle standardmäßigen (hinter den Kulissen) Abstände, die das Modul derzeit verwendet, mit einem Längeneinheitswert für diese Eigenschaft überschreiben, um ein wirklich flüssiges Design für das Modul zu erhalten. Sie können diese identifizieren, indem Sie Ihr Element mit einem Browser-Entwicklungstool untersuchen. In diesem Fall hat das Call-to-Action-Modul eine untere Auffüllung sowohl in der Promo-Beschreibung als auch im Promo-Titelelement. Da die untere Auffüllungseigenschaft eine Pixel-Längeneinheit (px) verwendet, müssen wir jede mit einer em-Längeneinheit überschreiben, die die Schriftgröße des Stammkörpers enthält, die wir gerade dem Hauptelement hinzugefügt haben.

Aktualisieren des Designs mit em-Längeneinheiten

Jetzt, da unsere flüssige Root-Schriftgröße für das Modul vorhanden ist, müssen wir nur noch das Design des Moduls mit em-Längeneinheiten aktualisieren. Da die Einheit für die Ges-Länge relativ zur Stammschriftgröße ist, erbt jedes Design, das die Einheit für die Ges-Länge verwendet, die Fließfähigkeit der Schriftgröße und skaliert bei Bedarf fließend mit der Schriftgröße.

Hauptteil

Die benutzerdefinierte Stammschriftgröße, die wir zuvor hinzugefügt haben, wurde absichtlich unter Berücksichtigung des Fließtexts erstellt. Daher können wir dem Fließtext einen Wert von 1em zuweisen, der den genauen Wert der Root-Schriftgröße erbt. Wir können auch eine Körperlinienhöhe hinzufügen. Aktualisieren Sie dazu Folgendes:

• Körpertextgröße: 1em
• Körperlinienhöhe: 1.8em

Titeltext

Für das Titeltextelement des Moduls können wir ihm eine größere Größe mit der Längeneinheit em geben. Aktualisieren Sie Folgendes:

• Titeltextgröße: 1.7em
• Höhe der Titelzeile: 1,3 em

Um Ihnen eine Vorstellung davon zu geben, wie groß der Titeltext tatsächlich sein wird, multiplizieren wir einfach den Wert für die em-Länge mit dem Wert der Stammschrift. Denken Sie daran, dass die Stammschriftgröße Clamp() verwendet, um eine minimale (16px), flüssige (2vw) und maximale (24px) Schriftgröße festzulegen. Daher beträgt die Mindesttextgröße für den Titel 1,7 x 16 Pixel, was in der Nähe von 27,2 Pixeln liegt. Die flüssige Schriftgröße beträgt 1,7 mal 2vw (2% der Breite des Darstellungsbereichs). Und die maximale Schriftgröße beträgt 1,7 mal 24px, was fast 69,36px entspricht.

Schaltflächendesign

Das dritte Element des Moduls ist die Schaltfläche. Wir können die Designeinstellungen der Schaltfläche mit Werten für die Längeneinheit aktualisieren, um auch das Fluiddesign zu berücksichtigen.
Aktualisieren Sie die folgenden Schaltflächeneinstellungen:

• Schaltflächentextgröße: 1.3em
• Breite des Tastenrahmens: 0.12em
• Knopfrandradius: 1.5em
• Tasten-Buchstaben-Abstand: 0.1em
• Knopfpolsterung: 0.1em oben, 0.1em unten, 2em links, 2em rechts

Größe und Abstand

Um sicherzustellen, dass das Modul eine Flüssigkeitsgröße und einen Flüssigkeitsabstand hat, müssen wir auch für diese Werte em-Längeneinheiten verwenden.

Aktualisieren Sie die folgenden Größen- und Abstandseinstellungen:

• Maximale Breite: 40em
• Mindesthöhe: 0vw
• Rand: 0.5em oben, 0.5em unten, automatisch links, automatisch rechts
• Polsterung: 2.5em oben, 2.5em unten, 2em links, 2em rechts

Das Ergebnis

Sehen wir uns nun das Ergebnis unseres Fluidmoduls beim Anpassen der Browserbreite auf einer Live-Seite an.

Hinzufügen mehrerer Fluid-Module in einer Reihe mit CSS Grid

Um mehrere benachbarte Fluidmodule zu einer Reihe hinzuzufügen, müssen wir sicherstellen, dass unser Fluidmoduldesign nicht durch die Breite des übergeordneten Containers eingeschränkt oder gestoppt wird. Mit anderen Worten, wir möchten, dass der übergeordnete Container unserer Module (die Spalte) auf auto gesetzt wird, damit er mit der Größe des Moduls skaliert. Wir können dies mit CSS Grid auf Spaltenebene tun, um jedes der Module in einem Raster festzulegen, wobei jede Spalte eine automatische Breite hat.

Modulgröße und -abstand anpassen

Bevor wir das CSS Grid für die Module erstellen, müssen wir die maximale Breite und den Rand für unser Modul auf eine Größe anpassen, die besser für ein zweispaltiges Layout mit zwei Modulen geeignet ist.

Öffnen Sie die Einstellungen für das Modul und aktualisieren Sie Folgendes:

• Textausrichtung: Links
• Maximale Breite: 24em
• Rand: 0.5em links, 0.5em rechts

Modul duplizieren

Duplizieren Sie nun das Modul, um ein weiteres in derselben Spalte zu erstellen.

CSS-Raster zur Spalte hinzufügen

Jetzt können wir das benutzerdefinierte CSS zur Spalte hinzufügen, um das CSS-Raster für die Module zu erstellen.

Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS zum Hauptelement in der Desktop-Ansicht hinzu:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Fügen Sie dann das folgende CSS zum Hauptelement in der Telefonansicht hinzu:

display:grid;
grid-template-columns: auto;
justify-content:center;

Dadurch werden die beiden Module in einem zweispaltigen Raster (jedes mit einer automatischen Breite) auf dem Desktop eingestellt. Auf dem Telefon kehren die Module dann zu einem einspaltigen (automatischen) Raster zurück.

Das Ergebnis

Sehen Sie sich nun das Ergebnis an.

Endgültige Ergebnisse

Sobald die Fluidmodule fertig sind, können Sie die Modulstile mithilfe der integrierten Designeinstellungen aktualisieren, um benutzerdefinierte Schriftarten, Farben usw.

Hier ist ein Blick auf das Endergebnis mit einer anderen Schriftart, Schriftfarbe, Schaltflächenfarbe und Hintergrundfarbe.

Abschließende Gedanken

Wie wir in diesem Tutorial gesehen haben, kann die Integration von flüssigem Design in ein Divi-Modul eine bequeme Möglichkeit sein, sicherzustellen, dass das Modul in allen Browsergrößen schön und konsistent aussieht, ohne dass das Design an bestimmten Breakpoints mühsam aktualisiert werden muss.

Vergiss nicht, unsere anderen Artikel über flüssiges Design zu lesen, einschließlich unseres Leitfadens zum Erstellen von flüssiger Typografie und flüssigen Divi-Buttons.

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

Danke schön!