Ogni sito Web ha bisogno di una sezione di contatto, ma ciò non significa che devi optare per 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 articolo, ti mostreremo come creare una sezione di contatto mobile a larghezza intera che puoi aggiungere a qualsiasi pagina. Puoi persino aggiungerlo nella parte superiore di un piè di pagina a livello di sito con Divi Theme Builder.
Di seguito troverai un file scaricabile gratuitamente con il layout JSON da scaricare nella tua libreria Divi. Abbiamo anche incluso un modello PSD per aiutarti a ricreare lo sfondo della mappa, oltre a un segnaposto SVG in modo da poterlo personalizzare con i tuoi colori.
Crea una struttura di elementi
In questo progetto, utilizzeremo un'immagine di sfondo che è una rappresentazione su Google Map della posizione che desideri mostrare. Puoi farlo con Photoshop o qualsiasi altro editor di immagini.
Aggiungi una nuova sezione
Ora è il momento di iniziare a creare 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 mappa modificata
spaziatura
Successivamente, personalizza le impostazioni di spaziatura delle sezioni nella scheda Progettazione.
- Margine superiore e inferiore: 50vh
- Imbottitura inferiore: 0vw
visibilità
Quindi impostare gli overflow su visibile.
- Troppopieno orizzontale e verticale: visibile
Posizione
Infine, imposta l'indice Z della sezione su 10.
- Indice Z: 10
Aggiungi una nuova linea
Struttura a colonne
Adesso è il momento di aggiungere alcune cose. Innanzitutto, aggiungi una riga con 2 colonne.
dimensionamento
Aprire i parametri della linea e regolare il dimensionamento come segue.
- Larghezza
- Ufficio: 90%
- Tablet e telefono: 80%
- Larghezza massima: 90%
visibilità
Fare clic sulla scheda Avanzate e quindi regolare gli overflow.
- Troppopieno orizzontale e verticale: visibile
Posizione
Completa le impostazioni della riga modificando le impostazioni della posizione.
- Posizione: relativa
- Origine offset: in alto a sinistra
- Offset verticale
- Desktop: -8vw
Colonna 1 Impostazioni
sfondo
Prima di aggiungere moduli, dovremo dare uno stile alle singole colonne. Aggiungi un colore di sfondo alla colonna 1.
- Colore solido: # 25274d
Spaziatura
Regola successivamente le impostazioni di spaziatura.
- Imbottitura superiore e inferiore
- Desktop e tablet: 7vw
- Imbottitura sinistra e destra
- Desktop: 3 vw
- Tablet e telefono: 6vw
Confine
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 alcuni movimenti verticali nelle impostazioni degli effetti di scorrimento. Questo ci aiuterà a creare un effetto fluttuante.
- Effetti di trasformazione di scorrimento: movimento verticale
- Set movimento verticale / desktop
- Offset iniziale: 4
- Mid Offset: 0 (al 50%)
- Offset finale: -4
- Set movimento verticale / tablet e telefono
- Offset iniziale: 4
- Mid Offset: 0 (al 40% e 60%)
- Fine offset: -3
- Attivare l'effetto di movimento: metà dell'elemento
Impostazioni della colonna 2
Posizione
Passiamo ora ai parametri della seconda colonna. Regolare i parametri di posizione di conseguenza.
- Posizione: relativa
- Origine dell'offset: in alto a sinistra
- Offset verticale
- Ufficio: 25vw
Effetti di scorrimento
Aggiungiamo anche un movimento verticale a questa colonna.
- Effetti di trasformazione di scorrimento: movimento verticale
- Definire il movimento verticale / desktop
- Avvia offset: 2
- Offset medio: 0 (al 50%)
- Fine offset: -2
- Definire movimento verticale / tablet e telefono
- Avvia offset: 0
- Offset medio: 0 (al 50%)
- Fine offset: -2
- Trigger effetto movimento: elemento superiore
Aggiungi un modulo di testo alla colonna 1
Contenuto
È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi qualsiasi contenuto H2 che desideri.
Testo del titolo
Vai alla scheda Design e applica uno stile al testo H2 come segue.
- Livello del titolo: H2
- Carattere: Palanquin Dark
- Peso carattere: grassetto
- Stile carattere: TT
- Colore: giallo # ffd868
- Misura
- Ufficio: 5vw
- Tablet: 10vw
- Telefono: 12vw
- Spaziatura lettere: 4px
Aggiungi un modulo del modulo di contatto alla colonna 1
Contenuto
Sotto il modulo di testo, aggiungi a modulo di contatto. Questi sono i campi che utilizziamo:
- Cognome
- materiale
- Messaggio
Protezione Spam
Prima di modellare il modulo di modulo di contatto. abilita la protezione antispam e collega il tuo account ReCaptcha.
- Utilizzare un servizio di protezione antispam: Sì
- Fornitore servizi: ReCaptcha
- Seleziona un account
i campi
Passa alla scheda Progettazione e applica uno stile ai campi come segue.
- Colore di sfondo: blu scuro # 25274d
- Colore del testo: grigio chiaro # d1d1d1
- Colore sfondo messa a fuoco: blu scuro # 25274d
- Metti a fuoco il colore del testo: grigio chiaro # d1d1d1
- Carattere: Palanquin
- Stile: TT
- Dimensione del testo
- Ufficio: 0.9vw
- Tablet: 2vw
- Telefono: 3vw
- Spaziatura lettere: 1px
Pulsante
Quindi, stilizzare 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 dell'icona: blu scuro # 25274d
- Margine superiore: 5px
dimensionamento
Modifichiamo quindi i parametri di dimensionamento.
- Larghezza: 100%
- Larghezza massima: 100%
spaziatura
Aggiungeremo anche l'imbottitura superiore.
- Imbottitura superiore: 4vw
confine
Completa i parametri del modulo personalizzando i parametri del bordo.
- Ingressi con angoli arrotondati: 6px ai quattro angoli
- Voci Stili di bordo: tutti e quattro i lati
- Larghezza bordo ingresso: 2px
- Voci Colore bordo: giallo # ffd868
Aggiungi il modulo di monitoraggio dei social media alla colonna 2
Contenuto
Vai alla colonna 2 e aggiungi un modulo di social media. Usa tutti i social network di cui hai bisogno.
Collegamento
Prima di dare uno stile, aggiungi collegamenti alle reti corrispondenti.
Contesto dell'articolo
Ora apri il primo social network e cambia il colore di sfondo.
- Colore: Blu scuro # 25274d
Icona dell'elemento
Nella scheda di progettazione dello stesso elemento, modificare le impostazioni dell'icona come segue.
- Colore: giallo # ffd868
- Dimensione carattere icona
- Scrivania e tablet: 31 px
- Telefono: 26 px
Spaziatura degli oggetti
Quindi aggiungi un piccolo margine per separare le icone l'una dall'altra.
- Margine destro: 1vw
Copia e incolla gli stili degli elementi
Per applicare uno stile ai restanti social network, torna alla finestra del contenuto principale e copia gli stili degli elementi dalla 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
confine
Infine, aggiungi angoli arrotondati nelle impostazioni del bordo. Questo regolerà i bordi di tutte le icone contemporaneamente.
- angoli arrotondati
- In alto a sinistra e a destra: 7 pixel
- In basso a sinistra e a destra: 0px
Aggiungi un modulo di testo alla colonna 2
Contenuto
Sotto il modulo social media, aggiungi un altro modulo di testo. Aggiungi contenuti a tua scelta. Abbiamo aggiunto due indirizzi, un numero di telefono e un'e-mail. Usa il grassetto sul titolo di ogni elemento in tutte le lettere maiuscole.
- zona Generale: 1587 Sukhumvit Soi 21, Bangkok, Tailandia.
- Punto di vendita : Emporium Mall, 2 ° piano
- Telefono: (321) 564 2398
- e-mail: [email protected]
contesto
Cambia il colore di sfondo del modulo.
- Colore: Blu scuro # 25274d
Testo
Passa alla scheda Progettazione e applica uno stile al testo.
- Carattere: Palanquin
- Colore: giallo # ffd868
- Dimensioni: 18px
spaziatura
Aggiungi anche valori di spaziatura personalizzati.
- Margine massimo
- Ufficio: -60px
- Tablet e telefono: -50 pixel
- Imbottitura superiore, inferiore, sinistra e destra
- Ufficio: 3vw
- Tablet: 6vw
- Telefono: 8vw
confine
E completa il modulo aggiungendo angoli arrotondati nelle impostazioni del bordo. Questo è tutto!
- Angoli arrotondati: 10 pixel in alto a destra, in basso a sinistra e in basso a destra.
Panoramica
Ora che abbiamo finito di ricreare la sezione dei contatti mobili, dai un'ultima occhiata al risultato su schermi di dimensioni diverse.
Risorse aggiuntive
Questo è risorse può essere complementare a quello che hai appena letto. Possono essere utilizzati in aggiunta o da chi ne è sprovvisto Tema Divi.
- Come aggiungere un modulo di contatto a finestra su WordPress
- Come aggiungere un modulo a discesa nell'intestazione globale su Divi
- 5 plugin per creare moduli di contatto
to Finish
L'utilizzo dei nuovi effetti di scorrimento Divi trasforma qualsiasi layout standard in un bel design. Creando il tuo sfondo, hai un maggiore controllo sull'aspetto del design finito. Se hai domande o suggerimenti, lascia un commento nella sezione commenti qui sotto!
