Eine vollständige Anleitung zum Erstellen von flüssigen Schaltflächendesigns in Divi

Das flüssige Schaltflächendesign ist der Prozess des Entwerfens einer Schaltfläche, die sich fließend an die Größe Ihres Browserfensters (oder Ansichtsfensters) anpasst. Es beinhaltet die Anwendung der Praktiken des flüssigen Webdesigns auf alle Designeigenschaften einer Schaltfläche. Dies macht das Design der Schaltfläche auf allen Geräten vorhersehbar und konsistent. Und es ist eine erfrischende Alternative zu herkömmlichen Responsive-Design-Techniken, bei denen zahlreiche Anpassungen am Design an bestimmten Haltepunkten vorgenommen werden.

In diesem Tutorial zeigen wir Ihnen, wie Sie flüssige Schaltflächendesigns in Divi erstellen. Hier ist, was wir behandeln werden:

• Die Anatomie eines Divi-Buttons
• So erstellen Sie einen flüssigen Button in Divi
• Die Einheit der em-Länge verstehen
• Verwenden einer flüssigen (oder skalierenden) Schriftgröße für die Schaltfläche
• Die Anatomie eines Fluid Divi Buttons
• Erstellen von fließenden Schaltflächendesigns in Divi (5 Beispieldesigns)
• Flüssige Schaltflächen mit Clamp() für die Schriftgröße

Da das Design von flüssigen Schaltflächen auf der Implementierung flüssiger Typografie beruht, kann es hilfreich sein, unseren vollständigen Leitfaden zur flüssigen Typografie in Divi zu lesen.

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 dieses Konzept des flüssigen Knopfdesigns 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.

Die Anatomie eines Divi-Buttons

Standardmäßig verfügt eine Divi-Schaltfläche über integrierte Stile, die sowohl px- als auch em-Längeneinheiten enthalten (siehe Abbildung oben). Zu den Eigenschaften, die die Längeneinheit px verwenden, gehören:

• Schriftgröße: 20px
• Abgerundete Ecken: 3px
• Rahmenbreite: 3px
• Symbolschriftgröße: vererbt von der Schriftgröße (20px)

Diese px-Werte sind absolut und bleiben gleich, wenn Sie die Schriftgröße oder die Größe des Browser-Ansichtsfensters ändern.

Zu den Eigenschaften, die die Einheit der em-Länge verwenden, gehören:

• Polsterung: 0.3em oben, 0.3em unten, 0.7em links, 2em rechts
• Linienhöhe: 1.7em
• Symbol Linker Rand: 0.3em

Diese em-Werte sind relativ zur Schriftgröße des Elements (oder der Schaltfläche) und ändern sich (skalieren), wenn sich die Schriftgröße ändert.

So erstellen Sie einen flüssigen Button in Divi

Die Einheit der em-Länge verstehen

Der Schlüssel zum Erstellen einer Fluid-Schaltfläche in Divi besteht darin, zu verstehen, wie die Längeneinheiten von EM funktionieren. Die Einheit der em-Länge ist relativ zur Schriftgröße des Elements (was auch immer es sein mag). Im Wesentlichen ist der Wert von em ein Vielfaches der Schriftgröße des Elements. Wenn die Schriftgröße des Elements beispielsweise 20px beträgt, ist 2em dasselbe wie 2(20px). Dies bedeutet, dass sich die Einheit der EM-Länge ändert, wenn sich die Schriftgröße des Elements ändert. Die Längeneinheit px ändert sich jedoch nicht.

Um mit unserem Standardbeispiel fortzufahren, ist die standardmäßige rechte Auffüllung für die Schaltfläche 2em (oder 2 Vielfache von em). Da die Schriftgröße der Schaltfläche 20px beträgt, beträgt der rechte Abstand 2 mal 20px (was 40px entspricht). Die obere und untere Polsterung beträgt 0.3em. Das obere und untere Padding beträgt also 6px (0,3 mal 20px entspricht 6px).

Sehen Sie sich die Abbildung unten an, um den tatsächlichen Wert der EM-Längeneinheiten basierend auf der Schriftgröße zu verstehen.

Verwenden einer flüssigen (oder skalierenden) Schriftgröße für die Schaltfläche

Bei der Gestaltung eines Fluid-Buttons mit Längeneinheiten hängt alles von der Größe der Button-Schriftgröße ab. Anders ausgedrückt, die Schriftgröße wird auf den Wert aller Eigenschaften angewendet, wobei die Längeneinheit em für die Schaltfläche verwendet wird. Wenn Sie also möchten, dass die Schaltflächenstile fließend werden, müssen Sie der Schaltfläche eine flüssige (oder skalierende) Schriftgröße zuweisen. Die am häufigsten verwendete Flüssigkeitslängeneinheit ist die vw-Längeneinheit, die sich auf die Breite des Browser-Ansichtsfensters bezieht. Mit anderen Worten, die vw-Längeneinheit ändert sich, wenn sich die Browserbreite ändert.

