So fügen Sie schwebende Beschriftungen zu Formularfeldern in Divi . hinzu

Das Hinzufügen von schwebenden Beschriftungen zu Formularfeldern in Divi kann das Design und die Benutzerfreundlichkeit jedes Divi-Formulars auf subtile, aber leistungsstarke Weise verbessern. Jedes Website-Formular (nicht nur Divi) enthält normalerweise eine Art Eingabefeld und eine Beschriftung für dieses Eingabefeld. Ein Formular kann beispielsweise ein Texteingabefeld für einen Namen haben, in das Sie den Text (oder den Namen) und eine Beschriftung für das Eingabefeld dieses Felds (zB „Name“) eingeben können. Diese Beschriftung kann je nach Formularstil sichtbar oder ausgeblendet sein. Eingabefelder können neben einem Label auch ein Platzhalter-Pseudoelement enthalten, das als eine Art temporäres Label innerhalb des Eingabefeldes dient, das so lange sichtbar bleibt, bis der Benutzer einen Eingabewert eingibt. In Divi blendet das Standarddesign das Beschriftungselement aus und zeigt nur den Platzhaltertext an. Das Hinzufügen einer schwebenden Beschriftung zu einem Divi-Formular ermöglicht es Designern, das elegante Gefühl des "Nur Platzhalter"-Formularstils beizubehalten und die Beschriftung über dem Feld anzuzeigen (oder zu schweben), wenn der Benutzer einen Wert hinzufügt.

In diesem Tutorial zeigen wir Ihnen, wie Sie einem Divi-E-Mail-Optionsformular Floating-Labels hinzufügen. Dazu verwenden wir den Divi-Builder, um das E-Mail-Optionsformular zu entwerfen. Dann fügen wir benutzerdefiniertes CSS und JQuery hinzu, um diese versteckten Labels sichtbar zu machen, wenn sich ein Benutzer auf das Feld konzentriert.

Lass uns anfangen!

Vorgeschmack

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

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!

https://youtu.be/j1m14XFztdc

Abonnieren Sie unseren Youtube-Kanal

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.

Hinzufügen von schwebenden Beschriftungen zu Formularfeldern in Divi

Erstellen des E-Mail-Optionsformulars

Fügen Sie dem Standardabschnitt im Divi Builder eine einspaltige Zeile hinzu.

Fügen Sie der Spalte ein E-Mail-Optin-Formular hinzu.

Öffnen Sie das Modal für die E-Mail-Optionseinstellungen. Aktualisieren Sie auf der Registerkarte Inhalt den Titeltext und löschen Sie den Textkörper.

Stellen Sie sicher, dass Sie Ihren E-Mail-Konto-Dienstanbieter verknüpfen. Wenn nicht, wird das E-Mail-Optin nicht auf einer Live-Seite angezeigt.

Fügen Sie als Nächstes die folgende Hintergrundfarbe zum E-Mail-Optin hinzu:

• Hintergrundfarbe: #1f4b74

Aktualisieren Sie auf der Registerkarte "Design" das Layout des Formulars:

• Layout: Körper oben, Form unten

Aktualisieren Sie dann die Feldstile wie folgt:

• Felder Hintergrundfarbe: transparent
• Textfarbe der Felder: #ffffff
• Feldrand: 1.5em oben
• Feldpolsterung: 0.5em oben, 0.5em unten, 1em links, 1em rechts
• Feldtextgröße: 1.2em
• Feldlinienhöhe: 2em

Aktualisieren Sie als Nächstes die Feldrahmenstile:

• Felder mit abgerundeten Ecken: 0px
• Breite des unteren Rands der Felder: 2px
• Farbe des unteren Rands der Felder: #ffffff

Lassen Sie uns auch die Schriftstile für Titel aktualisieren:

• Schriftstärke des Titels: Fett
• Titelschriftart: TT
• Ausrichtung des Titeltextes: Mitte

Und jetzt lassen Sie uns fortfahren und den Button stylen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextfarbe: #1f4b74
• Hintergrundfarbe der Schaltfläche: #ffffff
• Tastenbuchstabenabstand: 0.1em
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT

Für unsere letzte Designanpassung fügen wir dem Formular eine maximale Breite und Auffüllung wie folgt hinzu:

• Maximale Breite: 500px
• Polsterung: 5 % oben, 5 % unten, 3 % links 3 % rechts

Schließlich müssen wir dem Modul eine CSS-Klasse hinzufügen, damit wir es im nächsten Schritt mit unserem CSS- und JQuery-Code ansprechen können.

Hinzufügen des benutzerdefinierten Codes

Um das benutzerdefinierte CSS und JQuery hinzuzufügen, fügen Sie ein Codemodul unter dem E-Mail-Opt-in-Formularmodul hinzu.

