Cum se adaugă etichete flotante în câmpurile de formular din Divi

Adăugarea etichetelor plutitoare pentru a forma câmpuri în Divi poate spori designul și UX-ul oricărei forme Divi într-un mod subtil, dar puternic. Orice formular de site web (nu doar Divi) include de obicei un fel de câmp de intrare și o etichetă pentru câmpul de intrare respectiv. De exemplu, un formular poate avea un câmp de introducere a textului pentru un nume unde puteți introduce textul (sau numele) și o etichetă pentru caseta de introducere a câmpului respectiv (adică „Nume”). Această etichetă poate fi vizibilă sau ascunsă în funcție de stilul formularului. În plus față de o etichetă, câmpurile de intrare pot conține și un pseudo-element substituent care servește ca un fel de etichetă temporară în câmpul de intrare care rămâne vizibil până când utilizatorul introduce o valoare de intrare. În Divi, designul implicit ascunde elementul de etichetă și afișează doar textul substituent. Adăugarea unei etichete flotante la un formular Divi va permite designerilor să păstreze aspectul elegant al stilului formularului „doar substituent” și să dezvăluie (sau să plutească) eticheta deasupra câmpului ori de câte ori utilizatorul adaugă o valoare.

În acest tutorial, vă vom arăta cum să adăugați etichete flotante la un formular de opțiune de e-mail Divi. Pentru a face acest lucru, vom folosi constructorul Divi pentru a proiecta formularul de opțiune de e-mail. Apoi vom adăuga câteva CSS și JQuery personalizate pentru a plasa acele etichete ascunse în vizualizare atunci când un utilizator se concentrează pe câmp.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

https://youtu.be/j1m14XFztdc

Abonați-vă la canalul nostru Youtube

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Adăugarea etichetelor plutitoare la câmpurile de formular din Divi

Construirea formularului Optin de e-mail

Adăugați un rând cu o coloană la secțiunea implicită din Divi Builder.

Adăugați un formular Email Optin în coloană.

Deschideți modalitatea de configurare a opțiunilor de e-mail. Sub fila conținut, actualizați textul titlului și ștergeți textul corpului.

Asigurați-vă că conectați furnizorul de servicii al contului de e-mail. Dacă nu, opțiunea de e-mail nu va apărea pe o pagină live.

Apoi, adăugați următoarea culoare de fundal la opțiunea de e-mail:

• Culoare fundal: # 1f4b74

Sub fila Proiectare, actualizați aspectul formularului:

• Aspect: corp pe partea de sus, formă pe partea de jos

Apoi actualizați stilurile de câmp după cum urmează:

• Culoare fundal câmpuri: transparent
• Culoare text câmpuri: #ffffff
• Câmpuri Marjă: 1.5em top
• Căptușirea câmpurilor: 0,5em sus, 0,5em jos, 1em stânga, 1em dreapta
• Dimensiune text câmpuri: 1.2em
• Înălțimea liniei câmpurilor: 2em

Apoi, actualizați stilurile de margine de câmp:

• Câmpuri Colțuri rotunjite: 0 px
• Câmpuri Lățimea marginii inferioare: 2 px
• Câmpuri Culoare margine inferioară: #ffffff

Să actualizăm și stilurile de fonturi Title:

• Greutatea fontului titlului: Bold
• Titlu Stil Font: TT
• Alinierea textului titlului: centru

Și acum să mergem mai departe și să stilăm butonul.

• Utilizați stiluri personalizate pentru buton: DA
• Culoarea textului butonului: # 1f4b74
• Culoarea fundalului butonului: #ffffff
• Distanța dintre litere pentru butoane: 0,1em
• Buton Font Greutate: Bold
• Stil Font Buton: TT

Pentru ultima noastră personalizare a designului, să adăugăm o lățime maximă și o umplutură la formular, după cum urmează:

• Lățime maximă: 500 px
• Căptușeală: 5% sus, 5% jos, 3% stânga 3% dreapta

În cele din urmă, trebuie să adăugăm o clasă CSS la modul, astfel încât să o putem viza cu codul nostru CSS și JQuery în pasul următor.

Adăugarea codului personalizat

