Come includere senza soluzione di continuità un modulo di contatto della colonna slide-in nella tua sezione Divi Hero
Pubblicato: 2020-07-26Quando pensi a come includere CTA nel design della tua pagina, potresti considerare di includere un modulo di contatto nella tua sezione degli eroi. Questo approccio consente alle persone di mettersi immediatamente in contatto con te senza dover navigare ulteriormente nel tuo sito web. Se stai cercando un modo semplice per farlo funzionare all'interno di Divi, adorerai questo post. In questo tutorial, ti mostreremo come aggiungere un modulo di contatto con colonna slide-in alla tua sezione eroe utilizzando solo le opzioni integrate di Divi. Potrai anche scaricare gratuitamente il file JSON!
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 della sezione Hero del modulo di contatto della colonna
Per mettere le mani sul layout della sezione eroe del modulo di contatto della colonna gratuita, devi 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!
Iniziamo a ricreare
Aggiungi nuova sezione
Colore di sfondo
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo.
- Colore di sfondo: #ff8949
Immagine di sfondo
Stiamo caricando un motivo di sfondo che fa parte del pacchetto di layout del consulente finanziario. Puoi trovare questa immagine di sfondo nella cartella che hai potuto scaricare all'inizio di questo post.
- Dimensione immagine di sfondo: adatta
- Posizione immagine di sfondo: Centro
Spaziatura
Passa alla scheda Progettazione della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
straripamenti
Completa le impostazioni della sezione nascondendo gli overflow nella scheda Avanzate. Ciò assicurerà che le animazioni che aggiungeremo in seguito non vadano oltre il contenitore della sezione.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Equalizza le altezze delle colonne: Sì
- Larghezza: 80% (desktop), 100% (tablet e telefono)
- Larghezza massima: 1380 px
- Allineamento riga: a destra
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Impostazioni colonna 1
Spaziatura
Quindi, apri le impostazioni della colonna 1 e modifica le impostazioni di spaziatura tra le diverse dimensioni dello schermo.
- Imbottitura superiore: 22%
- Imbottitura inferiore: 22%
- Imbottitura sinistra: 10% (solo tablet e telefono)
- Imbottitura destra: 10% (solo tablet e telefono)
Impostazioni colonna 2
Colore di sfondo
Successivamente, apriremo le impostazioni della colonna 2 e utilizzeremo un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Animazione
Completeremo le impostazioni della colonna 2 applicando le seguenti impostazioni di animazione:
- Direzione animazione: sinistra (desktop), su (tablet e telefono)
- Durata dell'animazione: 1500 ms
- Intensità animazione: 70%
- Opacità iniziale dell'animazione: 100%
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H1
È ora di aggiungere moduli, iniziando con un primo modulo di testo nella colonna 1. Aggiungi alcuni contenuti H1 a tua scelta.
Impostazioni testo H1
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 come segue:
- Carattere intestazione: Oswald
- Stile carattere intestazione: maiuscolo
- Colore del testo dell'intestazione: #ffffff
- Dimensione del testo dell'intestazione: 120 px (desktop), 70 px (tablet), 60 px (telefono)
Dimensionamento
Stiamo modificando anche le impostazioni di dimensionamento del modulo.
- Larghezza: 75% (desktop), 100% (tablet e telefono)
- Allineamento del modulo: a sinistra
Aggiungi il modulo di testo n. 2 alla colonna 1
Aggiungi descrizione contenuto
Al modulo successivo, che è un altro modulo di testo. Aggiungi alcuni contenuti descrittivi a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Colore del testo: #ffffff
- Altezza riga di testo: 1,9 em
Dimensionamento
Modifica anche le impostazioni di dimensionamento.
- Larghezza: 75% (desktop), 100% (tablet e telefono)
- Allineamento del modulo: a sinistra
Aggiungi modulo pulsante alla colonna 1
Aggiungi copia
L'ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante come segue:
- Usa stili personalizzati per pulsante: Sì
- Colore del testo del pulsante: #ffffff
- Raggio del bordo del pulsante: 1px
- Carattere pulsante: Oswald
- Stile carattere pulsante: maiuscolo
Aggiungi modulo Blurb alla colonna 2
Aggiungi contenuto
Alla seconda colonna. Lì, il primo modulo di cui abbiamo bisogno è un modulo Blurb. Aggiungi un titolo a tua scelta.
Seleziona icona
Quindi, seleziona un'icona.
Impostazioni icona
Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona come segue:
- Colore icona: #ffd8c6
- Posizionamento delle icone: in alto
- Allineamento delle icone: al centro
- Usa dimensione carattere icona: Sì
- Dimensione carattere icona: 250 px (desktop), 150 px (tablet e telefono)
Impostazioni del testo del titolo
Modifica le impostazioni del testo del titolo in seguito.
- Livello titolo titolo: H2
- Carattere del titolo: Oswald
- Stile carattere del titolo: maiuscolo
- Allineamento del testo del titolo: al centro
- Colore del testo del titolo: #ff8949
- Dimensione del testo del titolo: 38px
Spaziatura
Aggiungi anche un po' di imbottitura sinistra e destra.
- Imbottitura sinistra: 11%
- Imbottitura destra: 11%
Animazione
E completa il modulo aggiungendo le seguenti impostazioni di animazione:
- Direzione animazione: Giù
- Durata dell'animazione: 1100 ms
- Ritardo animazione: 400 ms
- Opacità iniziale dell'animazione: 100%
Aggiungi il modulo del modulo di contatto alla colonna 2
Girare i campi a tutta larghezza
Fino all'ultimo modulo, che è un modulo di contatto. Apri i campi nome ed e-mail singolarmente e rendili a larghezza intera nelle impostazioni di layout.
- Crea larghezza intera: Sì
Colore di sfondo
Quindi, torna alle impostazioni generali del modulo di contatto e aggiungi un colore di sfondo.
- Colore di sfondo: #f7f7f7
Impostazioni dei campi
Passa alla scheda Progettazione e apporta successivamente alcune modifiche alle impostazioni dei campi.
- Colore di sfondo dei campi: #ffffff
- Colore testo campi: #ff8949
- Margine superiore dei campi: 15px
- Margine inferiore dei campi: 15 px
- Imbottitura superiore dei campi: 20px
- Imbottitura inferiore dei campi: 20 px
- Font Fields: Oswald
- Stile carattere campi: maiuscolo
- Allineamento del testo dei campi: al centro
- Dimensioni del testo dei campi: 21 px
Impostazioni dei pulsanti
Quindi, modella il pulsante di conseguenza:
- Usa stili personalizzati per pulsante: Sì
- Colore del testo del pulsante: #ff8949
- Raggio del bordo del pulsante: 1px
- Carattere pulsante: Oswald
- Stile carattere pulsante: maiuscolo
Dimensionamento
Ci stiamo anche assicurando che la larghezza sia "100%" nelle impostazioni di dimensionamento.
- Larghezza: 100%
Spaziatura
Passa alle impostazioni di spaziatura successiva e applica alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 14%
- Imbottitura inferiore: 14%
- Imbottitura sinistra: 12%
- Imbottitura destra: 12%
Animazione
Quindi, usa le seguenti impostazioni di animazione:
- Stile di animazione: diapositiva
- Direzione dell'animazione: su
- Durata dell'animazione: 1100 ms
- Ritardo animazione: 400 ms
- Opacità iniziale dell'animazione: 100%
Posizione
E completa le impostazioni del modulo (e il tutorial) riposizionando il modulo solo sul desktop:
- Posizione: assoluta (desktop), predefinita (tablet e telefono)
- Posizione: in basso al centro
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 includere senza problemi un modulo di contatto nella tua sezione degli eroi. Più specificamente, abbiamo creato un modulo di contatto a colonna scorrevole che ha un bell'aspetto su tutte le dimensioni dello schermo. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, non esitare a 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.