Crea una sezione di contatto mobile con Divi Scroll Motion Effects

Ogni sito Web ha bisogno di una sezione di contatto, ma ciò non significa che devi scegliere un design standard. Con gli effetti di scorrimento di Divi, puoi creare una sezione di contatto mobile che si distinguerà. Migliora l'interazione dell'utente con un layout della sezione dei contatti a scorrimento verticale che inviterà i visitatori a interagire con il tuo modulo di contatto. In questo post, ti mostreremo come creare una sezione di contatto mobile a larghezza intera che puoi aggiungere a qualsiasi pagina. Potresti anche aggiungerlo nella parte superiore di un piè di pagina a livello di sito con Divi Theme Builder.

Di seguito troverai una cartella scaricabile gratuitamente con il layout JSON da caricare nella tua libreria Divi. Abbiamo anche incluso un modello PSD per aiutarti a ricreare lo sfondo della mappa, oltre a un SVG del segnaposto della mappa in modo da poterlo personalizzare con i tuoi colori.

Arriviamo ad esso!

Anteprima

Prima di iniziare a creare il layout del modulo di contatto, dai un'occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE la sezione dei contatti mobili

Per mettere le mani sul layout della sezione dei contatti mobile gratuito, 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 i file

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.

SCARICA

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!

1. Crea lo sfondo della mappa per la sezione dei contatti mobili

Apri Google Maps

Il primo passo per questo tutorial è creare lo sfondo della mappa in bianco e nero. Per creare il tuo, segui i passaggi seguenti:

• Innanzitutto, apri Google Maps e cerca il tuo indirizzo.
• Quando viene caricato, rimpicciolisci in modo da poter vedere un'ampia sezione della città o delle strade intorno al tuo indirizzo.

• Quindi, posiziona la mappa in modo che la tua posizione sia nel quadrante in alto a destra della mappa.
• Quindi, rimuovere il perno di posizione.
• Infine, fai uno screenshot della mappa evitando le linguette agli angoli.

Personalizza il Pin

Nei file scaricabili sopra, abbiamo incluso un file SVG del pin che abbiamo usato nel design. Puoi usarlo e cambiare i colori con il tuo editor di grafica vettoriale. Abbiamo anche incluso un PNG trasparente se vuoi cambiare il colore in Photoshop.

Segui questi passaggi per il pin SVG:

• Innanzitutto, scarica i file gratuiti all'inizio di questo tutorial e decomprimi la cartella.
• In secondo luogo, apri la grafica pin SVG con Illustrator, Inkscape o il tuo editor di vettori preferito.
• Terzo, cambia il colore in modo che corrisponda al tuo marchio o sito web.
• Infine, salva come PNG trasparente.

Modifica su Photoshop

Ora è il momento di mettere tutto insieme. Innanzitutto, apri la mappa nel tuo editor grafico preferito per desaturare il colore. Secondo, aggiungi il perno.

Se hai Photoshop, puoi utilizzare il file PSD che abbiamo incluso e aggiungere semplicemente lo screenshot della mappa all'oggetto intelligente nel secondo livello.

Per utilizzare l'oggetto intelligente, segui questi passaggi

• Apri il file PSD.
• Fare doppio clic sul livello con il colore arancione. Verrà aperta una nuova finestra.
• Sostituisci la nostra mappa con la tua.
• Non dimenticare di fare clic su Salva.
• Torna alla finestra di modifica principale e fai clic su Salva anche lì.
• Esporta per il web come .jpg.

Se non hai Photoshop, segui questi passaggi:

• Innanzitutto, crea un nuovo progetto a 1920 px x 700 px.
• In secondo luogo, posiziona lo screenshot della mappa sulla tela. Assicurati di mantenere la tua posizione nel quadrante in alto a destra, un po' più in alto rispetto al centro.
• In terzo luogo, l'utilizzo delle regolazioni dell'immagine trasforma l'immagine in bianco e nero.
• Inoltre, aggiungi un po' di contrasto.
  1. Luminosità: -25
  2. Contrasto: -50
• Quindi, fai clic sul livello dell'immagine e aggiungi la trasparenza a circa il 55%.
• Se creerai questo design su una pagina web con uno sfondo non bianco, aggiungi uno strato bianco sotto l'immagine per mantenere il colore di base bianco, indipendentemente dal colore di sfondo del sito web.
• Continua posizionando il segnaposto sulla tua posizione. Ridimensiona a circa 90 px di altezza. Lascialo sullo strato più in alto.
• Infine, scarica come .jpg.

2. Crea la struttura degli elementi

Aggiungi nuova sezione

Sfondo

Ora è il momento di iniziare a costruire la sezione dei contatti mobili con Divi Builder! La prima cosa che faremo è aprire una pagina nuova o esistente e aggiungere una nuova sezione.

