5 progetti di attivazione e-mail che puoi creare con il modulo di attivazione e-mail di Divi

Tutti noi amiamo i nuovi iscritti alla nostra mailing list. E uno dei modi principali per ottenere nuovi abbonati è fornire ai tuoi visitatori un modulo di attivazione e-mail ben progettato. Ecco perché in questo tutorial ti mostrerò come ottenere cinque diversi design con il modulo di attivazione e-mail Divi per stimolare la tua immaginazione su ciò che è possibile con questo modulo potente e flessibile.

Sbirciata

Ecco un'anteprima dei cinque progetti Divi Email Opt-in Module che affronteremo oggi.

#1 Shadow Stacks Opt-in

Inizia a progettare #1

#2 Adesione grande e minima

Inizia a progettare #2

#3 Partecipazione magra

Inizia a progettare #3

#4 Attivazione dell'offerta di prenotazione

Inizia a progettare #4

#5 Attivazione cornice ritagliata

Inizia a progettare #5

Cosa ti serve per iniziare

Iscriviti al nostro canale Youtube

Per questo tutorial, tutto ciò di cui avrai bisogno è Divi. Costruiremo ognuno da zero, quindi non c'è bisogno di un layout prefabbricato. Tuttavia, utilizzerò alcune immagini da alcuni dei nostri pacchetti di layout, ma puoi usare le tue se lo desideri.

Inoltre, è importante sapere che non sarai in grado di vedere i campi del modulo di attivazione sul sito live finché non assegni un provider/elenco di posta elettronica al modulo di attivazione della posta elettronica. Puoi farlo nelle impostazioni di attivazione e-mail in Account e-mail.

Ora passiamo a quei disegni!

#1 Shadow Stacks Opt-in

Questo design aggiunge due ombre scatola al modulo di attivazione e-mail Divi per un effetto di impilamento unico che fa risaltare il modulo. La prima ombra della casella viene aggiunta al modulo di attivazione della posta elettronica e la seconda ombra della casella viene aggiunta alla riga che ha una dimensione e un bordo personalizzati per farlo funzionare.

Ecco come è fatto.

Per prima cosa crea una nuova sezione con una riga a una colonna e aggiungi il modulo di attivazione dell'email alla riga.

Apri le impostazioni di attivazione dell'email e aggiorna quanto segue:

Colore di sfondo: #1a0a38
Layout: corpo in alto, modulo in basso
Angoli arrotondati dei campi: 0px
Orientamento del testo: al centro
Peso del carattere del titolo: leggero
Dimensione del testo del titolo: 36px
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: #00ac69
Larghezza bordo pulsante: 0px
Raggio bordo pulsante: 0px
Imbottitura personalizzata: 3vw in alto, 3vw in basso, 5vw a sinistra, 5vw a destra

Ora aggiungiamo il nostro primo livello di ombra della casella dietro il nostro modulo di attivazione della posta elettronica.

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 25 px
Posizione verticale dell'ombra del riquadro: -25 px
Colore dell'ombra: rgba (26,10,56,0.82)

Ora aggiungiamo un piccolo frammento di CSS personalizzato per eliminare il padding sinistro che viene aggiunto al modulo per impostazione predefinita. Vai alla scheda Avanzate e aggiungi il seguente CSS sotto Modulo di adesione.

padding-left: 0px !important;

Questo si occupa delle impostazioni del modulo di attivazione della posta elettronica. Ora modifichiamo la nostra riga. Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza personalizzata: 600 px
Imbottitura personalizzata: 25 px in alto, 0 px in basso, 25 px a destra
Larghezza bordo inferiore: 25 px
Colore bordo inferiore: rgba(0,0,0,0)
Larghezza bordo sinistro: 25 px
Colore bordo sinistro: rgba(0,0,0,0)

