Come progettare una sezione di iscrizione attraente per qualsiasi tipo di sito Web con Divi

Uno dei motivi principali per cui le persone creano siti Web è trovare un nuovo modo per avvicinarsi al proprio pubblico di destinazione. Una volta che fai il primo passo e inizi a costruire un sito web, inizi a chiederti come esattamente sarai in grado di entrare in contatto con i tuoi potenziali clienti. Una delle cose che hanno dimostrato di aiutare molti proprietari di siti Web è la creazione di elenchi. Si tratta di raccogliere indirizzi e-mail dai visitatori, trasformandoli in lead (e infine clienti) con l'e-mail marketing.

E con la creazione di elenchi arriva la creazione di interessanti sezioni di iscrizione sul tuo sito web. Vuoi che la tua sezione di iscrizione sia accattivante e, cosa più importante, vuoi che la tua sezione di iscrizione si converta. Per questo tutorial, abbiamo creato una straordinaria sezione di iscrizione che attirerà innegabilmente l'attenzione del tuo visitatore. Stiamo combinando un design elegante con argomenti sul perché iscriversi a un elenco di e-mail. Inoltre, condivideremo anche tre tavolozze di colori tra cui puoi scegliere durante la creazione del design.

Arriviamo ad esso!

Iscriviti al nostro canale Youtube

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di diverse dimensioni.

Tavolozza dei colori #1

• Colore n. 1: rgba (79,35,255,0.88)
• Colore #2: #e09900
• Colore #3: #4f23ff

Tavolozza dei colori #2

• Colore n. 1: rgba (255,35,97,0.75)
• Colore #2: #e09900
• Colore #3: #d80e00

Tavolozza dei colori #3

• Colore n. 1: rgba (41,17,147,0.75)
• Colore #2: #00ffd8
• Colore #3: #291193

Approccio

Scegli una delle tavolozze di colori sopra (o creane una tua) e usa questi colori durante il tutorial. Faremo riferimento al colore n. 1, n. 2 o n. 3 quando utilizziamo un colore nelle nostre impostazioni. Stiamo anche sovrapponendo il modulo di iscrizione a due colonne e stiamo sottolineando i vantaggi dell'iscrizione a un elenco di e-mail.

Ricrea la sezione Iscriviti

Aggiungi una nuova sezione

Divisore superiore

Apri la pagina a cui vuoi aggiungere la tua sezione di iscrizione e aggiungi una nuova sezione standard. Apri subito le impostazioni della tua sezione e aggiungi il seguente divisore superiore:

• Stile divisore: trova nell'elenco
• Colore divisorio: #FFFFFF
• Altezza divisore: 200 px
• Capovolgimento divisore: verticale

Divisore inferiore

Aggiungi lo stesso tipo di divisore nella parte inferiore della sezione:

• Stile divisore: trova nell'elenco
• Colore divisorio: #FFFFFF
• Altezza divisore: 200 px
• Capovolgimento divisore: verticale

Spaziatura

Apri quindi le impostazioni di Spaziatura e rimuovi tutto il riempimento predefinito della tua sezione aggiungendo "0px" al riempimento superiore e inferiore.

Aggiungi una nuova riga

Struttura della colonna

Ora che abbiamo finito con tutte le impostazioni della sezione, possiamo aggiungere una nuova riga. Scegli la seguente struttura di colonne per esso

Sfondo sfumato

Apri le impostazioni della riga e continua aggiungendo il seguente sfondo sfumato:

• Primo Gradiente Colore: Colore #1
• Colore secondo gradiente: Colore #2
• Direzione del gradiente: 123deg
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Immagine di sfondo

Continua aggiungendo un'immagine di sfondo a tua scelta. Questa immagine di sfondo verrà mostrata solo per un po'. Scegli "Copertina" anche come dimensione dell'immagine di sfondo.

Colore di sfondo della colonna 2

Quindi, aggiungi "rgba(255,255,255,0.87)" come Colore di sfondo della colonna 2.

Dimensionamento

Ridurremo anche lo spazio tra entrambe le colonne e faremo in modo che la riga occupi l'intera larghezza dello schermo applicando le seguenti impostazioni di ridimensionamento:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

L'ultima cosa che devi fare all'interno delle impostazioni di riga è aggiungere un'imbottitura personalizzata:

• Imbottitura superiore e inferiore: 0px
• Imbottitura superiore colonna 1: 200 px
• Imbottitura inferiore colonna 1: 100 px
• Imbottitura superiore colonna 2: 300 px (desktop) 50 px (tablet e telefono)
• Imbottitura inferiore colonna 2: 100 px (tablet e telefono)
• Colonna 2 Imbottitura sinistra e destra: 50 px

Aggiungi il modulo Blurb n. 1 alla colonna 1

Aggiungi titolo blurb

Ora iniziamo ad aggiungere i nostri moduli! Inizieremo con la prima colonna aggiungendo un modulo Blurb. Una volta che avremo finito di modificare quel modulo Blurb, riutilizzeremo le sue impostazioni anche per gli altri due. Dopo aver aggiunto un modulo Blurb, assegnagli un titolo.

Aggiungi icona Blurb

Successivamente aggiungi un'icona al tuo modulo Blurb. Abbiamo usato la seguente icona per il primo modulo:

Impostazioni icona

