Come migliorare l’aspetto dei banner su desktop e dispositivi mobili?

Link in evidenza

1. Documentazione Shopify sul caricamento delle immagini: best practice per banner con immagini, rapporti d’aspetto e punti focali
2. Panoramica delle funzionalità dell’editor del tema nella documentazione Shopify: visualizzare in anteprima e confrontare i layout desktop e mobile
3. Documentazione Shopify sulla personalizzazione delle sezioni
4. Documentazione Company XYZ sulle impostazioni di visibilità

Video utili

Video della Shopify Academy: personalizzare il tuo negozio

Video della Shopify Academy: personalizzare il tuo negozio

Inizia con una singola sezione Banner. Align ti consente di regolare il rapporto d’aspetto del banner e i contenuti multimediali di sfondo per i dispositivi mobili, così di solito puoi migliorare il layout sugli schermi più piccoli senza creare una seconda versione.

Regola il banner per i dispositivi mobili

1. Apri la sezione Banner nell’editor del tema.
2. Scegli il rapporto d’aspetto e i contenuti multimediali di sfondo da usare su desktop.
3. Imposta un rapporto d’aspetto per dispositivi mobili più alto se l’immagine o il testo risultano troppo compressi sugli schermi più piccoli.
4. Aggiungi contenuti multimediali di sfondo specifici per dispositivi mobili quando l’immagine desktop non viene ritagliata correttamente sui dispositivi mobili.
5. Visualizza l’anteprima sia su desktop sia sui dispositivi mobili prima di salvare.

Per gli strumenti di anteprima, consulta la documentazione Shopify sulle funzionalità dell’editor del tema

Tieni il testo importante e i dettagli delle immagini lontani dai bordi, dove è più probabile che si verifichi un ritaglio. Per indicazioni sulle immagini, consulta la documentazione Shopify sul caricamento delle immagini del tema

Usa banner separati solo quando necessario

Se la versione mobile richiede testo o contenuti diversi, oppure un layout sostanzialmente diverso, duplica la sezione Banner. Usa le impostazioni di visibilità per mostrare una versione su desktop e l’altra sui dispositivi mobili.

Nota

Mantieni coerenti il messaggio e la destinazione tra le versioni specifiche per dispositivo, così i clienti ricevono le stesse informazioni essenziali.