Come aggiungere automaticamente un modulo di contatto in basso a tutte le pagine con Divi's Theme Builder

Quando sei impegnato a configurare tutte le pagine che desideri includere nel tuo sito web, è molto probabile che tu voglia includere un modulo di contatto alla fine di ogni pagina per facilitare il viaggio dei tuoi visitatori. Con Divi, puoi, ovviamente, aggiungere un modulo di contatto alla pagina stessa, ma se preferisci semplificare il processo, anche questo è possibile. Nel tutorial Divi di oggi, ti mostreremo come aggiungere automaticamente un modulo di contatto in fondo alla pagina a tutte le tue pagine contemporaneamente. Aggiungeremo automaticamente anche un'icona fissa in basso a destra con un link di ancoraggio che reindirizzerà automaticamente le persone alla sezione dei contatti della pagina in cui si trovano. Potrai anche scaricare gratuitamente il modello di pagina!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il modello di pagina GRATUITAMENTE

Per mettere le mani sul modello di pagina 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!

Panoramica dell'esercitazione

• Imposta le pagine del tuo sito web utilizzando un pacchetto di layout a tua scelta
• Una volta impostato lo stile di progettazione della pagina, puoi riutilizzare lo stile di progettazione nel modulo di contatto in fondo alla pagina
• Per aggiungere il modulo di contatto in fondo alla pagina, devi prima creare un nuovo modello dedicato a tutte le pagine
• Una volta che il modello è stato creato, puoi iniziare a costruire il corpo del modello usando il visual builder di Divi
• Per assicurarci che tutti i contenuti di pagina univoci vengano visualizzati su ogni pagina, aggiungeremo il modulo del contenuto del post
• Il modulo del contenuto del post contiene l'intero design della pagina dinamica
• Sotto il modulo del contenuto del post, aggiungeremo un'altra sezione per il nostro modulo di contatto
• Progetteremo il modulo di contatto e ci assicureremo di aggiungere un ID CSS univoco alla sezione, useremo questo ID CSS per creare un collegamento di ancoraggio
• Bonus: aggiungeremo un'icona fissa nell'angolo in basso a destra di ciascuna delle nostre pagine e collegheremo l'icona alla sezione dei contatti di quella particolare pagina

1. Imposta le pagine del sito Web utilizzando il pacchetto di layout a scelta

L'approccio che stiamo adottando funziona su qualsiasi tipo di sito Web che crei. Ma per questo particolare tutorial, stiamo usando lo stile di design del Magazine Layout Pack. Se stai utilizzando questo approccio su qualsiasi altro sito web, sentiti libero di modificare il design in base alle tue esigenze.

2. Vai a Divi Theme Builder e aggiungi un nuovo modello di pagina

Vai a Divi Theme Builder e aggiungi un nuovo modello di pagina

Vai al Divi Theme Builder sul tuo sito web. Lì, aggiungi un nuovo modello.

Usa questo nuovo modello su tutte le pagine se vuoi che il modulo di contatto in fondo alla pagina appaia su tutte le pagine. Puoi farlo apparire anche su pagine specifiche e/o escluderlo da determinate pagine.

• Utilizzare su: tutte le pagine

Inizia a costruire il corpo del modello

Dopo aver creato il nuovo modello, puoi iniziare a creare il corpo personalizzato.

3. Aggiungi il contenuto della pagina al corpo del modello

Impostazioni della sezione

Spaziatura

All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita di tutte le righe.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo contenuto post alla colonna

Continua aggiungendo il modulo Post Content alla colonna della tua riga. Questo modulo rappresenta tutti i contenuti dinamici della pagina che hai creato.

4. Aggiungi il modulo di contatto in fondo alla pagina al corpo del modello

Aggiungi nuova sezione

Sfondo sfumato

Sotto la sezione che contiene il modulo del contenuto dei post, aggiungeremo un'altra sezione normale. Questa sezione sarà dedicata al modulo di contatto. Apri le impostazioni della sezione e aggiungi uno sfondo sfumato.

• Colore 1: #ffffff
• Colore 2: #ffc077
• Posizione di partenza: 50%
• Posizione finale: 50%

ID CSS

Includi anche un ID CSS.

• ID CSS: contatto

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione e utilizza la seguente struttura di colonne:

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto H2

Il primo modulo di cui abbiamo bisogno nella prima colonna è un modulo di testo. Inserisci alcuni contenuti a tua scelta.

Impostazioni testo H2

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Peso del carattere: grassetto
• Colore testo titolo 2: #000000
• Titolo 2: Dimensione testo: 70 px (desktop), 48 px (tablet), 36 px (telefono)
• Altezza riga intestazione 2: 1.2em

Dimensionamento

Aggiungi anche una larghezza massima.

• Larghezza massima: 750 px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Aggiungi un altro modulo di testo alla colonna 1 con un contenuto a tua scelta.

