Modulo di contatto

Link in evidenza

1. documentazione Shopify sulle sezioni e i blocchi
2. documentazione Company XYZ sul blocco delle informazioni di contatto
3. documentazione Company XYZ sul blocco del modulo di contatto
4. documentazione Company XYZ sulle impostazioni dell’header
5. documentazione Company XYZ sulle impostazioni degli sfondi delle sezioni
6. documentazione Company XYZ sulle impostazioni del padding delle sezioni
7. documentazione Company XYZ sulle impostazioni dei separatori
8. documentazione Company XYZ sulle impostazioni di visibilità
9. documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Utilizzi questa sezione per raccogliere messaggi e mostrare i dettagli di contatto di cui le persone potrebbero avere bisogno prima di mettersi in contatto. Può includere un modulo, un pannello con i dettagli di contatto o entrambi, quindi riordinare i blocchi per cambiare quale contenuto appare per primo.

Configurazione principale della sezione

Questa sezione funziona al meglio quando decide prima l’obiettivo principale della pagina. Se desidera che i visitatori inviino rapidamente un messaggio, posizioni per primo il blocco del modulo. Se i visitatori hanno di solito bisogno di un numero di telefono, un indirizzo email, una sede o gli orari prima di contattarLa, posizioni per primo il blocco delle informazioni di contatto.

Per una panoramica più ampia sul funzionamento dei blocchi nell’editor, consulti documentazione Shopify sulle sezioni e i blocchi

1. Utilizzi entrambi i blocchi per una pagina contatti completa.
2. Utilizzi solo il blocco del modulo per un layout più semplice, orientato all’azione.
3. Utilizzi il blocco delle informazioni di contatto per supportare il modulo con opzioni di contatto diretto.

Riordinare i blocchi cambia il layout e il flusso di lettura. Dopo aver spostato i blocchi, visualizzi l’anteprima della pagina su desktop e su mobile per assicurarsi che il metodo di contatto più importante appaia per primo.

Impostazioni dei colori

Queste impostazioni sostituiscono i colori predefiniti del tema per l’icona della sezione, il testo principale e il testo del sottotitolo. Sono particolarmente utili quando desidera che l’area contatti risalti o quando la inserisce sopra uno sfondo personalizzato.

Lasciare vuoti i valori dei colori o mantenerli vicini a quelli predefiniti in genere conserva lo stile di fallback del tema. Scelte più esplicite di colore, sfumatura o media rendono la sezione più indipendente, quindi controlli che l’intera area contatti funzioni ancora come un’unica unità.

Se aggiunge anche sfondi stilizzati ai blocchi, mantenga i colori della sezione e dei blocchi coerenti tra loro invece di trattare ogni area separatamente. Qui il contrasto forte è importante, perché i visitatori devono leggere rapidamente i dettagli e completare il modulo senza sforzo.

Tipi di blocco supportati

1. Informazioni di contatto
2. Modulo di contatto

Informazioni di contatto

Utilizzi questo blocco per mostrare dettagli pratici insieme al modulo, come telefono, email, indirizzo, orari di apertura e icone dei social media. Include anche una propria area opzionale per l’heading, così può etichettare chiaramente questo contenuto quando la pagina contiene entrambi i blocchi.

1. Mantenga i dettagli brevi e facili da scorrere.
2. Mostri le icone social solo se quei profili sono attivi e gestiti.
3. Utilizzi le impostazioni dello sfondo del blocco se desidera che i dettagli di contatto abbiano l’aspetto di un pannello separato.

Scopra di più nella documentazione Company XYZ sul blocco Informazioni di contatto.

Modulo di contatto

Utilizzi questo blocco per visualizzare il modulo per i messaggi. Può stilizzare il pulsante di invio, renderlo a tutta larghezza su mobile e, facoltativamente, aggiungere una piccola area heading all’interno del blocco.

1. Aggiunga un breve heading o sottotitolo se i visitatori hanno bisogno di indicazioni sullo scopo del modulo.
2. Utilizzi un pulsante mobile a tutta larghezza quando desidera che il modulo sia più facile da completare su schermi più piccoli.
3. Mantenga visivamente semplice l’area del modulo se il blocco dei dettagli di contatto utilizza già un trattamento dello sfondo più marcato.
4. Esamini gli stati vuoto, di successo ed errore dopo la pubblicazione, così i messaggi di conferma e di validazione restano facili da leggere.