Ora possiamo aggiungere l'ombra del riquadro alla riga.

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 50 px
Posizione verticale dell'ombra del riquadro: -50 px
Forza di diffusione dell'ombra della scatola: -25px
Colore ombra: rgba (26,10,56,0,55)

Ora diamo un'occhiata al progetto finale.

#2 Adesione grande e minima

Questo design di attivazione e-mail è minimale, pulito e grande. I campi del modulo si adattano alle dimensioni del browser in modo che sia perfetto su tutti i dispositivi. E non è troppo grande da costringere l'utente a scorrere.

Ecco come farlo.

Per prima cosa crea una nuova sezione con una riga a una colonna e aggiungi il modulo di attivazione dell'email alla riga.

Apri le impostazioni di attivazione dell'email e aggiorna il contenuto per includere il testo del titolo e del piè di pagina.

Quindi aggiorna lo sfondo con un colore scuro o un'immagine:

Colore di sfondo: #121212
Immagine di sfondo: è facoltativa. Sto usando uno dal Podcast Layout Pack

Prima di passare alla scheda Progettazione per ulteriori personalizzazioni, dobbiamo fare spazio agli elementi di forma di grandi dimensioni che aggiungeremo. Per fare ciò, vai alle impostazioni della riga e aggiorna quanto segue:

Larghezza personalizzata: 100%

Suggerimento: l' utilizzo di una larghezza personalizzata al 100% è un ottimo modo per assicurarti che il tuo design non ottenga alcun margine destro o sinistro sui dispositivi mobili. Se utilizzi l'opzione "Crea larghezza intera", la larghezza massima sarà dell'89%, quindi avrai ancora margini sui dispositivi mobili.

Ora torna alle impostazioni del modulo di attivazione della posta elettronica e aggiorna il seguente design:

Layout: corpo in alto, modulo in basso

Colore sfondo campo modulo: rgba(0,0,0,0)
Angoli arrotondati dei campi: 0px
Larghezza bordo inferiore dei campi: 2px
Colore bordo inferiore dei campi: #ffffff

Orientamento del testo: al centro

Carattere del titolo: Lato
Peso del carattere del titolo: leggero
Stile carattere titolo: TT
Dimensione del testo del titolo: 4vw
Altezza della riga del titolo: 1em

Colore del testo del campo: #ffffff
Carattere del campo: Lato
Peso del carattere del campo: leggero
Dimensione del testo del campo: 3.5vw
Spaziatura lettere campo: 0,1 em
Altezza della linea di campo: 1,3 em

Spaziatura delle lettere del corpo: 0,5 em

Dimensione del testo del pulsante: 4vw
Raggio bordo pulsante: 0px
Spaziatura tra le lettere dei pulsanti: 0,1 em
Carattere pulsante: Lato
Peso del carattere: leggero
Imbottitura personalizzata: 10vw in alto, 10vw in basso, 10vw a sinistra, 10vw a destra

Notare l'uso dell'unità di lunghezza vw per la dimensione del carattere combinata con l'unità di lunghezza em per l'altezza della riga e la spaziatura delle lettere. Ciò consente al testo e al design di ridimensionarsi perfettamente durante la regolazione del browser.

L'ultimo passaggio include alcuni frammenti di CSS personalizzati per perfezionare il design. Vai alla scheda Avanzate e aggiungi il seguente CSS personalizzato in Campi modulo di attivazione:

font-size: 3.5vw;

Ciò consentirà alla dimensione del testo durante la digitazione di corrispondere al testo segnaposto nei campi del modulo.

Quindi aggiungiamo un margine personalizzato sopra il pulsante per dargli un po' di respiro. Aggiungi quanto segue sotto il pulsante Iscriviti:

margin-top: 3.5vw;

Ora diamo un'occhiata al progetto finale.

#3 Partecipazione magra

