Creazione di più moduli di contatto mirati su Hover in un unico design con Divi
Pubblicato: 2019-07-22Il modo in cui visualizzi i moduli di contatto sul tuo sito web può sicuramente aiutare ad aumentare i tassi di conversione. Oltre a creare moduli di contatto belli e intuitivi, puoi anche affrontarlo in modo più mirato. In questo post, ti mostreremo come creare un design con più moduli di contatto che appaiono a seconda del servizio a cui sono interessati i tuoi visitatori. Potrai anche scaricare il file JSON gratuitamente!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout dei moduli di contatto mirati
Per mettere le mani sul layout dei moduli di contatto mirati gratuiti, dovrai prima scaricarlo utilizzando il pulsante qui sotto. 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!
Una volta caricato il layout sulla tua pagina, dovrai comunque aggiungere il codice CSS alla pagina su cui stai lavorando. Puoi trovare il codice CSS alla fine di questo tutorial.
Iscriviti al nostro canale Youtube
Iniziamo a ricreare!
Aggiungi la sezione n. 1
Apri una pagina nuova o esistente e aggiungi una nuova sezione normale.
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Modulo Aggiungi testo
Aggiungi contenuto H2
Aggiungi un modulo di testo alla colonna con un contenuto H2 a tua scelta.
Impostazioni testo H2
Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:
- Peso carattere titolo 2: Ultra grassetto
- Stile carattere titolo 2: maiuscolo
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #000000
- Intestazione 2 Dimensione testo: 6vw
- Intestazione 2 Spaziatura lettere: -0.4vw
- Altezza della linea di intestazione 2: 0,8 em
Spaziatura
Aggiungi anche un margine superiore e inferiore personalizzato.
- Margine superiore: 2vw
- Margine inferiore: 2vw
Aggiungi sezione #2
Sfondo sfumato
Aggiungi un'altra sezione subito sotto la precedente e applica il seguente sfondo sfumato (o qualsiasi sfondo sfumato a tua scelta):
- Colore 1: #30fff1
- Colore 2: #4635ff
- Direzione del gradiente: 110 gradi
- Posizione finale: 85%
Divisore superiore
Passa alla scheda Design e aggiungi un divisore superiore.
- Stile divisore: trova nell'elenco
- Disposizione dei divisori: sotto il contenuto della sezione
Divisore inferiore
Aggiungi anche un divisore inferiore.
- Stile divisore: trova nell'elenco
- Disposizione dei divisori: sotto il contenuto della sezione
Dimensionamento
Modificare l'altezza nelle impostazioni di dimensionamento successivo.
- Altezza: 200 px
Spaziatura
Aggiungi successivamente alcune impostazioni di spaziatura personalizzate.
- Margine inferiore: 30vw (desktop), 45vw (tablet), 200vw (telefono)
- Imbottitura superiore: 0vw
- Imbottitura inferiore: 0vw
Classe CSS
Più avanti nel post, aggiungeremo del codice CSS per far funzionare l'effetto. In preparazione, aggiungeremo una classe CSS alla sezione.
- Classe CSS: sezione contatti
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
traboccamento
Apri le impostazioni della riga e nascondi gli overflow.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
transizioni
Rimuovi anche la durata della transizione.
- Durata della transizione: 0 ms
Aggiungi modulo Blurb
Aggiungi titolo alla casella del contenuto
È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Blurb e inserisci un titolo a tua scelta che rappresenti uno dei tuoi servizi.
Seleziona icona
Seleziona un'icona successiva.
Colore di sfondo predefinito
Continua aggiungendo un colore di sfondo predefinito.
- Colore di sfondo: #ffffff
Colore di sfondo al passaggio del mouse
Cambia il colore di sfondo al passaggio del mouse.
- Colore di sfondo: #000000
Impostazioni predefinite dell'icona
Passa alla scheda Design e modifica le impostazioni dell'icona di conseguenza:
- Colore icona: #000000
- Usa dimensione carattere icona: Sì
- Dimensione carattere icona: 2.5vw (desktop), 5vw (tablet), 7vw (telefono)
Impostazioni dell'icona al passaggio del mouse
Modifica il colore dell'icona al passaggio del mouse.
- Colore icona: #ffffff
Impostazioni predefinite del testo del titolo
Apri le impostazioni del testo del titolo e applica le seguenti modifiche:
- Peso del carattere del titolo: Ultra grassetto
- Stile carattere del titolo: maiuscolo
- Allineamento del testo del titolo: al centro
- Colore del testo del titolo: #000000
- Dimensione del testo del titolo: 0.9vw (desktop), 1.8vw (tablet), 3vw (telefono)
Passa il mouse sulle impostazioni del testo del titolo
Cambia il colore del testo del titolo al passaggio del mouse.
- Colore del testo del titolo: #ffffff
Dimensionamento
Successivamente, modifica la larghezza tra le diverse dimensioni dello schermo.
- Larghezza: 10vw (desktop), 17vw (tablet), 30vw (telefono)
- Allineamento del modulo: Centro
Spaziatura
E aggiungi alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura.
- Margine superiore: 4vw
- Margine inferiore: 4vw
- Imbottitura superiore: 2vw (Desktop), 3vw (Tablet), 6vw (Telefono)
- Imbottitura inferiore: 2vw (desktop), 3vw (tablet), 6vw (telefono)
Frontiera
Stiamo anche trasformando il modulo in un cerchio aggiungendo "50vw" a ciascuno degli angoli nelle impostazioni del bordo.
Scatola ombra
Aggiungi anche un'ombra di scatola.
Scala di trasformazione predefinita
Passa alle impostazioni di trasformazione e assicurati che i valori di scala di trasformazione predefiniti rimangano "100%".
Scala di trasformazione al passaggio del mouse
Modifica questi valori al passaggio del mouse.
- Fondo: 120%
- Destra: 120%
Aggiungi modulo di contatto
Crea campi nome e email a larghezza intera
Il secondo modulo di cui abbiamo bisogno in questa riga è un modulo di contatto. Dopo aver aggiunto il modulo di contatto, apri i campi del nome e dell'email e rendili a larghezza intera.
- Crea larghezza intera: Sì
Rimuovi il campo del messaggio e inserisci tre campi di input per domande specifiche del servizio
Aggiungi successivamente tre domande che si applicano a quel servizio specifico.
Disabilita Captcha
Disabilita anche l'opzione captcha.
- Mostra Captcha: No
Impostazioni dei campi
Passa alla scheda Progettazione e modifica le impostazioni dei campi di conseguenza:
- Imbottitura superiore dei campi: 0.6vw (desktop), 0.9vw (tablet), 1.5vw (telefono)
- Imbottitura inferiore dei campi: 0.6vw (desktop), 0.9vw (tablet), 1.5vw (telefono)
- Dimensioni del testo dei campi: 0.8vw (desktop), 1.6vw (tablet), 2.3vw (telefono)
Impostazioni dei pulsanti
Modificare l'aspetto del pulsante successivo.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #000000
- Larghezza bordo pulsante: 0px
- Peso del carattere del pulsante: Ultra grassetto
- Stile carattere pulsante: maiuscolo
Spaziatura
Aggiungi anche alcuni valori di riempimento.
- Imbottitura superiore: 2vw
- Imbottitura inferiore: 2vw
- Imbottitura sinistra: 2vw
- Imbottitura destra: 2vw
Impostazioni bordo
Ultimo ma non meno importante, vai alle impostazioni del bordo e aggiungi "10px" a ciascuno degli angoli.
Clona riga tre volte
Una volta completata la prima riga, puoi andare avanti e clonarla tre volte.
Cambia contenuto e icona Blurb per ogni riga duplicata
Assicurati di cambiare il titolo e l'icona del blurb per ogni duplicato.
Modifica le domande specifiche del servizio per ogni riga duplicata
Modifica anche le domande specifiche del modulo di contatto.
Impostazioni riga aggiuntive
Altezza predefinita
Apri di nuovo le impostazioni della prima riga, vai alle impostazioni di dimensionamento e modifica l'altezza tra le diverse dimensioni dello schermo.
- Altezza: 18vw (desktop), 27vw (tablet), 38vw (telefono)
Altezza al passaggio del mouse
Riporta l'altezza in automatico al passaggio del mouse.
- Altezza: auto
Estendi le impostazioni di ridimensionamento delle righe a tutte le righe della sezione
Dopo aver modificato le impostazioni di dimensionamento per la prima riga, puoi estendere le impostazioni a tutte le righe della sezione.
Posiziona le righe una accanto all'altra su desktop e tablet
Apri le impostazioni della pagina
Ultimo ma non meno importante, posizioneremo tutte e quattro le righe una accanto all'altra su tablet e desktop. Per farlo, apri le impostazioni della pagina.
Inserisci CSS personalizzato
Passa alla casella CSS personalizzata e aggiungi le seguenti righe di codice CSS:
@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come creare più moduli di contatto mirati in un unico design. Questo è un ottimo modo per saperne di più sui tuoi visitatori e a quale particolare servizio sono interessati. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.