Um eine flüssige Schaltfläche zu erstellen, ersetzen Sie die Schriftgröße von 20px durch etwas wie 2,4vw. Da sich dieser Wert mit der Browserbreite ändert, werden alle Schaltflächeneigenschaften mit der Längeneinheit em ebenfalls mit der Browserbreite skaliert.

Die Anatomie eines Fluid Divi Buttons

Einfach ausgedrückt umfasst der Aufbau eines flüssigen Divi-Buttons zwei Hauptprinzipien:

1. Verwenden Sie eine Flüssigkeitslängeneinheit (vw) für die Schriftgröße
2. Verwenden Sie für alle Eigenschaften des Schaltflächenstils EM-Längeneinheitenwerte

Das bedeutet, dass Sie em-Längeneinheiten für Randbreite, Randradius und sogar Rahmenschatten verwenden können.

Hier ist eine Illustration einer flüssigen Schaltfläche, die eine flüssige Schriftgröße (2.4vw) und Längeneinheiten für alle Stileigenschaften enthält.

Die tatsächlichen Werte jeder Eigenschaft, die em-Längeneinheiten verwenden, erben den Wert für die flüssige Schriftgröße und die Skalierung relativ zur Breite des Browser-Darstellungsfensters (vw).

Erstellen von fließenden Schaltflächendesigns in Divi

Jetzt haben wir ein besseres Verständnis dafür, wie man eine flüssige Schaltfläche erstellt. Lassen Sie uns in Divi ein paar flüssige Schaltflächendesigns erstellen.

#1 Einfaches Beispiel

Lassen Sie uns zunächst das grundlegende Beispiel erstellen, das wir zuvor veranschaulicht haben.

Erstellen Sie im Divi Builder eine neue einspaltige Zeile.

Aktualisieren Sie auf der Registerkarte "Design" die Textgröße der Schaltfläche mit einem Wert für die vw-Längeneinheit, damit sie mit der Breite des Ansichtsfensters skaliert wird:

• Schaltflächentextgröße: 2,4 vw (Desktop und Tablet), 18,4 Pixel (Telefon)

Aktualisieren Sie dann die folgenden Eigenschaften mit einem Einheitswert für die Gem-Länge, der relativ zur Textgröße der Schaltfläche ist:

• Breite des Tastenrahmens: 0,15 em
• Knopfrandradius: 1,3em
• Tasten-Buchstaben-Abstand: 0.05em
• Polsterung: 0.3em oben, 0.3em unten, 1em links, 2em rechts
• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0.15em

Hier ist das Endergebnis.

#2 Fluid Button mit abgerundeten Ecken und Box Shadow

Um zu beginnen, erstellen Sie eine neue Schaltfläche und aktualisieren Sie den Schaltflächentext auf "Erste Schritte".

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 2,4 vw (Desktop und Tablet), 18,4 Pixel (Telefon)
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #ffffff (Desktop), #d9f9e9 (Hover)
• Breite des Tastenrahmens: 0,15 em
• Farbe des Knopfrahmens: #d9f9e9
• Knopfrandradius: 1,3em

• Tasten-Buchstaben-Abstand: 0.05em
• Schaltflächenschrift: Jura
• Tastenschriftstärke: Halbfett
• Schaltflächensymbol: Pfeil nach rechts
• Farbe des Schaltflächensymbols: #000000
• Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN

• Polsterung: 0.2em oben, 0.2em unten, 1em links, 2em rechts
• Box Shadow: siehe Screenshot
• Vertikale Position des Kastenschattens: 0.3em
• Stärke der Box-Schattenunschärfe: 0.5em
• Stärke der Box-Schattenausbreitung: -0,3 em

Hier ist das Ergebnis.

#3 Fluid Button mit einzigartigem Box-Schatten und Icon-Platzierung

Für dieses nächste flüssige Schaltflächendesign werden wir eine einzigartige Box-Schatten- und Symbolplatzierung verwenden.

Um zu beginnen, duplizieren Sie das vorherige Beispiel #2. Öffnen Sie dann die Einstellungen für die Duplizieren-Schaltfläche, um das Design zu aktualisieren.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Schaltflächenrandradius: 0px
• Farbe des Schaltflächensymbols: #ffffff
• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: -1,75em
• Vertikale Position des Boxschattens: 0px
• Schattenfarbe: #000000

Fügen Sie auf der Registerkarte Erweitert das folgende benutzerdefinierte CSS zum After-Element hinzu:

margin-right: .3em;
right: 0;

Hier ist das Ergebnis.

#4 Fluid Button mit dreifarbigem Hintergrundverlauf