Questo prossimo design sarà sicuramente una soluzione popolare per aziende e blog che desiderano risparmiare spazio verticale sui propri post o pagine di destinazione. Anche se il modulo Email Opt-in di Divi è il migliore per i moduli verticali più tradizionali, puoi effettivamente convertire il modulo in un modulo orizzontale sottile con solo un piccolo frammento di CSS.

Ecco come farlo.

Crea una nuova sezione con una riga a una colonna e aggiungi il modulo di attivazione dell'email alla riga.

Apri le impostazioni di attivazione dell'email e aggiorna il contenuto per includere un titolo ma nient'altro.

Quindi aggiorna il design con uno sfondo e un colore del pulsante come segue:

Colore di sfondo: #54677d
Layout: corpo in alto, forma in basso
Orientamento del testo: al centro
Colore di sfondo del pulsante: #b0c94f
Larghezza bordo pulsante: 0px

Ora è il momento del CSS personalizzato. Poiché vogliamo il design del modulo sottile solo su desktop (e non su dispositivi mobili), aggiungeremo il CSS alla pagina (sotto le impostazioni della pagina) utilizzando un ID CSS personalizzato per indirizzare lo stile del modulo.

Per fare ciò, vai alla scheda Avanzate e assegna al modulo di attivazione un ID CSS personalizzato.

ID CSS: magro

Questo verrà utilizzato per indirizzare questo modulo con il CSS esterno che aggiungeremo alla pagina.

Ora apri le impostazioni della pagina Divi Builder e aggiungi il seguente CSS nella scheda Avanzate.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Poiché Divi utilizza già flex per definire lo stile del form sul backend, questo CSS elimina la proprietà flex-wrap che fa sì che i campi del form si allineino verticalmente. Il risultato è un layout orizzontale dei campi del modulo. La regolazione della proprietà flex-basis al 23% imposta sostanzialmente la larghezza di ciascuno dei campi del modulo. E poiché abbiamo aggiunto il CSS all'interno di una query multimediale, il design avverrà solo su desktop con il layout predefinito del modulo visualizzato su dispositivi mobili.

Ecco il disegno definitivo.

#4 Attivazione dell'offerta di prenotazione

Questo design incorpora alcune immagini all'interno del modulo di attivazione e-mail allo scopo di promuovere un'offerta di libri gratuiti per l'iscrizione. Per fare ciò, tutto ciò che devi fare è aggiungere un'immagine utilizzando l'editor wysiwyg integrato per aggiungere la descrizione e il contenuto del piè di pagina. È vero che puoi realizzare questo stesso progetto combinando il modulo di attivazione della posta elettronica con altri moduli in una riga di due colonne, ma ho pensato che sarebbe stato utile mostrare come fare tutto nello stesso modulo.

Ecco come farlo.

Crea una nuova sezione con una riga a una colonna e aggiungi il modulo di attivazione dell'email alla riga.

Apri le impostazioni di attivazione dell'email e rimani nella scheda dei contenuti.

Sotto la descrizione, abbrevia il testo predefinito a solo un paio di frasi. Quindi aggiungi un'immagine dalla tua libreria multimediale facendo clic sul pulsante Aggiungi media.

Vuoi assicurarti che l'immagine non sia più larga di circa 200 px. Per questo esempio, sto usando la dimensione media dell'immagine.

In Piè di pagina, aggiungi alcune frasi per il contenuto del testo del piè di pagina e quindi fai clic sul pulsante Aggiungi media per aggiungere un'immagine del logo sotto il testo (ovviamente è facoltativo).

Per assicurarti che l'immagine sia centrata, imposta l'opzione di allineamento su centrato quando aggiungi l'immagine dal catalogo multimediale.

Ora sei pronto per aggiornare il resto del design. Inizia dando al modulo un'immagine di sfondo e un gradiente di sfondo sopra l'immagine per rendere il testo più leggibile.

