Come aggiungere etichette mobili ai campi modulo in Divi

L'aggiunta di etichette mobili ai campi modulo in Divi può migliorare il design e l'esperienza utente di qualsiasi modulo Divi in ​​modo sottile, ma potente. Qualsiasi modulo del sito Web (non solo Divi) di solito include una sorta di campo di input e un'etichetta per quel campo di input. Ad esempio, un modulo può avere un campo di immissione di testo per un nome in cui è possibile immettere il testo (o il nome) e un'etichetta per la casella di immissione di quel campo (ad es. "Nome"). Questa etichetta può essere visibile o nascosta a seconda dello stile del modulo. Oltre a un'etichetta, i campi di input possono contenere anche uno pseudo-elemento segnaposto che funge da una sorta di etichetta temporanea all'interno del campo di input che rimane visibile finché l'utente non inserisce un valore di input. In Divi, il design predefinito nasconde l'elemento etichetta e mostra solo il testo segnaposto. L'aggiunta di un'etichetta mobile a un modulo Divi consentirà ai progettisti di mantenere l'aspetto elegante dello stile del modulo "solo segnaposto" e anche di rivelare (o rendere mobile) l'etichetta sopra il campo ogni volta che l'utente aggiunge un valore.

In questo tutorial, ti mostreremo come aggiungere etichette mobili a un modulo di opzioni e-mail Divi. Per fare ciò, utilizzeremo il generatore Divi per progettare il modulo delle opzioni e-mail. Quindi aggiungeremo alcuni CSS e JQuery personalizzati per visualizzare quelle etichette nascoste quando un utente si concentra sul campo.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

https://youtu.be/j1m14XFztdc

Iscriviti al nostro canale Youtube

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Aggiunta di etichette mobili ai campi modulo in Divi

Costruire il modulo di attivazione della posta elettronica

Aggiungi una riga a una colonna alla sezione predefinita in Divi Builder.

Aggiungi un modulo di attivazione e-mail alla colonna.

Apri il modal Impostazioni di attivazione e-mail. Nella scheda contenuto, aggiorna il testo del titolo ed elimina il corpo del testo.

Assicurati di collegare il provider di servizi del tuo account di posta elettronica. In caso contrario, l'opzione e-mail non apparirà su una pagina live.

Quindi, aggiungi il seguente colore di sfondo all'opzione email:

• Colore di sfondo: #1f4b74

Nella scheda Progettazione, aggiorna il layout del modulo:

• Layout: corpo in alto, forma in basso

Quindi aggiorna gli stili di campo come segue:

• Colore di sfondo dei campi: trasparente
• Colore testo campi: #ffffff
• Margine dei campi: 1.5em in alto
• Imbottitura campi: 0.5em in alto, 0.5em in basso, 1em a sinistra, 1em a destra
• Dimensioni del testo dei campi: 1.2em
• Altezza della linea dei campi: 2em

Quindi, aggiorna gli stili del bordo del campo:

• Angoli arrotondati dei campi: 0px
• Larghezza bordo inferiore dei campi: 2px
• Colore bordo inferiore dei campi: #ffffff

Aggiorniamo anche gli stili di carattere del titolo:

• Peso del carattere del titolo: grassetto
• Stile carattere titolo: TT
• Allineamento del testo del titolo: al centro

E ora andiamo avanti e stiliamo il pulsante.

• Usa stili personalizzati per il pulsante: S
• Colore del testo del pulsante: #1f4b74
• Colore di sfondo del pulsante: #ffffff
• Spaziatura tra le lettere dei pulsanti: 0,1 em
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: TT

Per la nostra ultima personalizzazione del design, aggiungiamo una larghezza massima e un'imbottitura al modulo come segue:

• Larghezza massima: 500 px
• Imbottitura: 5% sopra, 5% sotto, 3% sinistra 3% destra

Infine, dobbiamo aggiungere una classe CSS al modulo in modo che possiamo indirizzarla con il nostro codice CSS e JQuery nel passaggio successivo.

Aggiunta del codice personalizzato

