Come creare moduli di attivazione Bloom a schermo intero, trasparenti o a larghezza intera

Nel tutorial di oggi, ti mostreremo come creare moduli opt-in a schermo intero, trasparenti e a tutta larghezza con Bloom, un plug-in che ti aiuta ad aggiungere moduli opt-in al tuo sito web. Ti guideremo, passo dopo passo, attraverso il processo di progettazione e configurazione di due moduli di opt-in di esempio. Seguendo attentamente questo post, sarai in grado di creare tu stesso i moduli di opt-in trasparenti e utilizzarli su qualsiasi sito Web in cui è installato il plug-in Bloom, che si tratti del tuo sito Web o di un cliente.

Avere uno o più moduli di attivazione sul tuo sito Web è qualcosa che non solo ti aiuta a rimanere in contatto con i tuoi visitatori, ma anche a interagire con loro. Al giorno d'oggi è difficile imbattersi in un sito Web che non ha un modulo di opt-in a causa dei dati orientati ai risultati che porta. Guadagnando l'indirizzo email dei tuoi visitatori al momento e nel posto giusto, farai un passo avanti per conoscerli e renderli clienti e/o visitatori fedeli.

Tuttavia, se preferisci allontanarti dai moduli di attivazione standard, puoi optare per un modulo di attivazione a schermo intero, trasparente o a larghezza intera. Ti mostreremo i due esempi in anticipo.

Esempio 1

Esempio 2

Creazione di un modulo di attivazione trasparente e a schermo intero con Bloom: suggerimenti

Il plugin Bloom offre varie possibilità per modellare i tuoi moduli di attivazione e attirare il tuo pubblico nel modo che funziona meglio sia per te che per i tuoi visitatori. Oltre ai modelli opt-in esistenti offerti da Bloom, ci sono anche opzioni integrate che semplificano la creazione di design personalizzati. Puoi anche aggiungere codice CSS personalizzato per ottenere risultati più avanzati.

Tuttavia, quando si tenta di apportare alcune modifiche al design tramite il codice CSS, ci sono alcune cose che dovresti tenere a mente in modo da non perdere tempo cercando di far funzionare le cose.

Attiva prima il modulo di adesione

Quando stai progettando il tuo modulo di attivazione, hai un pulsante di anteprima nella parte superiore della scheda Design. Questo ti aiuta a visualizzare in anteprima i risultati che stai facendo durante la progettazione. Sebbene le modifiche al design integrate cambino automaticamente anche nell'anteprima, ciò non conta per il codice CSS. Se stai apportando determinate modifiche tramite il campo CSS personalizzato all'interno della scheda Progettazione, è possibile che alcune di queste modifiche non si applichino al modulo di anteprima ma si applichino al modulo di attivazione sul tuo sito web.

Ecco perché dovrai prima attivare il modulo di opt-in e applicarlo a una delle tue pagine. Per assicurarti che i tuoi visitatori non si trovino di fronte al modulo di attivazione mentre ci stai ancora lavorando, puoi visualizzarlo in anteprima su una nuova pagina che non hai condiviso con i tuoi visitatori.

(O, ovviamente, su un sito di staging/test.)

Inizia creando una nuova pagina e assegnandole un nome. Non devi inserire nulla in quella pagina; deve solo esistere. Mentre stai progettando il tuo modulo di attivazione, vai alla scheda Impostazioni di visualizzazione. Imposta il tempo di ritardo su 1 secondo in modo da non dover aspettare il modulo di attivazione ogni volta che vuoi controllare il risultato.

Scorri verso il basso quella scheda e quando trovi l'opzione "Visualizza su", seleziona "Pagina". Dopo aver selezionato "Pagina", vedrai apparire un elenco di pagine attive sul tuo sito web. Scegli la pagina che hai creato di recente. Assicurati di visualizzare il modulo di attivazione solo su quella pagina.

Apporta le modifiche in base al modulo attivato

Le modifiche apportate con il codice CSS non si applicano a tutti i moduli di opt-in; si applicano solo al modulo di attivazione su cui stai lavorando in modo specifico. Ecco perché alcune delle classi di cui abbiamo bisogno saranno uniche.

Più avanti in questo post, ti mostreremo come farlo per gli esempi che stiamo ricreando.

Inizia a creare il primo esempio

Il primo esempio che ti mostriamo come ricreare è quello nella schermata di stampa sopra. Puoi vedere che il modulo di attivazione sembra essere a schermo intero. Anche se potrebbe sembrare così, abbiamo solo creato un modulo di adesione trasparente e modificato i colori di sfondo.

Aggiungi il modulo di adesione

Iniziamo aggiungendo un nuovo modulo di adesione al tuo sito Web accedendo alla dashboard di WordPress > Bloom > Fai clic su "Nuovo optin" nell'angolo destro > Seleziona "Pop up".

Digita un nome per il modulo e seleziona il tuo provider di posta elettronica nella scheda Configurazione. Fatto ciò, puoi andare alla scheda Design. Questa è la scheda principale su cui ci concentreremo in questo post. Seleziona uno dei modelli forniti e continua. Per gli esempi che stiamo facendo, scegliamo il primo della riga.