Immagine di sfondo: [aggiungi immagine]
Colore sfondo sfumato sinistro: rgba(0,0,0,0.5)
Colore sfondo sfumato destro: rgba(0,0,0,0.5)
Posiziona il gradiente sopra l'immagine di sfondo: S

Quindi aggiorna il resto del design come segue:

Colore del testo del pulsante: #333333
Colore di sfondo del pulsante: #ffcb7a
Larghezza bordo pulsante: 0px
Spaziatura delle lettere dei pulsanti: 5px
Peso del carattere: Ultra grassetto
Stile carattere: TT
Larghezza: 700 px
Allineamento del modulo: centro
Imbottitura personalizzata: 3vw in alto, 3vw in basso, 3vw a sinistra, 3vw a destra

Ecco il disegno definitivo.

#5 Attivazione cornice ritagliata

Questa semplice tecnica di progettazione è un ottimo modo per dare alla tua email opt-in un aspetto unico. Il trucco è usare divisori di sezione che abbiano lo stesso colore dello sfondo della sezione. Quindi, regolando l'altezza dei divisori, puoi sovrapporre il modulo di attivazione dell'email per ritagliare i bordi in un modo unico per un piacevole effetto di inquadratura.

Ecco come farlo.

Crea una nuova sezione con una riga a una colonna e aggiungi il modulo di attivazione dell'email alla riga.

Apri le impostazioni di attivazione dell'email e dai al tuo modulo un gradiente di sfondo.

Colore sfondo sfumato sinistro: #8300e9
Colore di sfondo sfumato a destra: #06c8ff
Tipo di gradiente: radiale
Direzione radiale: in alto a sinistra

Quindi aggiorna il resto del design come segue:

Peso del carattere del titolo: grassetto
Dimensione del testo del titolo: 36px
Larghezza: 70% (desktop), 100% (tablet e smartphone)
Allineamento del modulo: centro
Imbottitura personalizzata: 6vw in alto, 6vw in basso, 6vw a sinistra, 6vw a destra
Angoli arrotondati: 50 pixel in alto a sinistra, 0 pixel in alto a destra, 50 pixel in basso a destra, 0 pixel in basso a sinistra

Salva le tue impostazioni.

Quindi aggiorna le impostazioni della riga con una larghezza personalizzata.

Larghezza personalizzata: 100%

Ora siamo pronti per personalizzare l'impostazione della sezione per aggiungere il nostro effetto cornice ritagliata con quei divisori di sezione.

Apri le impostazioni della sezione e aggiorna quanto segue:

Colore di sfondo: #222222

Stile divisore superiore: vedi screenshot
Colore divisore superiore: #222222 (assicurati che corrisponda al colore di sfondo della sezione)
Altezza divisore superiore: 12vw (desktop), 150px (tablet e smartphone)
Disposizione del divisore superiore: in cima al contenuto della sezione

Stile divisore inferiore: vedi screenshot
Colore divisore inferiore: #222222 (assicurati che corrisponda al colore di sfondo della sezione)
Altezza divisore inferiore: 12vw (desktop), 150px (tablet e smartphone)
Ripetizione orizzontale divisore inferiore: 0.8x
Flip divisore inferiore: verticale e orizzontale
Disposizione del divisore inferiore: in cima al contenuto della sezione

Ora diamo un'occhiata al progetto finale.

Dai un'occhiata al post sulla creazione di design di cornici unici per ulteriori informazioni su questa tecnica di progettazione.

Pensieri finali

Questi design opt-in per e-mail sono davvero solo la punta dell'iceberg quando pensi a tutte le opzioni di stile disponibili all'interno di Divi. Ho volutamente mantenuto i disegni abbastanza semplici da darti le ampie pennellate di ciò che puoi fare. Sentiti libero di esplorare da solo design più raffinati aggiungendo nuovi caratteri, colori ed effetti al passaggio del mouse. E non dimenticare di divertirti un po' durante il processo.

Non vedo l'ora di sentirti nei commenti.

Saluti!