Vuoi creare un file modulo di contatto appiccicoso in DIVI?
Le opzioni permanenti integrate di Divi ti consentono di creare straordinari effetti visivi sulla tua pagina con pochi clic.
Puoi applicare effetti appiccicosi a qualsiasi elemento della tua pagina, ma in questo tutorial ci concentreremo su come creare un file modulo di contatto appiccicoso su qualsiasi pagina Divi che crei.
Leggi anche la nostra guida su Come creare un'intestazione globale appiccicosa in DIVI
Per questo esempio, aggiungeremo immagini e informazioni di contatto che scorreranno man mano che modulo di contatto resterà al suo posto.
Panoramica
Ecco un'anteprima di ciò che andremo a progettare. Sui dispositivi mobili, non applichiamo un effetto appiccicoso.
Come aggiungere un modulo di contatto appiccicoso alla tua pagina Divi
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 il pagina dei contatti del layout 'Prodotto di bellezza'.
Seleziona "Scegli la disposizione' per aggiungere il layout alla tua pagina.
Ora siamo pronti per continuare il nostro tutorial.
Modifica del layout del modulo di contatto permanente
Per questo tutorial, vogliamo che il modulo di contatto nella colonna di sinistra (colonna 1) rimanga permanente mentre l'utente scorre gli altri moduli di contenuto nella colonna di destra (colonna 2). Questo ci darà un effetto di scorrimento dinamico che farà risaltare il tuo modulo di contatto. Iniziamo modificando il nostro template predefinito.
Vedi anche: Come creare un menu scorrevole ea pressione in DIVI
Crea una nuova sezione
Aggiungi una nuova sezione alla tua pagina.
Quindi inserisci una nuova riga con due colonne. Puoi aggiungere questa sezione in qualsiasi punto della pagina, altre sezioni verranno eventualmente rimosse man mano che avanzeremo in questo tutorial.
Apri le impostazioni della sezione e cambia il colore di sfondo in modo che corrisponda al design del layout:
- Sfondo: #EEE8E2
Aggiunta dei moduli permanenti alla colonna 1
Aggiungi un modulo Modulo di contatto nella colonna 1. Se stai seguendo questo tutorial o hai già un modulo di contatto sulla tua pagina, puoi semplicemente trascinare il modulo 'modulo di contatto' esistente nella colonna 1.
Sposta il modulo Testo Contattaci all'inizio di questa sezione. Sarà anche appiccicoso. Aggiungi un bordo bianco nelle impostazioni del testo per abbinare lo stile del layout:
- Larghezza bordo: 20px
- Colore bordo: #FFFFFF
Il layout originale includeva il riempimento tra il testo e il bordo, ma lo salteremo perché taglia la parte inferiore del modulo di contatto su schermi più piccoli.
Aggiungi i tuoi moduli di scorrimento nella colonna 2
Nella colonna 2, aggiungi tutti i tuoi moduli di scorrimento. Nel nostro caso, sposta i due moduli immagine, le informazioni di contatto e le informazioni sulla posizione nella colonna 2. Dopo aver spostato i moduli nella nuova sezione, puoi eliminare le sezioni vuote rimanenti.
Suggerimento: se devi spostare più moduli contemporaneamente, tieni premuto il tasto 'Maggio' sulla tastiera e seleziona i moduli che vuoi spostare. Usa la funzione di spostamento del modulo per spostare tutti i moduli contemporaneamente.
L'immagine di grande offset del layout che abbiamo scelto può causare problemi di scorrimento orizzontale. Quindi cambiamo alcune impostazioni per risolvere questo problema.
Leggi anche: Come creare un'intestazione globale con modulo di accesso in DIVI
Apri le impostazioni della sezione. Sotto avanzato, vai su Visibilità , quindi aggiorna le impostazioni di overflow orizzontale e verticale:
- Overflow orizzontale: nascosto
- Troppopieno verticale: nascosto
La tua pagina dovrebbe ora avere questo aspetto, con i tuoi contenuti permanenti nella colonna 1 e i tuoi contenuti a scorrimento nella colonna 2.
Siamo pronti per il passaggio finale: rendere il modulo di contatto appiccicoso.
Rendi il modulo di contatto appiccicoso
Con il nostro layout attivo, possiamo abilitare le impostazioni permanenti per il nostro modulo di contatto. Selezionare 'Impostazioni di riga', quindi seleziona le impostazioni della colonna 1.
Nella scheda Avanzate, vai a "Effetti di scorrimento". Qui è dove imposteremo i parametri permanenti.
- Posizione appiccicosa: resta in alto
- Offset superiore stick: 15px
- Limite appiccicoso inferiore: linea
E questo è tutto! Ora hai aggiunto impostazioni permanenti alla colonna 1, rendendo il modulo di contatto e il titolo permanenti mentre scorri la pagina verso il basso. Dovresti vedere il contenuto della colonna 2 scorrere accanto al modulo di contatto.
Risultato finale
Ora diamo un'occhiata al nostro modulo di contatto appiccicoso in azione.
Scarica DIVI ora!!!
Conclusione
Ecco ! Questo è tutto per questo articolo. Le impostazioni permanenti di Divi sono un modo semplice per migliorare l'aspetto del tuo modulo di contatto o di qualsiasi altro elemento della tua pagina. Puoi applicare impostazioni permanenti per qualsiasi sezione, riga o modulo, rendendo praticamente qualsiasi cosa sul tuo sito web appiccicoso.
Se vuoi saperne di più su cosa puoi fare con le funzioni permanenti di Divi, dai un'occhiata ai nostri tutorial. Puoi ad esempio consultare il nostro tutorial su Come aggiungere un modulo di contatto a un'intestazione globale.
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.
...
