Come creare una sezione del modulo di contatto a schermo intero reattiva con un'animazione di scorrimento con ingrandimento
Pubblicato: 2020-05-01Per molti siti web, la sezione contatti della pagina è la destinazione ideale per i visitatori. Per affermare l'ovvio, la maggior parte delle persone/aziende desidera che i propri visitatori li contattino per ulteriori affari. Ecco perché è importante ottimizzare quella sezione per una migliore conversione. Un modo per farlo è creare un layout del modulo di contatto a schermo intero che offra all'utente una visione senza distrazioni delle informazioni di contatto.
In questo tutorial, creeremo un layout di sezione del modulo di contatto a schermo intero che puoi utilizzare su qualsiasi pagina del tuo sito Divi. Personalizzeremo anche il layout con utili impostazioni di design reattivo che manterranno il layout a schermo intero perfetto anche sui piccoli telefoni.
Iniziamo!
Sbirciata
Ecco una rapida occhiata alla sezione del modulo di contatto a schermo intero reattivo che creeremo.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
https://youtu.be/5Qt9J95uME8
Iscriviti al nostro canale Youtube
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder. Ricorda che questo è un layout di sezione, quindi dovrai aggiungere questo layout a una pagina, post o modello quando crei una nuova sezione nel builder.
Vedi la parte inferiore del post per come aggiungere il layout della sezione a una pagina.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
Costruire il layout della sezione dei contatti
Per iniziare, aggiungeremo un layout predefinito a una nuova pagina utilizzando Divi Builder. Ciò accelererà il design in modo che possiamo concentrarci su ciò che serve per creare una sezione (con un modulo di contatto) a schermo intero e reattiva. Quindi aggiungeremo l'effetto di scorrimento per tirare tutto insieme alla fine.
Aggiunta di layout predefiniti
Dopo aver fatto clic per modificare la pagina utilizzando Divi builder, seleziona l'opzione "Scegli un layout predefinito".
Quindi trova il layout della pagina di contatto di Business Coach e fai clic sul pulsante "Usa questo layout".
Impostazioni della sezione
Una volta che il layout è stato caricato nella pagina, apri le impostazioni della sezione nella parte superiore del layout e aggiorna quanto segue:
Sfondo
- Colore di sfondo: #3550a0
Altezza della sezione e imbottitura
- Altezza minima: 600 px
- Altezza: 104vh
- Imbottitura: 0px in alto, 0px in basso
Una delle chiavi di questo progetto è impostare l'altezza su almeno 100vh (100% dell'altezza della finestra). Ciò assicurerà che la sezione occuperà l'intera altezza della finestra del browser. Stiamo aggiungendo un'altezza di 104 vh in modo da avere un po' di spazio in più per quando l'utente scorre la sezione.
L'impostazione dell'altezza minima su 600 px è un'altezza di fallback in modo che nessuno degli elementi all'interno della sezione sia nascosto se mai l'altezza del browser è troppo piccola. Questo dovrà essere regolato in base alla quantità di contenuto che abbiamo all'interno della sezione.
CSS personalizzato
Per centrare verticalmente le righe all'interno della sezione (ottimo per le sezioni a schermo intero), aggiungi il seguente CSS personalizzato come elemento principale.
display:flex;flex-direction: column;
Aggiunta del modulo di contatto
Per aggiungere il modulo di contatto alla sezione, trascinalo sotto il modulo di testo esistente dalla sezione predefinita sottostante.
Elimina sezioni extra dal layout predefinito
Quindi elimina la sezione inferiore in modo che rimanga solo la sezione che stiamo costruendo.
Personalizzazione degli elementi della sezione per il design reattivo a schermo intero
Ora che il layout della sezione è stato completato, siamo pronti per iniziare a personalizzare il contenuto (o gli elementi figlio) della sezione con un design reattivo che si adatterà bene per una sezione a schermo intero su tutti i dispositivi.
Useremo l'unità di lunghezza vh per la maggior parte delle dimensioni del testo e della spaziatura per ciascuno degli elementi. Ciò contribuirà a mantenere gli elementi in vista con il layout a schermo intero anche su brevi display del telefono.
Impostazioni riga
Apri le impostazioni della riga e aggiorna quanto segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Imbottitura: 0px in alto, 0px in basso, 7vh a sinistra, 7vh a destra
Impostazioni del modulo di testo
Apri le impostazioni del modulo di testo e aggiorna quanto segue:
Dimensione del testo dell'intestazione
- Dimensione del testo dell'intestazione: 7vh (desktop), 5vh (tablet e telefono)
- Intestazione 3 Dimensioni testo: 2vh (desktop), 3vh (tablet), 12px (telefono)
Margine
- Margine: 3vh in basso
Impostazioni modulo di contatto
Ora continueremo la nostra regolazione del design reattivo sul modulo di contatto utilizzando l'unità di lunghezza vh. Apri le impostazioni del modulo di contatto e aggiorna quanto segue:
Impostazioni sul campo
- Margine campi: 3vh
- Imbottitura Fleids: 2vh sopra, 2vh sotto
- Dimensioni del testo dei campi: 2,5 vh
Dimensione del testo del pulsante
- Dimensione del testo del pulsante: 2vh
Larghezza
- Larghezza massima: nessuna
Aggiunta degli effetti di scorrimento
L'ultimo passaggio del design è l'effetto di scorrimento che trasformerà la sezione del modulo di contatto in una visualizzazione a schermo intero durante lo scorrimento della pagina. Per fare ciò, apri ancora una volta le impostazioni della sezione e aggiorna quanto segue:
Nella scheda Ridimensionamento su e giù...
- Abilita ridimensionamento su e giù: S
- Scala iniziale: 60% (allo 0%)
- Scala media: 60% (al 70%)
- Scala finale: 100% (al 100%)
Questo completa il design della sezione del modulo di contatto a schermo intero. Ma prima di poter visualizzare il risultato finale, aggiungiamolo prima a una delle pagine del sito web.
Utilizzo della sezione del modulo di contatto a schermo intero sul tuo sito web
Salva il layout della sezione nella libreria Divi
Prima di poter aggiungere questa sezione a un'altra pagina del nostro sito Web, dobbiamo prima salvare il layout della sezione nella libreria Divi.
Per fare ciò, fare clic sull'icona "Aggiungi alla libreria" nel menu della sezione. Quindi dai un nome al layout e fai clic sul pulsante "Salva nella libreria".
Ora il layout della sezione sarà disponibile all'interno della Divi Library per un uso futuro.
Aggiungi il layout della sezione alla pagina dalla libreria Divi
Per aggiungere il layout della sezione del modulo di contatto a schermo intero a una pagina (o post) in Divi, apri per modificare la pagina utilizzando Divi Builder.
Quindi fare clic per aggiungere una nuova sezione da qualche parte nella pagina.
Nel popup Inserisci sezione, fai clic sulla scheda Aggiungi da libreria e seleziona il layout della sezione salvata dall'elenco (il mio si chiama "Modulo di contatto a schermo intero").
Risultato finale
Ora diamo un'occhiata al risultato finale.
Eccolo sul desktop.
Eccolo su tablet (iPad Pro in realtà).
Eccolo sul telefono (iPhone 5 in realtà). Nota che anche se lo schermo è molto corto, il contenuto si adatta comunque alla visualizzazione a schermo intero.
Pensieri finali
Spero che la sezione del modulo di contatto a schermo intero ti aiuti a creare un modulo/sezione di contatto ad alta conversione per il tuo sito web. La cosa importante da tenere a mente è assicurarsi sempre e mantenere il contenuto abbastanza conciso da poter essere visualizzato bene anche sui piccoli telefoni. Alcune delle principali tecniche di design reattivo utilizzate in questo layout torneranno utili anche quando si apportano modifiche a qualsiasi design nel tuo sito web.
Per ulteriori informazioni su questo argomento, consulta il nostro post su come utilizzare le unità di lunghezza vw e vh per progettare un modulo di contatto reattivo in Divi.
Non vedo l'ora di sentirti nei commenti.
Saluti!