Modifica l'aspetto dell'icona aggiungendo le seguenti impostazioni:

• Colore icona: #FFFFFF
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 43 px

Impostazioni del testo del titolo

Usiamo solo un titolo blurb. Ecco perché dovremo modificare solo le impostazioni del testo dell'H4:

• Carattere del titolo: Yeseva One
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #FFFFFF
• Spaziatura delle lettere del titolo: -1px

Dimensionamento

Modificheremo anche la larghezza del nostro modulo Blurb in base alle diverse dimensioni dello schermo:

• Larghezza contenuto: 150 px
• Larghezza: 33% (Desktop), 40% (Tablet), 60% (Telefono)
• Allineamento del modulo: Centro

Spaziatura

Infine, aggiungi anche la seguente imbottitura personalizzata al tuo Modulo Blurb:

• Imbottitura superiore e inferiore: 50 px

Clona il modulo Blurb due volte e modifica il modulo Blurb in primo piano

Cambia icona e contenuto

Ora puoi andare avanti e clonare il modulo Blurb due volte. Tienili tutti nella prima colonna. Per ognuno dei nuovi moduli Blurb, vai avanti e cambia l'icona e il titolo per farlo corrispondere al messaggio che vuoi inviare.

Aggiungi colore di sfondo

Evidenzieremo il modulo Blurb centrale. Per fare ciò, inizieremo aggiungendo un colore di sfondo bianco.

Cambia il colore dell'icona e del testo del titolo

Cambieremo anche il colore dell'icona e il titolo H4 in "#000000".

Aggiungi angoli arrotondati

Successivamente, aggiungeremo "5px" a ciascuno degli angoli nelle impostazioni del bordo.

Scatola ombra

Ultimo ma non meno importante, aggiungeremo un po' di profondità utilizzando la prima opzione dell'ombra della scatola.

Aggiungi il modulo di testo n. 1 alla colonna 2

Impostazioni testo

Passiamo alla seconda colonna! Il primo modulo di cui avremo bisogno è un modulo di testo. Dopo aver aggiunto il contenuto, applica le seguenti impostazioni di testo:

• Carattere del testo: Yeseva One
• Colore del testo: #000000
• Dimensione del testo: 54px
• Altezza riga di testo: 1em

Aggiungi il modulo di testo n. 2 alla colonna 2

Spaziatura

Proprio sotto quel modulo di testo, aggiungeremo un altro modulo di testo per la descrizione. Dopo aver aggiunto i tuoi contenuti, aggiungi "20px" al margine superiore.

Aggiungi il modulo di attivazione della posta elettronica alla colonna 2

Colore di sfondo

Il modulo successivo che dovremo aggiungere è un modulo di attivazione della posta elettronica. Una volta aggiunto, vai avanti e cambia il colore di sfondo in "rgba(255,255,255,0)".

Account email

Aggiungi il tuo account e-mail dopo aver scelto il tuo fornitore di servizi preferito.

Campi

Continua aprendo le Impostazioni del campo e disabilita i campi Nome e Cognome.

Impostazioni sul campo

Modificheremo anche le impostazioni del campo. Rimuovi gli angoli arrotondati aggiungendo "0px" a ciascuno degli angoli. Aggiungi anche la prima opzione di ombra della scatola.

Impostazioni dei pulsanti

Quindi, cambia l'aspetto del tuo pulsante:

• Colore del testo del pulsante: #FFFFFF
• Colore di sfondo del pulsante: Colore #3
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Carattere pulsante: Yeseva One
• Mostra icona pulsante: Sì
• Colore icona pulsante: #FFFFFF
• Posizionamento dell'icona del pulsante: a sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: No
• Box Shadow: seleziona la prima opzione

Spaziatura

Infine, fai in modo che il modulo di iscrizione si sovrapponga a entrambe le colonne utilizzando le seguenti impostazioni di spaziatura:

• Margine superiore: 20px (desktop), 0px (tablet e telefono)
• Margine sinistro: -60% (desktop e tablet), 0 px (telefono)
• Margine destro: 60% (Desktop), 50% (Tablet), 0px (Telefono)

Aggiungi il modulo di follow sui social media alla colonna 2

Aggiungi tutti i social network desiderati

Ultimo ma non meno importante, aggiungeremo un modulo di follow sui social media. Vai avanti e aggiungi i social network che desideri visualizzare.

Angoli arrotondati

Dopo aver aggiunto tutti i social network, aggiungi '50px' a ciascuno degli angoli nelle impostazioni di Border.

Spaziatura

Spingeremo anche verso il basso il modulo aggiungendo '50px' al margine superiore.

Cambia il colore di sfondo di ogni social network individualmente

Ultimo ma non meno importante, cambia il colore di sfondo di ciascuno dei social network individualmente in '#000000.'

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'occhiata finale al risultato su schermi di diverse dimensioni.

Pensieri finali

Le sezioni di iscrizione sono una parte importante del tuo sito web. Ti aiutano a creare elenchi di e-mail, abilitare l'email marketing e trasformare i lead in visitatori in una questione di tempo. In questo post, ti abbiamo mostrato come creare una straordinaria sezione di iscrizione che corrisponda a qualsiasi tipo di sito web. Abbiamo combinato l'utilizzo di un design stupendo con i vantaggi dell'iscrizione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!