Nella scheda contenuto, aggiungi lo sfondo della mappa che hai creato in Photoshop.

• Immagine di sfondo: la tua mappa modificata

Spaziatura

Quindi, personalizza le impostazioni di spaziatura della sezione nella scheda Progettazione.

• Margine superiore e inferiore: 50 vh
• Imbottitura inferiore: 0vw

Visibilità

Quindi, regola gli overflow su visibile.

• Overflow orizzontale e verticale: visibile

Posizione

Infine, imposta l'indice Z della sezione su 10.

• Indice Z: 10

Aggiungi nuova riga

Struttura della colonna

Ora è il momento di aggiungere alcuni elementi. Innanzitutto, aggiungi una riga con 2 colonne.

Dimensionamento

Apri le impostazioni della riga e regola le dimensioni come segue.

• Larghezza
  • Desktop: 90%
  • Tablet e telefono: 80%
• Larghezza massima: 90%

Visibilità

Fare clic sulla scheda Avanzate e successivamente regolare gli overflow.

• Overflow orizzontale e verticale: visibile

Posizione

Completare le impostazioni di riga modificando le impostazioni di posizione.

• Posizione: Parente
• Origine offset: in alto a sinistra
• Offset verticale
  • Desktop: -8vw

Impostazioni colonna 1

Sfondo

Prima di aggiungere moduli, dovremo dare uno stile alle singole colonne. Aggiungi un colore di sfondo alla colonna 1.

• Colore solido: #25274d

Spaziatura

Successivamente, regola le impostazioni di spaziatura.

• Imbottitura superiore e inferiore
  • Desktop e tablet: 7vw
• Imbottitura sinistra e destra
  • Desktop: 3vw
  • Tablet e telefono: 6vw

Frontiera

Quindi, aggiungi alcuni angoli arrotondati alle impostazioni del bordo.

• Angoli arrotondati: 10px tutti e quattro gli angoli

Effetti di scorrimento

Ultimo ma non meno importante, usa un po' di movimento verticale nelle impostazioni degli effetti di scorrimento. Questo ci aiuterà a creare un effetto fluttuante.

• Effetti di trasformazione scorrimento: movimento verticale
• Imposta movimento verticale / Desktop
  • Compensazione iniziale: 4
  • Scostamento medio: 0 (al 50%)
  • Compensazione finale: -4
• Imposta movimento verticale / Tablet e telefono
  • Compensazione iniziale: 4
  • Scostamento medio: 0 (al 40% e al 60%)
  • Scostamento finale: -3
• Attivazione effetto movimento: mezzo dell'elemento

Impostazioni colonna 2

Posizione

Ora, sulle impostazioni della seconda colonna. Regolare le impostazioni di posizione di conseguenza.

• Posizione: Parente
• Origine offset: in alto a sinistra
• Offset verticale
  • Desktop: 25vw

Effetti di scorrimento

Stiamo aggiungendo anche un movimento verticale a questa colonna.

• Effetti di trasformazione scorrimento: movimento verticale
• Imposta movimento verticale / Desktop
  • Scostamento iniziale: 2
  • Scostamento medio: 0 (al 50%)
  • Compensazione finale: -2
• Imposta movimento verticale / Tablet e telefono
  • Compensazione iniziale: 0
  • Scostamento medio: 0 (al 50%)
  • Compensazione finale: -2
• Attivazione effetto movimento: parte superiore dell'elemento

Aggiungi modulo di testo alla colonna 1

Contenuto

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi del contenuto H2 a tua scelta.

Testo dell'intestazione

Passa alla scheda Design e modella il testo H2 come segue.

• Livello di intestazione: H2
• Carattere: Palanquin Dark
• Peso del carattere: grassetto
• Stile carattere: TT
• Colore: giallo #ffd868
• Taglia
  • Desktop: 5vw
  • Tablet: 10vw
  • Telefono: 12vw
• Spaziatura lettere: 4px

Aggiungi il modulo del modulo di contatto alla colonna 1

Contenuto

Sotto il modulo di testo, aggiungi un modulo di contatto. Questi sono i campi che stiamo utilizzando:

• Nome
• E-mail
• Soggetto
• Messaggio

Protezione da spam

Prima di modellare il modulo del modulo di contatto. attiva la protezione antispam e collega il tuo account ReCaptcha.

• Utilizzare un servizio di protezione dallo spam: Sì
• Fornitore di servizi: ReCaptcha
• Seleziona Account

Campi

Passa alla scheda Progettazione e modella i campi come segue.