Pentru a adăuga CSS și JQuery personalizate, adăugați un modul de cod sub modulul formular de înscriere prin e-mail.

CSS

În caseta conținut cod, lipiți următorul CSS asigurându-vă că înfășurați CSS în etichetele de stil necesare:

.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;
}

JQuery

Sub eticheta de stil de încheiere, lipiți următorul JQuery și înfășurați-l cu etichetele de script necesare.

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");
    }
  });
});

Defalcarea codului

Despre CSS

În primul rând, vizăm câmpurile și le oferim o poziție relativă, astfel încât să putem da elementului etichetă o poziție absolută în câmp (sau elementul p).

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

Apoi, oferim elementul etichetei pe formă și poziția absolută cu un alt stil care plasează textul etichetei astfel încât să se suprapună cu textul plasării. Afișajul: blocul suprascrie afișajul implicit: proprietatea ascunsă, astfel încât eticheta să fie gata să fie afișată. Apoi o ascundem cu vizibilitate ascunsă.

.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;
}

Apoi afișăm, redimensionăm și traducem (mutăm) eticheta cu o animație de diapozitivă ascendentă odată ce primește clasa „activă” controlată de JQeury.

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

Restul CSS este despre ascunderea substituentului cu o tranziție. Există o mulțime de linii pentru a face acest lucru, deoarece fiecare browser necesită prefixe diferite pentru a viza pseudo-elementul substituent. Dar ideea este simplă - schimbați culoarea substituentului în 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;
}

Despre JQuery

Mai întâi, definim variabila $ floatLabelInput ca element de intrare pe fiecare câmp de formular.

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

Apoi, noi, noi gestionăm evenimentele de focalizare cu o funcție pentru a adăuga o clasă („activă”) la elementul de etichetă (fratele anterior al elementului de intrare) ori de câte ori elementul de intrare este focalizat. Odată ce clasa „activă” este adăugată la etichetă, eticheta este afișată, scalată și mutată în poziție deasupra intrării cu CSS corespunzător.

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

În cele din urmă, noi, noi, gestionarea evenimentelor de estompare, cu o funcție care determină când să păstrăm clasa „activă” pe etichetă. Dacă intrarea nu are o valoare, va rămâne activă chiar și atunci când câmpul de intrare nu este focalizat. Dacă nu are o valoare, clasa este eliminată și starea implicită a câmpului revine.

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

Adăugarea și îndepărtarea clasei folosind gestionarele de evenimente „focalizare” și „estompare” (în loc de „clic”) permit utilizatorului să vadă efectul chiar și atunci când navighează folosind doar o tastatură (adică apăsând tasta pentru a parcurge câmpurile).

Rezultat final

Iată rezultatul final al etichetelor noastre flotante pe câmpurile formularului într-un formular de opțiune de e-mail Divi.

Gânduri finale

Adăugarea etichetelor plutitoare la un formular Divi nu este atât de dificilă. Proiectarea formularului de opțiune de e-mail (sau a oricărui formular Divi) este surprinzător de ușoară. Cu toate acestea, atunci când adăugați etichete flotante, nu uitați să personalizați dimensiunea și spațiul câmpurilor formularului pentru a lăsa spațiul potrivit pentru eticheta flotantă. După aceea, folosim CSS personalizat pentru a ascunde sau afișa în mod eficient substituentul atunci când utilizatorul se concentrează pe câmp. Deoarece fiecare browser necesită prefixe diferite pentru direcționarea pseudo-elementului substituent, este important să le înțelegeți. JQuery pe care l-am adăugat adaugă și elimină o clasă pe elementul de etichetă care o va pluti în vizualizare atunci când este necesar. Una peste alta, este o microinteracțiune solidă care adaugă experiență utilizatorului.

Simțiți-vă liber să utilizați același proces și pe alte formulare Divi (cum ar fi un formular de conectare sau de contact). Nu uitați să adăugați clasa personalizată pe formular înainte de a adăuga codul personalizat. După aceea, poate fi necesar să modificați setările de proiectare ale câmpurilor formularului pentru a vă asigura că are suficient spațiu pentru acele etichete plutitoare.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!