Divi: come creare un modulo di contatto che appare dopo aver cliccato su un pulsante

Vuoi creare un file modulo di contatto in Divi che appare dopo aver fatto clic su un pulsante?

In questo tutorial Divi, ti mostreremo come creare un file modulo di contatto che appare dopo aver fatto clic su un pulsante utilizzando nient'altro che Divi, codice jQuery e codice CSS.

Leggi anche la nostra guida su: Divi: come creare un footer appiccicoso con effetto "Reveal".

È un ottimo modo per mantenere il Visitatori vostre sito web incentrato sull'azione in cui si sono impegnati con il semplice clic di un pulsante. Non li porta a una pagina diversa.

Panoramica

Di seguito, puoi dare una rapida occhiata a ciò che creeremo, quindi salta nel tutorial!

Anteprima su PC

Anteprima su telefono e tablet

Crea una nuova pagina con un layout predefinito

Iniziamo utilizzando un layout predefinito dalla libreria Divi. Per questo esempio utilizzeremo la pagina dei contatti del Pacchetto di layout del prodotto di bellezza .

Aggiungi una nuova pagina al tuo sito web e assegnagli un titolo, quindi seleziona l'opzione "Usa Divi Builder".

Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona 'Scegli la disposizione'.

Trova e seleziona la Home page del layout 'Azienda di Interior Design'.

Seleziona "Scegli la disposizione' per aggiungere il layout alla tua pagina.

Ora siamo pronti per continuare il nostro tutorial.

Crea una sezione con il modulo Button

La prima cosa che dovremo fare è aggiungere una nuova sezione in cui posizioniamo il pulsante che consentirà il modulo di contatto da visualizzare. 

Vedi anche: Divi: come creare un piè di pagina personalizzato

Basta aggiungere una sezione standard

Quindi, seleziona una riga a una colonna. 

Dopo averlo fatto, aggiungi un modulo Button ad esso.

Puoi personalizzare il pulsante come preferisci, ma devi assicurarti che l'URL del pulsante inizi con "#" seguito da qualcos'altro. Non puoi semplicemente lasciarlo vuoto o semplicemente usare il carattere '#'. Aggiungendo '#' e testo, la pagina non si sposterà dopo aver fatto clic sul pulsante. Se lo lasci vuoto, la pagina si aggiornerà al clic. E se usi solo '#', verrai inviato in cima alla pagina.

La prossima cosa importante che dovremo fare è assegnare una classe CSS al pulsante. Utilizzeremo questa classe CSS più avanti in questo articolo nel codice jQuery per assicurarci che il modulo di contatto venga visualizzato dopo aver fatto clic. La classe che dovremo assegnare al pulsante è semplicemente "pulsante".

• Classe CSS: pulsante

Crea un modulo di contatto per la versione PC

La prossima cosa che dovremo fare è creare il modulo di contatto desktop che apparirà quando qualcuno farà clic sul pulsante che abbiamo creato nella parte precedente di questo articolo. Più avanti in questo articolo, ti mostreremo anche come creare la versione mobile.

Aggiungi una nuova sezione standard

Inizia aggiungendo una nuova sezione standard alla pagina su cui stai lavorando. Nelle impostazioni della sezione, vai alla scheda Avanzate aggiungi "popup" al campo Classe CSS. 

Scorri verso il basso la stessa scheda e inserisci le seguenti righe di codice CSS nel campo Prima della sottocategoria CSS personalizzato:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Aggiungendo questo, ci assicuriamo che la sezione occupi l'intera scheda. Puoi regolare il colore di sfondo nel codice CSS per creare la sovrapposizione di sfondo desiderata. In questo caso utilizziamo il colore nero con una certa trasparenza. In questa stessa scheda, aggiungi anche la seguente riga di codice CSS all'elemento principale:

display: none;

L'ultima cosa che dovremo fare nella scheda Avanzate è disattivare la sezione sul telefono e sul tablet nella sottocategoria Visibilità.

Aggiungi una riga a due colonne

Continua aggiungendo una riga a due colonne e vai alla scheda Style. 

• Usa larghezza grondaia personalizzata: SÌ
• Larghezza massima: 1291px

Immettere i parametri di ciascuna delle colonne.

Modificare i margini interni (superiore, sinistro e destro) come segue:

• Margine interno (in alto, a sinistra, a destra): 30px

Termina andando alla scheda Avanzate. Nell'elemento principale, aggiungi le seguenti righe di codice CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Aggiungi il primo modulo di testo

Dopo aver apportato tutte le modifiche alla sezione e alla riga, è il momento di aggiungere i vari moduli che desideri visualizzare. 

La prima cosa che aggiungeremo è il titolo che appare. Inizia aggiungendo un nuovo modulo Testo alla prima colonna della riga, scrivi il testo nella scheda Contenuto e passare alla scheda Style. 

