Modulo di contatto

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni dell’header
2. Documentazione di Company XYZ sulle impostazioni degli sfondi delle sezioni
3. Documentazione di Company XYZ sulle impostazioni dei colori
4. Documentazione di Company XYZ sulle impostazioni di visibilità
5. documentazione Shopify sulle sezioni e i blocchi

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa questo blocco per raccogliere i messaggi dei clienti in un layout pulito e brandizzato. Puoi introdurre il modulo con contenuto facoltativo dell’intestazione, regolare lo stile del pulsante di invio e mettere a punto l’aspetto del blocco su desktop e su mobile. Per una panoramica più ampia su come funzionano i blocchi nell’editor del tema, consulta la documentazione Shopify sulle sezioni e i blocchi

Impostazioni di base

Le impostazioni di base definiscono la principale call to action del modulo. Inizia da qui quando vuoi che il blocco sia più evidente o più facile da usare su schermi più piccoli.

1. Scegli uno stile di pulsante adatto alla pagina. Gli stili pieni di solito funzionano meglio quando l’invio di un messaggio è l’azione principale, mentre gli stili semplici risultano più leggeri quando il modulo si trova accanto ad altri contenuti.
2. Abilita un pulsante mobile a larghezza intera quando l’usabilità da telefono è importante. In questo modo l’azione di invio è più facile da individuare e toccare in layout più stretti.

Consiglio

Se questo blocco è lo scopo principale della pagina, usa uno stile di pulsante più deciso e l’opzione mobile a larghezza intera per rendere il completamento più immediato.

Impostazioni dell’header

Le impostazioni dell’header ti aiutano a spiegare lo scopo del modulo e a dare al blocco una struttura più forte. Sono facoltative, ma possono rendere la pagina più chiara e più facile da consultare. Consulta le impostazioni dell’header per il modello di header condiviso.

1. Aggiungi un titolo e un sottotitolo per dire ai visitatori a cosa serve il modulo, su cosa possono chiedere informazioni o quale risposta dovrebbero aspettarsi.
2. Usa con attenzione la didascalia e l’icona se desideri un po’ più di personalità o enfasi. Nei layout più formali, un header semplice solo testo è spesso la scelta più pulita.
3. Imposta il tipo di titolo in modo che corrisponda alla struttura della pagina così il blocco risulta integrato invece di competere con il titolo principale della pagina.
4. Allinea il testo in base al layout. L’allineamento a sinistra è di solito il più facile da leggere, mentre il testo centrato può funzionare bene in design più promozionali o minimalisti.

Evita di usare qui il livello di titolo superiore della pagina, a meno che questo blocco non debba contenere il titolo principale della pagina.

Impostazioni standard del blocco

Impostazioni dello sfondo del blocco

Queste impostazioni ti permettono di collocare il modulo su uno sfondo a colore, gradiente, immagine o video. Sono utili quando vuoi separare il blocco dai contenuti circostanti o trasformarlo in un’area di maggiore impatto brandizzato. Consulta le impostazioni dello sfondo per il comportamento condiviso.

1. Usa un colore pieno o un gradiente delicato quando la leggibilità è la priorità. Di solito è l’opzione più sicura per i moduli.
2. Aggiungi un overlay su immagini o video così l’area del titolo resta leggibile anche con contenuti visivi molto densi.
3. Imposta media specifici per mobile solo quando necessario se l’immagine o il video desktop si ritagliano in modo scomodo su schermi più piccoli.
4. Usa gli sfondi video con parsimonia così il movimento non distrae dalla compilazione del modulo.

Attenzione

Dopo aver aggiunto un’immagine di sfondo, un gradiente o un video, controlla il blocco sia su desktop sia su mobile per assicurarti che testo e azioni risaltino ancora chiaramente.

Impostazioni colore

Queste impostazioni sostituiscono i colori predefiniti per l’icona e il contenuto testuale del blocco. Usale quando il modulo si trova su uno sfondo personalizzato o deve corrispondere a una campagna o a uno stile di pagina specifici. Consulta le impostazioni colore per il comportamento colore condiviso.

1. Regola insieme i colori del titolo e del testo di supporto in modo che il blocco risulti coerente.
2. Usa il colore dell’icona come accento e non come principale elemento di enfasi.
3. Ricontrolla il contrasto dopo ogni modifica dello sfondo per mantenere il testo facile da leggere.

Impostazioni di visibilità

Le impostazioni di visibilità controllano se il blocco appare su desktop, su mobile o su entrambi. Questo è utile quando vuoi un layout mobile più semplice o un’esperienza di contatto specifica per dispositivo. Consulta le impostazioni di visibilità per il comportamento condiviso.

1. Nascondi il blocco su un solo dispositivo solo quando un altro layout gestisce bene quel pubblico.
2. Usa intenzionalmente la visualizzazione solo mobile o solo desktop per ridurre il disordine, non per rimuovere un importante percorso di contatto.

Note sull’uso

1. Mantieni chiaro lo scopo. Usa il titolo e il sottotitolo per spiegare a cosa serve il modulo e cosa devono inviare i visitatori.
2. Rendi l’azione facile da individuare. Scegli uno stile di pulsante che risalti abbastanza nella pagina, soprattutto su mobile.
3. Proteggi la leggibilità. Se aggiungi un’immagine di sfondo, un gradiente o un video, assicurati che testo e controlli restino chiari a colpo d’occhio.
4. Fai combaciare la gerarchia della pagina. Scegli un tipo di titolo adatto al resto della pagina così il blocco supporta il layout invece di competere con esso.
5. Usa la visibilità con intenzione. Nascondi il blocco su desktop o mobile solo quando i visitatori hanno comunque un modo chiaro per contattarti.
6. Controlla entrambe le viewport. Rivedi il blocco su desktop e su mobile dopo aver apportato modifiche al layout, all’allineamento, alla visibilità o ai media, poiché le due viste possono comportarsi in modo diverso.
7. Mantieni disponibile lo stile di fallback. Lascia i colori e i media nei loro valori predefiniti o vuoti quando vuoi che resti attivo lo stile integrato del theme; usa sovrascritture esplicite solo quando vuoi che il blocco risulti più indipendente.
8. Scegli i media per chiarezza. Se usi media diversi per desktop e mobile, verifica che ritaglio, caricamento e leggibilità del testo funzionino bene in entrambe le viste.
9. Rendi leggibili i messaggi di stato. Mantieni qualsiasi messaggio di successo o errore facile da scansionare, così i visitatori possono completare il modulo senza confusione.