Hai deciso di attivare la tua newsletter e vuoi integrare un modulo per l’iscrizione degli utenti all’interno del tuo sito?
Ottima idea! La newsletter è senza dubbio il modo migliore per rimanere in contatto con la tua community e offrire loro contenuti esclusivi e risorse extra di cui i non iscritti non possono usufruire. Questo consente anche a te di migliorare la tua reputazione e di crescere come professionista.
Ok, ma non vuoi un modulo qualsiasi. O meglio, non vuoi accontentarti del modulo Email optin di Divi Builder, ma vuoi renderlo ancora più unico e personale.
In questo tutorial, ti mostrerò il modo più semplice per creare un modulo Email Optin/Newsletter in Divi Builder che non abbia diverse righe, ma soltanto una. Vediamo come allineare il campo e-mail e il campo pulsante in unica singola riga!
Modulo E-mail optin a campo singolo: creare la sezione
Per creare un modulo E-mail Optin a campo singolo e attivare la tua newsletter, basterà aggiungere poche righe di CSS e impostare correttamente il modulo. Partiamo?
Per questo tutorial, prenderemo come esempio il template che ho realizzato (vedi immagine sopra). Quindi, seguirò passo passo tutte le operazioni da fare per realizzarlo. Se invece preferisci passare subito al modulo e-mail, vai qui.
Ok, iniziamo. Vai all’interno del Divi Builder della tua pagina, posizionati nella sezione (il riquadro blu) e clicca sulla rotellina per aprire le impostazioni. Rimani sulla scheda Contenuti e imposta un colore scuro per lo sfondo.
- Sfondo: #282828;
Poi su Design > Spaziatura per impostare i padding della sezione.
- Padding-top: 80px;
- Padding-bottom: 80px;
A questo punto, aggiungiamo anche il titolo della sezione per far capire agli utenti che possono iscriversi alla newsletter e aggiungere una CTA perfetta per invitarli a lasciare la loro e-mail. Inserisci il modulo testo, cancella il contenuto preimpostato e sostituiscilo con il tuo. In questo caso, il testo principale “Sign up to stay updated” sarà il titolo H2 e “Lorem insum dolor amet consec tetur adiriscin elit nesle eiusmod temsor incididunt” sarà il testo sotto.
Nella scheda Design, vai prima su Testo:
- Testo font: Default;
- Colore testo: #FFFFFF;
- Dimensioni del testo: 14px;
- Allineamento testo: centrato;
- Colore del testo: chiaro.
Poi, sempre nella scheda Design, vai su Testo del sottotitolo e poi clicca su H2.
- Testo font: Poppins;
- Intestazione allineamento del testo: centrato;
- Colore font: #FFFFFF;
- Dimensioni del testo: 35px.
Perfetto, è tutto pronto. Possiamo passare all’inserimento del modulo e-mail optin.
Aggiungere il modulo E-mail optin a campo singolo
Prima di tutto, aggiungi una nuova riga e poi clicca sul modulo E-mail Optin nella scheda Contenuti.
Rimuovi sia il testo nel riquadro del Titolo che il contenuto del corpo del testo, così da avere un modulo e-mail completamente pulito. A questo punto, vai su “Campi” e disabilitali tutti. Rimuovi anche lo sfondo!
Certo, il template potrebbe già andare bene così, ma dobbiamo creare una singola riga e allineare il campo di inserimento dell’e-mail e il pulsante. Quindi, lascia aperto il modulo E-mail optin e spostati nella scheda Avanzate > CSS personalizzato > Campi modulo e incolla questo codice CSS:
width:70% !Important;
Prima di continuare, bisogna dare un’impostazione diversa alla versione mobile. Da un dispositivo mobile, data la ridotta dimensione dello schermo, è preferibile mostrare il modulo E-mail optin con il pulsante sotto il campo e-mail, ovviamente per una questione di usabilità. Quindi, rimani sul CSS del campo modulo e clicca sull’icona dello smartphone, poi su Telefono e sovrascrivi il codice scrivendo:
display: block;
Ora vai nel campo sottostante, Pulsante Invia, e aggiungi questo CSS:
width:30% !Important;
float:right;
border-radius:0px 100px 100px 0px !important;
Anche in questo caso, clicca sull’icona dello smartphone > Telefono e sovrascrivi il codice con:
display: block;
Allineare il pulsante al campo e-mail
Vedrai che il pulsante si è spostato a destra, ma sta ancora troppo in basso. Quindi, vai alla scheda Design > Campi e apporta queste modifiche:
- Campi padding: 18px 18px 20px 20px;
- Campi font: Poppins;
- Campi rettangolo arrotondato: 100px – 0px – 100px – 0px;
- Campi rettangolo arrotondato (mobile): 100px – 100px – 100px – 100px.
Ora passiamo alla personalizzazione del pulsante. Sempre nella scheda Design, vai su Pulsante, attiva gli stili personalizzati e apporta queste modifiche:
- Colore dello sfondo: #7cda24;
- Dimensioni del testo: 18px;
- Larghezza bordo: 0px;
- Pulsante border radius: 0px;
- Pulsante border radius (mobile): 100px;
- Pulsante icona: Sì;
- Icona: digita “send”;
- Mostra solo l’icona su hover: No.
Per evitare che i margini e i padding non vengano settati correttamente, aggiungi la seguente regola CSS nella sezione Avanzate > Pulsante Invia, proprio subito sotto il codice che avevamo precedentemente aggiunto.
margin-top: -74px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
Il tuo modulo E-mail optin è pronto! Non ti resta che impostare il tuo account di posta elettronica e attivare il servizio con il provider e-mail che utilizzi per la newsletter. Preparati a far esplodere la tua mailing list.
È tutto per questo tutorial. Spero che ti sia stato utile e che ti abbia aiutato a creare il modulo e-mail che desideravi. Fammi sapere cosa ne pensi!
0 commenti