Impostazioni di progettazione

Quando visualizzi l'anteprima del modulo nella scheda Progettazione senza apportare modifiche, vedrai apparire il seguente modulo di attivazione:

Sembra abbastanza diverso da come sarà il risultato, ma puoi anche notare che la base del modulo di adesione è la stessa.

Titolo e messaggio di attivazione

Ora, per fare in modo che il nostro modulo di attivazione assomigli all'esempio che ti abbiamo mostrato sopra, inizia apportando le seguenti modifiche alle impostazioni di progettazione standard del titolo dell'opzione e del messaggio di adesione all'interno della scheda Progettazione:

• Colore del testo: #FFFFFF
• Stile del testo: grassetto
• Orientamento del testo: al centro

Impostazioni immagine e ottimizzazione dello stile

Scorri verso il basso la stessa scheda e apporta le seguenti modifiche a Impostazioni immagine, Optin Styling e Stile bordo:

• Orientamento immagine: nessuna immagine
• Colore di sfondo: trasparente
• Carattere intestazione: Lato
• Carattere del corpo: Lato
• Colore del testo: testo scuro
• Stile angolo: angoli squadrati
• Orientamento del bordo: bordo superiore + bordo inferiore
• Colore bordo: #FFFFFF
• Stile bordo: bordo tratteggiato

Stile del bordo, impostazione del modulo e stile del modulo

Continua a scorrere verso il basso e apporta le seguenti modifiche anche all'impostazione del modulo e allo stile del modulo:

• Orientamento modulo: modulo in basso
• Nome Campo/i: Nessun campo Nome
• Testo dell'e-mail: E-mail
• Testo del pulsante: ISCRIVITI!
• Orientamento campo modulo: campi modulo impilati
• Stile angolo campo modulo: angoli arrotondati
• Colore testo modulo: testo chiaro
• Colore di sfondo del modulo: trasparente
• Colore pulsante: #6a18a0
• Colore del testo del pulsante: chiaro

Stile del bordo del modulo

L'ultima modifica manuale che dovrai apportare al modulo di attivazione è la scelta dello stile del bordo del modulo che è, in questo caso, una linea retta.

CSS personalizzato

Infine, dobbiamo apportare alcune modifiche CSS al modulo per impostare tutto a posto. Copia e incolla le seguenti righe di codice nel campo CSS personalizzato:

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Modifica il codice in base al tuo modulo di adesione a Bloom

Nel codice che abbiamo condiviso con te, dovrai apportare tre modifiche. Alcune classi CSS si applicano solo a un modulo di attivazione, ecco perché avremo bisogno di sapere su quale modulo di attivazione stiamo lavorando. L'unica cosa che dovrai fare è cambiare un numero tre volte:

Il numero alla fine della parte evidenziata nella schermata di stampa sopra è 6 perché è il sesto della riga:

Quindi, a seconda della posizione che ha all'interno del tuo elenco di moduli, dovrai modificare il numero.

Risultato finale

Se visualizzi l'anteprima del tuo modulo di attivazione ora, noterai che tutte le modifiche sono state apportate e che il tuo modulo di attivazione è simile a questo:

Impostazioni di visualizzazione

Ora puoi andare alle impostazioni di visualizzazione e apportare le modifiche necessarie per impostare il modulo di attivazione di Bloom. Non entreremo in dettagli più approfonditi poiché questo post tratterà solo la parte di progettazione di questi moduli di attivazione.

Inizia a creare il secondo esempio

Il prossimo esempio che ti mostreremo non è a schermo intero ma a larghezza intera. Per dimostrare come possiamo ottenere il risultato, utilizzeremo lo stesso modulo di attivazione dell'esempio precedente, ma apporteremo alcune piccole modifiche e aggiungeremo un codice CSS diverso.

Impostazioni di progettazione

Ci sono solo tre cose che dovremo fare in modo diverso all'interno delle Impostazioni di progettazione integrate. Ricordare; stiamo utilizzando il modulo di attivazione che abbiamo creato nell'esempio precedente. A parte le tre cose che menzioneremo, si applicano le stesse impostazioni integrate del primo esempio. La prima cosa che devi fare è impostare l'orientamento del bordo su "Nessun bordo".

Scorri verso il basso e seleziona "Testo scuro" per Colore testo modulo e usa "#724501" come Colore pulsante.

CSS personalizzato

Infine, dovremo aggiungere alcune righe di codice CSS alla casella CSS personalizzato:

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Sostituisci le immagini di sfondo

L'ultima cosa che devi fare è sostituire le immagini di sfondo che vengono utilizzate da uno degli URL nella cartella wp-content o altrove. Il primo URL contrassegnato nella schermata di stampa di seguito si applica al desktop e il secondo a tablet e telefono.

Risultato finale

E hai finito! Il tuo secondo modulo di attivazione dovrebbe ora assomigliare a questo:

Pensieri finali

Le possibilità che hai con bloom per creare bellissimi moduli opt-in con cui i tuoi utenti interagiranno sono infinite. Quelli che ti abbiamo mostrato come realizzare in questo post sono solo un esempio di quanto puoi diventare creativo. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!