• Colore di sfondo: blu scuro #25274d
• Colore del testo: grigio pallido #d1d1d1
• Colore di sfondo della messa a fuoco: blu scuro #25274d
• Colore del testo di messa a fuoco: grigio pallido # d1d1d1
• Carattere: Palanquin
• Stile: TT
• Dimensione del testo
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefono: 3vw
• Spaziatura lettere: 1px

Pulsante

Quindi, modella il pulsante.

• Stili personalizzati: Sì
• Dimensione del testo: 20px
• Colore del testo: blu scuro #25274d
• Colore di sfondo: giallo #ffd868
• Raggio del bordo: 7px
• Colore icona: blu scuro #25274d
• Margine superiore: 5px

Dimensionamento

Stiamo modificando le impostazioni di dimensionamento successivo.

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Aggiungeremo anche un po' di imbottitura superiore.

• Imbottitura superiore: 4vw

Frontiera

Completa le impostazioni del modulo personalizzando le impostazioni del bordo.

• Ingressi Angoli arrotondati: 6px tutti e quattro gli angoli
• Inserisce gli stili del bordo: tutti e quattro i lati
• Input Larghezza bordo: 2px
• Colore bordo ingressi: giallo #ffd868

Aggiungi il modulo Segui social media alla colonna 2

Contenuto

Passa alla colonna 2 e aggiungi un modulo di social media. Usa tutti i social network di cui hai bisogno.

• Facebook
• Twitter
• Linkedin

Collegamento

Prima di applicare lo stile, aggiungi i collegamenti alle reti corrispondenti.

Sfondo dell'oggetto

Ora apri il primo social network e cambia il colore di sfondo.

• Colore: blu scuro # 25274d

Icona elemento

Nella scheda Progettazione dello stesso elemento, modificare le impostazioni dell'icona come segue.

• Colore: giallo #ffd868
• Dimensione carattere icona
  • Desktop e tablet: 31 pixel
  • Telefono: 26px

Spaziatura elemento

Quindi, aggiungi un piccolo margine per separare le icone l'una dall'altra.

• Margine destro: 1vw

Copia e incolla stili oggetto

Per applicare uno stile ai restanti social network, torna alla finestra del contenuto principale e copia gli stili degli elementi della prima icona. Quindi, incolla gli stili degli elementi sui restanti social network.

Allineamento

Passa alla scheda di progettazione principale e assicurati che il modulo sia allineato a sinistra.

• Allineamento del modulo: a sinistra

Dimensionamento

Quindi, regolare il dimensionamento del modulo.

• Larghezza: 100%

Spaziatura

Cancella anche tutto il riempimento predefinito.

• Imbottitura superiore, inferiore, sinistra e destra: 0vw

Frontiera

Infine, aggiungi alcuni angoli arrotondati nelle impostazioni del bordo. Questo regolerà i bordi per tutte le icone contemporaneamente.

• Angoli arrotondati
  • In alto a sinistra e a destra: 7px
  • In basso a sinistra e a destra: 0px

Aggiungi modulo di testo alla colonna 2

Contenuto

Sotto il modulo dei social media, aggiungi un altro modulo di testo. Aggiungi alcuni contenuti a tua scelta. Abbiamo aggiunto due indirizzi, un numero di telefono e un'e-mail. Usa il grassetto sul titolo di ogni articolo tutto maiuscolo.

• SEDE : 1587 Sukhumvit Soi 21, Bangkok, Thailandia.
• POSIZIONE DEL VENDITA : Emporium Mall, 2nd Floor
• TELEFONO: (321) 564 2398
• EMAIL: [email protetta]

Sfondo

Modifica il colore di sfondo del modulo.

• Colore: blu scuro #25274d

Testo

Passa alla scheda Design e modella il testo.

• Carattere: Palanquin
• Colore: giallo #ffd868
• Dimensioni: 18px

Spaziatura

Aggiungi anche alcuni valori di spaziatura personalizzati.

• Margine superiore
  • Desktop: -60 px
  • Tablet e telefono: -50px
• Imbottitura superiore, inferiore, sinistra e destra
  • Desktop: 3vw
  • Tablet: 6vw
  • Telefono: 8vw

Frontiera

E completa il modulo aggiungendo angoli arrotondati nelle impostazioni del bordo. Questo è tutto!

• Angoli arrotondati: 10 px in alto a destra, in basso a sinistra e in basso a destra.

Anteprima

Ora che abbiamo finito di ricreare la sezione dei contatti mobili, dai un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Hai finito di ricreare il layout della sezione del contatto mobile!

L'uso dei nuovi effetti di scorrimento Divi aiuta a trasformare qualsiasi layout standard in un design eccezionale. Creando il tuo sfondo della mappa, hai un maggiore controllo sull'aspetto del design finito. Se hai domande o suggerimenti, lascia un commento nella sezione commenti qui sotto!