Come creare un modulo di newsletter con etichette fluttuanti in Divi

Rifat Divi Tutorials Jul 1, 2021

Di solito notiamo la presenza di moduli di newsletter in riviste o siti Web di blog. Forme di vari design accattivanti attirano sempre la nostra attenzione. Inoltre, i moduli progettati in modo creativo sono molto attivi nel campo dell'impostazione di un effetto positivo sull'esperienza dell'utente. I moduli dispongono di segnaposto per consentire agli utenti di sapere quale tipo di valore devono inserire. Quindi, come sarebbe se impostassimo il segnaposto e il nome dei campi di input sullo stesso e rendiamo invisibile il segnaposto quando qualcuno tenta di aggiungere informazioni su quel campo e facciamo apparire il nome delle etichette che non era visibile in primo luogo.

Suona un po' complesso? Nessun problema, oggi ti mostreremo come progettare un modulo su Divi in cui i segnaposto del modulo saranno fluttuanti e saliranno in alto durante l'immissione dei dati. Andiamo ad esso.

Anteprima

Dai una rapida occhiata a come sarà il nostro modulo di oggi.

Progettare il modulo della newsletter

Costruzione del modulo di attivazione della posta elettronica

Apri la pagina con Divi builder in cui desideri aggiungere il modulo. passa alla sezione e aggiungi una riga a una colonna.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Ora aggiungi un modulo Modulo opzione e-mail alla colonna.

Apri le impostazioni per il modulo di attivazione della posta elettronica. Dalla scheda contenuto, cambia i testi.

Ricordati di collegarlo con l'email fornisci. Senza la connessione, il modulo non verrà visualizzato su una pagina live.

Quindi, aggiungi un bel colore calmante per gli occhi alla forma.

  • Colore di sfondo: # 8B80F9

Dalla scheda Design, aggiorna il layout del modulo.

  • Layout: corpo in alto, forma in basso

Ora, modifica le proprietà del campo di conseguenza.

  • 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

Successivamente, cambieremo lo stile del bordo.

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

Ora cambia gli stili del carattere del titolo:

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

Ora apporta le modifiche al pulsante.

  • Usa stili personalizzati per il pulsante: S
  • Colore del testo del pulsante: # 8B80F9
  • 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

Ora aggiungiamo una larghezza massima e un riempimento al modulo. È l'ultimo aggiustamento al nostro design.

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

Infine, aggiungeremo una classe CSS al nostro design in modo che possiamo indirizzarla nella nostra sezione di codifica in cui aggiungeremo codice CSS e JQuery al nostro design.

  • Classe CSS: et-float-labels

Aggiunta di codice personalizzato

Aggiungi un modulo di codice sotto il design in cui aggiungeremo il codice CSS e JQuery.

Codice CSS

Ora copia il codice scritto di seguito e incollalo nel modulo del codice. Ricorda di conservare il codice all'interno del tag Style .

.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;
  transition: all 0.4s;
  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;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}

Codice JQuery

Ora aggiungi il tag Script e incolla il seguente codice JQuery al suo interno.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  var $floatLabelField = $(".et-float-labels p");
  $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");
    }
  });
});

Vista finale

Quindi ecco il nostro aspetto finale del design.

Conclusione

Quindi, vedi che avere un modulo di newsletter creativo è molto semplice in Divi e puoi creare il modulo di attivazione e-mail delle etichette mobili in un tempo molto breve. Assicurati di personalizzare il design in base alle tue esigenze. I codici personalizzati sono molto importanti per rendere fluttuanti le etichette, quindi inseriscili con cura all'interno dei tag. Spero che questo design ti piaccia e, in tal caso, condividilo con i tuoi amici amanti di Divi . Iscriviti ai nostri aggiornamenti per ottenere altri tutorial Divi come questo.