Fai apparire bene il sito su smartphone e tablet
Guarda come appare il tuo negozio su tablet e smartphone, nascondi i blocchi sugli schermi piccoli e regola la posizione di un blocco per una sola dimensione dello schermo.
La maggior parte dei clienti visita un negozio da smartphone, quindi le tue pagine devono funzionare a ogni dimensione. Progetti una volta sola e Payly adatta la pagina a tablet e smartphone. Questo articolo spiega cosa succede in automatico e come cambiarlo quando vuoi che un blocco si comporti in modo diverso su uno schermo più piccolo.
Come si adatta il tuo layout
I blocchi stanno nelle celle di una griglia a 12 colonne, mai in posizioni fisse in pixel, quindi non possono sovrapporsi su uno schermo piccolo. La pagina cambia layout in due punti:
- I tablet (schermi più stretti di 1024 pixel) mantengono la stessa griglia. Un blocco resta dov’è, a meno che tu non lo sposti per i tablet.
- Gli smartphone (760 pixel o meno) mettono ogni blocco su una riga propria a tutta larghezza. I blocchi si impilano dall’alto verso il basso nell’ordine in cui li leggi sul desktop: dall’alto verso il basso, poi da sinistra a destra.
Alcuni blocchi si adattano ulteriormente. I link dell’intestazione si raccolgono dietro un pulsante di menu, le griglie si riducono a una colonna e le gallerie e le strisce di loghi mostrano due colonne. Il risultato è un negozio che funziona su smartphone senza alcuna configurazione aggiuntiva.
Passa da una dimensione dello schermo all’altra
- Nella barra superiore dell’editor fai clic su Tablet o Mobile. La pagina si restringe per mostrare come appare a quella dimensione.
- Scorri la pagina in cerca di qualcosa che non si legge bene. Scorri e seleziona i blocchi come fai di solito.
- Fai clic su Desktop per tornare al layout a dimensione intera.
Questi pulsanti non servono solo per l’anteprima. Scelgono anche quale layout stai modificando. Quando passi a Tablet o Mobile, un messaggio ti ricorda che le modifiche valgono solo per quella dimensione. Tutto ciò che cambi lì non tocca il layout desktop.
Nascondi un blocco sugli schermi piccoli
Una foto grande o un lungo blocco decorativo può affollare uno smartphone. Puoi nasconderlo sugli schermi piccoli e mantenerlo sul desktop.
- Fai clic su Mobile (o Tablet) nella barra superiore.
- Seleziona il blocco.
- Nel pannello delle impostazioni apri Dimensioni e posizione.
- Attiva Nascondi su mobile (o Nascondi su tablet). Il blocco scompare da quella vista e non lascia spazi vuoti nella pagina online.
Un blocco nascosto sui tablet è nascosto anche sugli smartphone, a meno che tu non disattivi di nuovo l’interruttore mentre visualizzi Mobile. Per nascondere un blocco su ogni schermo, usa Nascondi questo blocco su Desktop.
Posiziona un blocco in modo diverso su una dimensione
- Scegli Tablet o Mobile nella barra superiore.
- Seleziona il blocco e apri Dimensioni e posizione.
- Cambia Inizia alla colonna, Larghezza in colonne, Inizia alla riga o Altezza in righe, oppure fai clic su Occupa tutta la larghezza. Puoi anche trascinare e ridimensionare il blocco nella pagina.
La barra in cima a Dimensioni e posizione indica quale layout stai modificando. Mostra Ereditato finché il blocco segue la dimensione più grande e un pulsante Ripristina quando il blocco ha impostazioni proprie. Fai clic su Ripristina per fare in modo che il blocco segua di nuovo la dimensione più grande. Fai clic su Usa questo layout su tutti gli schermi per copiare il layout attuale su ogni dimensione.
La barra superiore conta anche i blocchi diversi dal layout desktop, ad esempio 1 blocco è diverso su mobile. Fai clic sul conteggio per passare da uno di questi blocchi al successivo.
Mantieni un blocco uguale su ogni schermo
Attiva Uguale su tutti gli schermi in Dimensioni e posizione per dare a un blocco un solo layout ovunque. Le impostazioni che aveva per tablet o smartphone vengono rimosse e le modifiche successive valgono per tutte le dimensioni insieme.
Nota: spostare un blocco in un’altra sezione lo cambia su ogni dimensione dello schermo, quindi Payly lo consente solo su Desktop. Per posizionare un blocco in modo diverso sugli smartphone, aggiungilo a entrambe le sezioni e nascondi su ogni dimensione quello che non vuoi.
Controlla il risultato
Usa Anteprima per navigare tra le tue pagine alle larghezze di smartphone e tablet, e guarda il negozio pubblicato su uno smartphone vero prima di annunciarlo. Vedi Visualizza l’anteprima del sito prima di pubblicarlo.