Nella scheda Stile, abbiamo utilizzato le seguenti impostazioni per la sottocategoria Testo:

• Carattere dell'intestazione: Aragosta
• Intestazione a luce soffusa: testo in grassetto
• Allineamento del testo: grassetto
• Colore del testo dell'intestazione: #002282
• Dimensione testo intestazione: 37px
• Altezza della linea di intestazione: 1,7 em

Aggiungi un secondo modulo di testo

Continua aggiungendo un nuovo modulo Testo e digita il testo che desideri venga visualizzato nella scheda Contenuto. Passa alla scheda Stile e applica le seguenti impostazioni alla sottocategoria Testo:

• Allineamento del testo: centro
• Carattere del testo: Arial
• Dimensione del testo del testo: 13px
• Testo Colore Testo: #002282
• Altezza riga di testo: 1,7 em

Aggiungi un modulo "Seguici sui social network".

Successivamente, aggiungeremo anche il modulo "Seguici sui social media" alla prima colonna. In questo caso, abbiamo scelto tre icone dei social media; Facebook, Twitter e Instagram.

L'ultima cosa che dovremo fare è aggiungere il riempimento (a sinistra) a questo modulo nella scheda Avanzate. Aggiungi la seguente riga di codice CSS all'elemento principale:

padding-left: 40%;

Aggiungi un modulo Modulo di contatto

Quindi possiamo passare alla seconda colonna della riga. In questa colonna, la prima cosa che andremo a posizionare è il modulo Modulo di contatto. 

Per questo esempio abbiamo scelto solo due campi; nome ed e-mail. 

Dopo aver aggiunto il modulo Modulo di contatto, vai alla scheda Stile del modulo Modulo di contatto e apporta le seguenti modifiche alla sottocategoria Campi:

• Campi colore testo: #002282

• Campi dimensione testo: #002282
• Altezza della linea di campo: 1,7 em

Nella stessa scheda, apporta le seguenti modifiche alla sottocategoria Button:

• Usa stili personalizzati per Button: Sì
• Pulsante dimensione testo: 20
• Colore testo pulsante: #FFFFFF
• Pulsante Sfondo: #0086c4

Vedi anche: Come creare un menu scorrevole ea pressione in DIVI

• Larghezza bordo pulsante: 2
• Pulsante Raggio bordo: 3

Passa alla scheda Avanzate e aggiungi un margine del 5%.

Aggiungi un modulo Riepilogo

Un'altra cosa che dovremo aggiungere alla seconda colonna è un modulo Riepilogo. L'unica cosa per cui abbiamo bisogno di questo modulo è l'icona di uscita in alto a destra della finestra popup. Scegli l'icona successiva dall'elenco delle icone e lascia tutto il resto vuoto.

Quindi vai alla scheda Avanzate e digita "chiudi" come classe CSS. 

In questa stessa scheda, aggiungi le seguenti righe di codice all'elemento principale della sottocategoria CSS personalizzata:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Applicare un riempimento sfumato alla linea

Infine, aggiungeremo un bel gradiente di sfondo alla linea. Apri le impostazioni e applica le seguenti modifiche all'opzione dello sfondo sfumato:

• Primo colore sfumato: #FFFFFF
• Secondo colore sfumato: # 0c71c3
• Tipo di gradiente: lineare
• Direzione del gradiente: 124 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Crea un modulo di contatto per tablet e telefono

Ora che abbiamo creato la versione per PC, la versione per tablet e telefono andrà molto più veloce. La maggior parte dei moduli che abbiamo utilizzato per la versione PC sono gli stessi della versione mobile.

Duplica la sezione precedente

Invece di disabilitarlo per telefono e tablet, come abbiamo fatto per la versione PC, disabiliteremo la versione PC nella sottocategoria Visibilità nelle impostazioni del modulo:

Modifica il codice CSS del modulo Riepilogo

Invece di utilizzare il codice desktop, utilizzare invece quanto segue:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Applicare un riempimento sfumato alla linea

Per la versione mobile, utilizziamo diverse impostazioni per lo sfondo sfumato della linea:

• Primo colore sfumato: #FFFFFF
• Secondo colore sfumato: # 0c71c3
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 40%
• Posizione finale: 40%

Aggiungi codice jQuery

L'ultima cosa che dovremo fare per questo tutorial è aggiungere il codice jQuery. Aggiungi un modulo Codice e inserisci il seguente codice JQuery:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Risultato

Se segui il messaggio passo dopo passo, dovresti essere in grado di ottenere il seguente risultato sul computer:

E il seguente risultato su tablet e telefoni:

Scarica DIVI ora!!!

Conclusione

In questo articolo, ti abbiamo mostrato come creare un modulo di contatto con un clic. Usa questo metodo per metterti in contatto con il tuo Visitatori è sottile ma efficace. 

Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...