Das CSS

Fügen Sie im Feld für den Codeinhalt das folgende CSS ein und achten Sie darauf, dass das CSS in die erforderlichen Style-Tags eingeschlossen wird:

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

Die JQuery

Fügen Sie unter dem endenden style-Tag die folgende JQuery ein und umschließen Sie sie mit den erforderlichen script-Tags.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

Den Code aufschlüsseln

Über das CSS

Zuerst zielen wir auf die Felder und weisen ihnen eine relative Position zu, damit wir dem Label-Element eine absolute Position innerhalb des Felds (oder p-Elements) zuweisen können.

.et-float-labels p {
  position: relative !important;
}

Als Nächstes geben wir dem Label-Element auf dem Formular und der absoluten Position einen anderen Stil, der den Label-Text so platziert, dass er den Platzierungstext überlappt. Der display:block überschreibt die standardmäßige display:hidden-Eigenschaft, sodass das Etikett angezeigt werden kann. Dann blenden wir es mit ausgeblendeter Sichtbarkeit aus.

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

Dann zeigen, skalieren und übersetzen (verschieben) wir das Label mit einer Aufwärts-Schiebeanimation, sobald es die von JQeury gesteuerte „aktive“ Klasse erhält.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

Im Rest des CSS geht es darum, den Platzhalter mit einem Übergang auszublenden. Dazu sind viele Zeilen erforderlich, da jeder Browser unterschiedliche Präfixe benötigt, um auf das Platzhalter-Pseudoelement abzuzielen. Aber die Idee ist einfach – ändern Sie die Farbe des Platzhalters in transparent.

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

Über die JQuery

Als erstes definieren wir die Variable $floatLabelInput als Eingabeelement in jedem Formularfeld.

  var $floatLabelInput = $(".et-float-labels .input");

Dann verwenden wir den Fokus-Ereignishandler mit einer Funktion, um dem Label-Element (dem vorherigen Geschwister des Eingabeelements) eine Klasse ("aktiv") hinzuzufügen, wenn das Eingabeelement im Fokus ist. Sobald die „aktive“ Klasse zum Label hinzugefügt wurde, wird das Label angezeigt, skaliert und mit dem entsprechenden CSS über die Eingabe verschoben.

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

Schließlich verwenden wir den Ereignishandler blur mit einer Funktion, die bestimmt, wann die „aktive“ Klasse auf dem Label beibehalten wird. Wenn die Eingabe keinen Wert hat, bleibt sie aktiv, auch wenn das Eingabefeld nicht im Fokus ist. Wenn es keinen Wert hat, wird die Klasse entfernt und der Standardzustand des Felds zurückgegeben.

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

Das Hinzufügen und Entfernen der Klasse mithilfe der Ereignishandler „Focus“ und „Blur“ (anstelle von „click“) ermöglicht es dem Benutzer, den Effekt selbst dann zu sehen, wenn er nur mit der Tastatur navigiert (dh durch Drücken der Tabulatortaste durch die Felder blättern).

Endergebnis

Hier ist das Endergebnis unserer schwebenden Labels auf Formularfeldern in einem Divi-E-Mail-Optionsformular.

Abschließende Gedanken

Das Hinzufügen von schwebenden Beschriftungen zu einem Divi-Formular ist nicht so schwierig. Das Entwerfen des E-Mail-Optionsformulars (oder eines beliebigen Divi-Formulars) ist überraschend einfach. Denken Sie beim Hinzufügen von schwebenden Beschriftungen jedoch daran, die Größe und den Abstand der Formularfelder anzupassen, um den richtigen Platz für die schwebende Beschriftung zu lassen. Danach verwenden wir benutzerdefiniertes CSS, um den Platzhalter effektiv auszublenden oder anzuzeigen, wenn sich der Benutzer auf das Feld konzentriert. Da jeder Browser unterschiedliche Präfixe benötigt, um auf das Platzhalter-Pseudoelement abzuzielen, ist es wichtig, diese richtig zu setzen. Die von uns hinzugefügte JQuery fügt dem Label-Element eine Klasse hinzu und entfernt sie, die es bei Bedarf freigibt. Alles in allem ist es eine solide Mikrointeraktion, die zur Benutzererfahrung beiträgt.

Sie können diesen Vorgang auch für andere Divi-Formulare (wie ein Login- oder Kontaktformular) verwenden. Vergessen Sie nicht, die benutzerdefinierte Klasse dem Formular hinzuzufügen, bevor Sie den benutzerdefinierten Code hinzufügen. Danach müssen Sie möglicherweise die Designeinstellungen der Formularfelder optimieren, um sicherzustellen, dass genügend Platz für diese schwebenden Beschriftungen vorhanden ist.

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

Danke schön!