Modulo di accesso

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione di Company XYZ sulle impostazioni dello sfondo della sezione
3. Documentazione di Company XYZ sulle impostazioni del padding della sezione
4. Documentazione di Company XYZ sulle impostazioni dei separatori
5. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Usa questa sezione per controllare l’area principale di accesso che i clienti usano per accedere al proprio account. Ti aiuta a perfezionare il messaggio e la presentazione della pagina, mantenendo l’esperienza di accesso chiara e facile da usare.

Impostazioni standard della sezione

Le impostazioni principali ti consentono di personalizzare il titolo, il sottotitolo e l’icona opzionale mostrata con il modulo di accesso. Per una panoramica più ampia della configurazione, consulta documentazione Shopify su sezioni e blocchi. Questo è il posto migliore per aggiungere un breve messaggio di benvenuto, chiarire che la pagina è destinata ai clienti di ritorno o allineare il tono al resto del tuo negozio.

Se lasci vuoto il titolo o il sottotitolo, la sezione può usare invece il contenuto predefinito del tema. Questo è utile quando desideri una configurazione pulita in tempi rapidi, ma un testo personalizzato in genere crea un’esperienza dell’account più rifinita.

Consiglio

Mantieni il testo della pagina di accesso breve e pratico. Di solito i clienti arrivano qui per accedere, non per sfogliare o leggere messaggi promozionali.

Impostazioni colore

Queste impostazioni sostituiscono i colori generali del tuo tema solo per questa sezione. Usale quando l’area di accesso richiede un contrasto più forte, un tono più delicato o un migliore allineamento con uno sfondo personalizzato.

Puoi regolare separatamente l’icona, il testo principale e il sottotitolo per creare una gerarchia visiva chiara. Se aggiungi un’immagine di sfondo, un gradiente o un video, controlla la sezione sia su desktop sia su mobile per assicurarti che il testo rimanga facile da leggere. Le scelte di colore esplicite, i gradienti e le sostituzioni dei media rendono quest’area più indipendente, mentre i valori vuoti o trasparenti di solito mantengono lo stile di fallback del tema.

Gli sfondi decorativi non devono mai ridurre la leggibilità. Se l’area di accesso risulta più difficile da leggere, semplifica lo sfondo o aumenta la forza dell’overlay e il contrasto del testo.

Impostazioni standard della sezione

Impostazioni dello sfondo sezione

Usa Impostazioni dello sfondo sezione per aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione di accesso. In questa sezione, gli sfondi funzionano meglio quando supportano il tuo brand senza distrarre dal modulo.

Il colore e l’opacità dell’overlay aiutano a mantenere la leggibilità su immagini e video. I media di sfondo specifici per mobile sono particolarmente utili quando le immagini desktop si ritagliano in modo poco armonioso o risultano troppo pesanti su schermi più piccoli, quindi controlla entrambe le viewport se usi media diversi per ciascuna.

Impostazioni di padding

Usa Impostazioni di padding per controllare lo spazio sopra e sotto il contenuto di accesso. Questo è utile quando la pagina sembra troppo compressa o quando desideri che l’area di accesso si inserisca in modo più armonioso nel layout generale della pagina.

La spaziatura su desktop e mobile può essere regolata separatamente, così puoi mantenere equilibrata la sezione su diverse dimensioni di schermo. Un padding mobile più ridotto spesso aiuta a rendere il modulo visibile più rapidamente senza far sembrare la pagina affollata.

Impostazioni dei separatori

Usa Impostazioni dei separatori per aggiungere una linea nella parte superiore o inferiore della sezione. In una pagina di accesso, i separatori sono utili soprattutto quando desideri un confine più chiaro tra questa sezione e il contenuto circostante.

Qui di solito è sufficiente un divisore discreto. Se lasci trasparente il colore del separatore, la sezione torna al comportamento generale del colore del bordo.

Impostazioni di larghezza

Usa Impostazioni di larghezza per controllare la larghezza del contenuto e l’estensione complessiva della sezione. Per la maggior parte delle pagine di accesso, una larghezza del contenuto più stretta mantiene il modulo focalizzato e più facile da leggere.

La larghezza della sezione conta soprattutto quando usi anche un trattamento di sfondo. Se provi layout a tutta larghezza o full-bleed, visualizzali anche nella vetrina live, poiché l’inquadratura dell’editor può far apparire le modifiche alla larghezza in modo diverso rispetto alla pagina reale.

Note sull’uso

1. Mantieni il messaggio breve. Usa un titolo diretto e un testo di supporto conciso, così i clienti possono accedere rapidamente.
2. Proteggi il contrasto. Quando usi immagini, gradienti o video, regola overlay e colori del testo finché la sezione resta facile da leggere a colpo d’occhio.
3. Controlla entrambe le viewport. I controlli per desktop e mobile possono modificare layout, allineamento, visibilità e ritaglio, quindi verifica il modulo di accesso su entrambe le dimensioni dello schermo prima della pubblicazione.
4. Preferisci larghezze mirate. Un’area di contenuto più stretta di solito si adatta meglio alle pagine di accesso rispetto ai layout ampi, perché mantiene l’attenzione sul modulo.
5. Regola lo spazio mobile. Riduci il padding mobile se il modulo si trova troppo in basso sugli schermi più piccoli.
6. Usa stati chiari. Mantieni i messaggi di successo ed errore facili da leggere, così i clienti possono recuperare rapidamente quando il modulo è vuoto, inviato o mostra un feedback di validazione.