Für dieses nächste flüssige Schaltflächendesign erstellen wir einen einzigartigen dreifarbigen Hintergrundverlauf für die Schaltfläche, indem wir den Hintergrundverlauf mit einem einzigartigen Box-Schatten-Stil kombinieren.

Um die Schaltfläche zu erstellen, duplizieren Sie die zuvor entworfene Schaltfläche des Beispiels Nr. 3.

Öffnen Sie dann die Schaltflächeneinstellungen, um die Stile zu aktualisieren.

Löschen Sie auf der Registerkarte Erweitert das benutzerdefinierte CSS im After-Element.

Aktualisieren Sie auf der Registerkarte Entwurf Folgendes:

• Schaltflächentextfarbe: #ffffff
• Schaltfläche Hintergrund Farbverlauf links: #f475ee
• Schaltflächenhintergrund mit Farbverlauf rechts: #9694fc
• Verlaufsrichtung: 90deg
• Endposition: 2.5em
• Breite des Tastenrahmens: 0px
• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: -2.5em
• Vertikale Position des Boxschattens: 0px
• Box-Schattenunschärfe-Stärke: 1.5em
• Stärke der Box-Schattenausbreitung: -1em
• Schattenfarbe: #85c6f2

Und hier ist das Ergebnis.

#5 Fluid-Button mit benutzerdefinierter Fluid-Breite

Für dieses nächste Design für flüssige Schaltflächen werden wir unserer Schaltfläche eine benutzerdefinierte Flüssigkeitsbreite hinzufügen. Dadurch können wir größere Schaltflächen erstellen, die sich fließend mit der Browserbreite skalieren.

Um die Schaltfläche zu erstellen, duplizieren Sie die zuvor entworfene Beispiel-Schaltfläche #2.

Aktualisieren Sie auf der Registerkarte Design die Schaltflächenausrichtung auf zentriert.

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

Desktop

display:block;
width: 100%;
max-width: 15em;

Hier ist das Ergebnis.

Endgültige Ergebnisse

Sehen Sie sich nun die Endergebnisse unserer 4 flüssigen Knopfdesigns an.

Flüssige Schaltflächen mit Clamp() für die Schriftgröße

Wenn Sie mehr Kontrolle über die minimale und maximale Größe Ihres Fluid-Buttons haben möchten, können Sie die CSS Clamp()-Funktion verwenden, um eine minimale Schriftgröße, eine Scaler-Schriftgröße und eine maximale Schriftgröße festzulegen.

Dazu müssen Sie die Schaltflächentextgröße für jede Ihrer Schaltflächen zurücksetzen, damit sie auf die Standardeinstellung zurückgesetzt wird.

Fügen Sie dann auf der Registerkarte "Erweitert" das folgende CSS zum Hauptelement jeder der Schaltflächen hinzu.

Dadurch wird sichergestellt, dass die Schriftgröße eine Mindestgröße von 20 px, eine Scaler- (oder Fluid-) Größe von 4 vw und eine maximale Größe von 40 px hat.

Der Hauptvorteil der Verwendung von Clamp() besteht darin, dass Sie verhindern können, dass die Schaltfläche zu groß oder zu klein skaliert wird, während das flüssige responsive Design beibehalten wird.

Endgültige Ergebnisse mit Clamp()

Endgültige Ergebnisse wieder

Und hier ist ein letzter Blick auf jede Sammlung von Fluid-Buttons mit und ohne Clamp() als Schriftgröße.

Verwenden der Schriftgröße der VW-Länge (Desktop und Tablet) und der Längeneinheit px (Telefon)

Verwenden von Clamp() zum Festlegen einer minimalen, einer Skalierung und einer maximalen Schriftgröße

Abschließende Gedanken

Das Erstellen von flüssigen Schaltflächen in Divi beruht auf zwei Hauptprinzipien: (1) Verwenden Sie eine flüssige Längeneinheit (wie vw) für die Schriftgröße der Schaltfläche und (2) verwenden Sie em-Längeneinheitswerte für alle Stileigenschaften der Schaltfläche. Sobald Sie das verstanden haben, ist es wichtig, die richtige flüssige Schriftgröße zu finden (mit vw, Clamp() usw.) und anzupassen und dann verschiedene Werte von em für den Rest des Schaltflächendesigns zu verwenden. Dadurch wird sichergestellt, dass die Schaltfläche beim Anpassen der Ansichtsfensterbreite Ihres Browsers perfekt skaliert wird.

Merken Sie sich. Flüssige Schaltflächen funktionieren nicht wirklich, wenn ihre übergeordneten Container nicht ebenfalls flüssig sind. Wenn Sie beispielsweise eine flüssige Schaltfläche in einer Zeile mit 400 Pixeln haben, hat die Schaltfläche keinen Platz zum Skalieren und das Design geht kaputt. Der Reihe eine Breite von 80 % oder 90 vw zu geben, wäre besser für flüssige Tastendesigns geeignet.

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

Danke schön!