Scopra di più nella documentazione Company XYZ sul blocco Modulo di contatto.

Impostazioni standard della sezione

Impostazioni dell’header

Impostazioni dell’header controllano il contenuto introduttivo sopra i blocchi, inclusi allineamento, icona, didascalia, heading, testo di supporto e un pulsante opzionale. Utilizzi quest’area per introdurre la pagina, aggiungere struttura o includere un’azione secondaria come indicazioni stradali, prenotazione o contenuti di supporto.

Scelga con attenzione il tipo di heading in modo che la pagina mantenga una gerarchia dei contenuti chiara. Se aggiunge il pulsante opzionale, verifichi la sua posizione su desktop e mobile per assicurarsi che non interrompa il flusso principale di contatto.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione Le consentono di aggiungere un colore, una sfumatura, un’immagine o un video dietro l’intera sezione. Questa opzione funziona bene quando desidera che l’area contatti sia più evidente o visivamente separata dal contenuto circostante.

I media di sfondo possono influire sulla leggibilità e sull’equilibrio del layout, soprattutto quando sono mostrati entrambi i blocchi. Se utilizza un’immagine o un video, verifichi insieme i colori dell’overlay e del testo in modo che il contenuto resti chiaro.

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la sezione. Le utilizzi per dare più respiro all’area contatti o per compattare il layout se la pagina contiene già diverse sezioni.

Imposti intenzionalmente il padding per desktop e mobile. I layout di contatto spesso richiedono un po’ più di spazio sugli schermi piccoli per evitare una sensazione di affollamento.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea opzionale nella parte superiore o inferiore della sezione. È un modo semplice per separare l’area contatti dai contenuti vicini senza aggiungere un trattamento completo dello sfondo.

Utilizzi un colore personalizzato del separatore solo quando lo stile predefinito del bordo è troppo discreto. In molti layout, un divisore leggero è sufficiente.

Impostazioni di visibilità

Impostazioni di visibilità controllano se la sezione appare su desktop, su mobile o su entrambi. Questo è utile quando desidera un’esperienza di contatto diversa sugli schermi più piccoli.

Nasconda la sezione su un solo dispositivo solo se i visitatori dispongono ancora di un modo chiaro per contattarLa da lì. Eviti di creare un layout in cui il metodo di contatto principale scompare in modo inatteso.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza del contenuto all’interno della sezione e la larghezza del wrapper della sezione stessa. Le utilizzi per rendere il modulo più facile da leggere o per consentire allo sfondo di estendersi più del contenuto.

La larghezza del contenuto ha di solito l’effetto maggiore sul comfort e sulla leggibilità. Verifichi le modifiche alla larghezza sia nella pagina live sia nell’editor, poiché la vista dell’editor può far sembrare le differenze di layout più piccole di quanto siano.

Note sull’uso

1. Dia priorità all’azione principale. Metta per primo il modulo quando le richieste rapide sono più importanti, e metta per primi i dettagli di contatto quando i visitatori hanno di solito bisogno di informazioni di riferimento prima di inviare un messaggio.
2. Mantenga i dettagli aggiornati. Riveda regolarmente numeri di telefono, indirizzi email, contenuti dell’indirizzo, orari di apertura e link social in modo che la sezione resti affidabile.
3. Protegga la leggibilità. Quando utilizza sfondi personalizzati, overlay o override dei colori, si assicuri che il testo e il contenuto del modulo restino facili da leggere a colpo d’occhio.
4. Ottimizzi la scansione su mobile. Usi la larghezza del pulsante mobile, l’ordine dei blocchi e le impostazioni di visibilità per mantenere la sezione facile da usare sugli schermi più piccoli.
5. Usi la larghezza con moderazione. Larghezze moderate del contenuto in genere rendono i moduli di contatto e i dettagli aziendali più facili da scorrere rispetto a layout molto ampi.
6. Verifichi entrambe le configurazioni di viewport. Se utilizza media o scelte di layout diverse per desktop e mobile, confermi che ritaglio, comportamento di fallback e leggibilità del testo funzionino bene su ciascun dispositivo.