Come creare una sezione contatti per il Mobile con Divi? In quanto proprietari di un sito, vogliamo solo il meglio per i nostri utenti. Ecco perchè potrebbe tornarci utile la possibilità di personalizzare, per i solo dispositivi mobili, una sezione destinata ai contatti e da tenere sempre attiva nel footer.
Il nostro tema preferito ci viene in aiuto: grazie al Generatore di Temi, possiamo creare infatti una sezione da attivare in una pagina specifica oppure in un gruppo di pagine o articoli. In alternativa, possiamo attivarla su ogni contenuto presente nel nostro sito. Vediamo di seguito il tutorial, offerto da Elegant Themes in lingua originale e in particolare da Jason Champagne.
Il risultato finale
Prima di procedere con tutti i dettagli, meglio dare uno sguardo a ciò che otterremo con questa guida. Qui di seguito trovi sia la versione per i tablet sia quella per i Mobile. A te la scelta di attivare entrambe oppure rendere la sezione contatti attiva solo per i dispositivi cellulari.
Creare il Global Footer
In questo tutorial vogliamo aggiungere una sezione contatti al Global Footer: per iniziare dovremo usare il Divi Theme Builder (Divi->ThemeBuilder o Generatore di Temi). Clicca su Add Global Footer e seleziona Build Global Footer dal menu a tendina.
Inizia a costruire scegliendo Build from Scratch nella schermata successiva e aggiungi una una singola colonna alla riga.
Sezione
Prima di andare avanti, modifichiamo la sezione: Height 80px (Altezza).
Questo parametro è importante per creare uno spazio alla fine della pagina, dove si troverà la contact bar. Aggiungiamo quindi anche queste caratteristiche:
- Spaziatura padding 0px Sopra e Sotto
Imposta la riga
Nelle impostazioni della riga invece aggiungiamo uno sfondo di colore scuro, #751136. Poi andiamo su Design, Dimensionamento e aggiungiamo i seguenti parametri:
- Personalizzate Grondaia Larghezza (attivo)
- Spaziatura colonne 1
- Larghezza Massima 100%
- Larghezza massima 100%
- Altezza inherit
Aggiungiamo anche dello spazio in Spaziatura:
- Padding 0px (In Cima e In Fondo) 15% (Sinistra e Destro)
Spostiamoci quindi nella scheda Avanzate, CSS personalizzato e inseriamo il seguente codice nel box Elemento Principale.
Per creare una posizione fissa, dobbiamo andare su Professione e scegliere Fixed dal menù a tendina. Spostiamo il quadratino nell’angolo in basso a sinistra e aggiungiamo il valore 99999 a Z Index.
Costruisci il Blurb con Call-to-Click, Email, SMS e Link
Passiamo ora al cuore di questo tutorial: disegnare l’area contatti del nostro layout per mobile. Creiamo un nuovo modulo all’interno della stessa riga, il Blurb.
In Contenuti, inserisci il titolo per esempio Call e poi attiva l’icona, scegliendo la cornetta del telefono. Lo sfondo invece dovrà essere bianco.
Adesso possiamo colorare l’icona a nostro piacimento, andando su Design, Immagine & Icona:
- colore: #751136
- Usa dimensione Icona personalizzata: sì
- Dimensione 2em
In Titolo Testo invece inseriamo questi valori:
- Titolo Copia Stile TT
- Allineamento Testo centrale
- Colore #751136
- Dimensione 1em
Fino ad ora abbiamo usato l’unità di misura em, mentre per il testo del body useremo i pixels. Nello specifico la dimensione del testo sarà di 12px.
In Dimensionamento, aggiungiamo 4.5em sia alla Larghezza Massima sia all’Altezza. L’allineamento invece dovrà essere centrale.
Aggiungiamo un po’ di padding In Cima (0.5em) e creiamo dei bordi arrotondati con il valore 0.6em.
In Box Shadow, selezioniamo l’ombra piena a destra, posizione orizzontale 0px e verticale 2px e colore rgba(255,255,255,0.55).
Ora possiamo andare in Avanzate e inserire del codice CSS personalizzato per l’Elemento Principale.
Inseriamo anche il codice per la Blurb Image (Immagine Soffietto).
L’icona è pronta, ma ora dobbiamo assicurarci che una volta cliccata si attivi la chiamata su mobile. Per farlo, basta tornare su Contenuti e aggiungere il numero di telefono nella scheda Collegamento, alla voce URL di collegamento del modulo.
Aggiungi l’icona per l’email
Per continuare a personalizzare la pagina contatti nel Global Footer, duplichiamo la colonna Call e cambiamole il titolo in Email.
Attiviamo l’icona nella scheda Contenuti e scegliamo il simbolo che preferiamo, per esempio la busta da lettere. Assicuriamoci poi di inserire in Collegamento/URL di collegamento del modulo anche la url per spedire l’email, per esempio mailto:info@wp-win.it.
Il pulsante per gli SMS
Per inserire il pulsante per gli SMS, duplicare la colonna appena creata e ripetiamo i passaggi precedenti, specificando un tipo di icona diversa e cambiando il titolo in SMS. Per attivare il modulo, dobbiamo inserire la URL in Collegamento con il numero di telefono. Per esempio sms:+393405555874.
Pulsante localizzazione
Ripetiamo il passaggio precedente anche per il collegamento alla mappa. Duplichiamo la colonna destinata agli SMS, cambiamo il titolo e inseriamo come url la località che preferiamo. Per esempio https://www.google.com/maps/dir/?api=1&destination=ponte+rialto+ve. Le direttive da seguire per la creazione della direzione vengono fornite direttamente da Google. Per costruire una direzione precisa, basta comunque specificare il numero civico, la via e infine la provincia, il tutto separato solo dal simbolo +.
Nascondere la sezione sul desktop
Ricordate? Abbiamo creato questa particolare sezione contatti con il Global Footer solo per gli utenti che accedono da mobile. Occorre quindi nascondere la sezione per chi naviga su desktop. Per procedere, cliccare su Sezione/Avanzate/Visibilità e spuntare la casellina per il Desktop.