Per aggiungere CSS e JQuery personalizzati, aggiungi un modulo di codice sotto il modulo del modulo di attivazione dell'email.

Il CSS

Nella casella del contenuto del codice, incolla il seguente CSS assicurandoti di racchiudere il CSS nei tag di stile necessari:

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

Il JQuery

Sotto il tag di stile finale, incolla il seguente JQuery e avvolgilo con i tag di script necessari.

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

Scomporre il codice

Informazioni sul CSS

Innanzitutto, scegliamo come target i campi e diamo loro una posizione relativa in modo da poter assegnare all'elemento label una posizione assoluta all'interno del campo (oppure elemento p).

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

Successivamente, diamo l'elemento etichetta sul modulo e la posizione assoluta con altri stili che posizionano il testo dell'etichetta in modo che si sovrapponga al testo di posizionamento. Il display:block sovrascrive la proprietà display:hidden predefinita in modo che l'etichetta sia pronta per essere mostrata. Quindi lo nascondiamo con la visibilità nascosta.

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

Quindi mostriamo, ridimensioniamo e traduciamo (spostiamo) l'etichetta con un'animazione a scorrimento verso l'alto una volta che riceve la classe "attiva" controllata da JQeury.

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

Il resto del CSS riguarda il nascondere il segnaposto con una transizione. Ci sono molte righe per farlo perché ogni browser richiede prefissi diversi per il targeting dello pseudo-elemento segnaposto. Ma l'idea è semplice: cambia il colore del segnaposto in trasparente.

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

Informazioni su JQuery

Innanzitutto, definiamo la variabile $floatLabelInput come elemento di input su ciascun campo del modulo.

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

Quindi usiamo il gestore dell'evento focus con una funzione per aggiungere una classe ("attiva") all'elemento label (il fratello precedente dell'elemento input) ogni volta che l'elemento input è attivo. Una volta che la classe "attiva" viene aggiunta all'etichetta, l'etichetta viene mostrata, ridimensionata e spostata in posizione sopra l'input con il CSS corrispondente.

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

Infine, usiamo il gestore dell'evento blur con una funzione che determina quando mantenere la classe "attiva" sull'etichetta. Se l'input non ha un valore, rimarrà attivo anche quando il campo di input non è a fuoco. Se non ha un valore, la classe viene rimossa e viene restituito lo stato predefinito del campo.

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

L'aggiunta e la rimozione della classe utilizzando i gestori di eventi "focus" e "blur" (invece di "click") consente all'utente di vedere l'effetto anche durante la navigazione utilizzando solo una tastiera (cioè premendo tab per scorrere i campi).

Risultato finale

Ecco il risultato finale delle nostre etichette mobili sui campi del modulo in un modulo di opzione e-mail Divi.

Pensieri finali

L'aggiunta di etichette mobili a un modulo Divi non è così difficile. Progettare il modulo delle opzioni e-mail (o qualsiasi modulo Divi) è sorprendentemente facile. Tuttavia, quando si aggiungono etichette mobili, ricordarsi di personalizzare le dimensioni e la spaziatura dei campi del modulo per lasciare la giusta quantità di spazio per l'etichetta mobile. Successivamente, utilizziamo CSS personalizzati per nascondere o mostrare efficacemente il segnaposto quando l'utente si concentra sul campo. Poiché ogni browser richiede prefissi diversi per il targeting dello pseudo-elemento segnaposto, è importante che siano corretti. Il JQuery che abbiamo aggiunto aggiunge e rimuove una classe sull'elemento label che lo visualizzerà quando necessario. Tutto sommato, è una solida microinterazione che aggiunge all'esperienza dell'utente.

Sentiti libero di usare questo stesso processo anche su altri moduli Divi (come un login o un modulo di contatto). Non dimenticare di aggiungere la classe personalizzata nel modulo prima di aggiungere il codice personalizzato. Successivamente, potrebbe essere necessario modificare le impostazioni di progettazione dei campi del modulo per assicurarsi che disponga di spazio sufficiente per quelle etichette mobili.

Non vedo l'ora di sentirti nei commenti.

Saluti!