Impostazioni testo

Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Cardo
• Peso del carattere del testo: grassetto
• Colore del testo: rgba(0,0,0,0.03)
• Dimensioni del testo: 150 px (desktop), 100 px (tablet), 60 px (telefono)
• Altezza riga di testo: 1em

Spaziatura

E gioca con le impostazioni di spaziatura su schermi di diverse dimensioni.

• Margine superiore: -0.8em (desktop), -100px (tablet), -80px (telefono)
• Margine sinistro: -0.8em (desktop e tablet), -60px (telefono)

Aggiungi il modulo di contatto alla colonna 2

Aggiungi tutti i campi necessari

Nella seconda colonna l'unico modulo di cui abbiamo bisogno è un modulo di contatto. Aggiungi tutti i campi di cui hai bisogno e collega anche il tuo account di posta elettronica al modulo.

Trasforma i campi Nome e Email a larghezza intera

Continua ruotando i campi del nome e dell'indirizzo email a larghezza intera.

• Crea larghezza intera: Sì

Impostazioni dei campi

Torna alle impostazioni generali del modulo di contatto e cambia il colore di sfondo dei campi.

• Colore di sfondo dei campi: #ffffff

Impostazioni dei pulsanti

Modificare le impostazioni del pulsante successivamente.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 14px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000 (predefinito), #ff2a38 (passa il mouse)
• Larghezza bordo pulsante: 8px

• Colore bordo pulsante: rgba (0,0,0,0)
• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px
• Peso del carattere del pulsante: Ultra grassetto
• Stile carattere pulsante: maiuscolo
• Icona del pulsante: Trova nell'elenco

Frontiera

Aggiungi anche un raggio di bordo.

• Tutti gli angoli: 5px

Scatola ombra

E completa le impostazioni del modulo aggiungendo un'ombra sottile.

• Forza sfocatura ombra scatola: 50 px
• Forza di diffusione dell'ombra della scatola: -4px
• Colore ombra: rgba (0,0,0,0.08)

Bonus: aggiungi l'icona di ancoraggio in basso a destra fissa al corpo del modello

Aggiungi nuova sezione

Spaziatura

Ora, per aggiungere l'icona fissa in basso a destra a ogni pagina, dovremo aggiungere un'altra sezione normale. Apri la sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Indice Z

Aumenta anche l'indice z della sezione. Ciò garantirà che l'icona rimanga in cima a tutto il contenuto della pagina.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

Aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo Blurb alla colonna

Lascia il titolo e la casella del contenuto vuoti

Per visualizzare l'icona in basso a destra, utilizzeremo un modulo Blurb. Assicurati di lasciare il titolo e la casella del contenuto vuoti.

Seleziona icona

Quindi, seleziona un'icona a tua scelta.

Collegamento

Collega l'icona alla sezione dei contatti aggiungendo l'ID all'URL di collegamento del modulo.

• URL collegamento modulo: #contatto

Colore di sfondo

Cambia anche il colore di sfondo del modulo.

• Colore di sfondo: #ffc077

Impostazioni icona

Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona come segue:

• Colore icona: #ffffff
• Posizionamento immagine/icona: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 30px

Dimensionamento

Modifica anche le impostazioni di dimensionamento del modulo.

• Larghezza: 100 px
• Allineamento del modulo: a destra

Spaziatura

E aggiungi un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 33px
• Imbottitura inferiore: 33px

Frontiera

Quindi, vai alle impostazioni del bordo e aggiungi alcuni angoli arrotondati.

• Tutti gli angoli: 100 px

Scatola ombra

Aggiungi anche un'ombra di scatola.

• Forza sfocatura ombra scatola: 50 px
• Forza di diffusione dell'ombra della scatola: -15px
• Colore ombra: rgba(0,0,0,0.23)

Elemento principale CSS

Per correggere l'icona, applicheremo tre righe di codice CSS all'elemento principale del modulo nella scheda Avanzate.

bottom: 20px;
right: 20px;
position: fixed;

Blurb immagine CSS

E rimuovi anche l'imbottitura inferiore predefinita dell'immagine del modulo.

margin-bottom: 0px;

6. Salva tutte le modifiche del generatore di temi e visualizza l'anteprima dei risultati

Una volta completato il corpo del modello di pagina, puoi salvare tutte le modifiche, uscire dal Theme Builder e visualizzare il risultato su tutte le tue pagine!

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 aggiungere un modulo di contatto in fondo alla pagina a tutte le tue pagine contemporaneamente. Per fare ciò, abbiamo impostato un nuovo modello di pagina, incluso il modulo di contenuto dei post e aggiunto una sezione di contatto alla fine del modello. Abbiamo anche incluso un'icona fissa in basso a destra con un link di ancoraggio che reindirizzerà i visitatori alla sezione dei contatti della pagina in cui si trovano. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello di pagina! Se hai domande o suggerimenti, 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.