Una pagina Responsive è un'unica pagina che si riorganizza per adattarsi a ogni schermo. La costruisci con sezioni impilate lungo la pagina, e usi i Contenitori per mettere gli elementi uno accanto all'altro sul computer e impilarli sul telefono. Per i pochi oggetti che devono stare in un punto preciso, come un'etichetta su una foto, spunta Consenti il trascinamento libero e fissali.
Prima di iniziare
- Controlla il tipo di pagina. Seleziona la pagina e vai su Ispettore > Impostazioni pagina > Layout di pagina. Deve indicare Responsive. Se indica Layout centrato, vedi Il mio sito web non si vede bene sul telefono: come funziona la versione mobile in EverWeb.
- Vuoi trasformare una pagina esistente in una pagina responsive? Cambiare il Layout di pagina può riorganizzare tutto il tuo design, e non puoi annullare l'operazione. È più sicuro aggiungere una nuova pagina e spostarci i contenuti: fai clic su Aggiungi pagina, scegli Responsive nel menu filtro in alto nella Theme Template Chooser (la finestra di scelta dei modelli), scegli Blank Responsive (Responsive vuoto) e lo stile di pagina Home, poi fai clic su Seleziona.
Come è costruita una pagina responsive
Ogni oggetto a Larghezza piena, e ogni Contenitore, è una sezione. Le sezioni stanno una sotto l'altra nello stesso ordine su ogni schermo e si restringono per starci. Un Contenitore dispone ciò che ha all'interno, e puoi mettere Contenitori dentro altri Contenitori, per esempio una Riga che contiene due Colonne. Gli oggetti che non possono essere a Larghezza piena, come alcuni widget, devono stare dentro un Contenitore. Tienili larghi circa da 280 a 320 pixel, così stanno su un telefono.
Aggiungere un Contenitore
- Fai clic su Contenitori nella barra degli strumenti.
- Scegli Riga contenitore, Colonna contenitore o Flusso libero del contenitore.
- Trascinaci dentro gli oggetti, oppure fai clic sul pulsante + al centro del Contenitore vuoto.
Hai già gli oggetti sulla pagina? Fai clic su ciascuno tenendo premuto Maiusc, fai clic con il tasto destro (o Control-clic su Mac), scegli Contieni come, poi Riga, Colonna o Flusso libero.
| Layout | Sul computer | Sul telefono |
|---|---|---|
| Colonna | Oggetti impilati dall'alto in basso | Ancora impilati, ognuno più stretto |
| Riga | Oggetti uno accanto all'altro | Restano uno accanto all'altro e si stringono, a meno che non imposti A capo (vedi sotto) |
| Flusso libero | Posizioni gli oggetti dove vuoi al suo interno | Gli oggetti mantengono le posizioni a cui sono fissati, quindi controllalo su un telefono |
Per cambiarlo in seguito, seleziona il Contenitore facendo clic su una sua parte vuota (o fai clic con il tasto destro e usa Scegli Livello), poi vai su Ispettore > Impostazioni widget (l'ingranaggio, l'ultima icona) e cambia Visualizza > Disposizione.
Far impilare i contenuti sul telefono
- Righe: in Impostazioni widget > Visualizza, imposta A capo su A capo. Gli oggetti scendono così uno sotto l'altro quando lo schermo diventa troppo stretto. L'impostazione predefinita, No Wrap (nessun a capo), li tiene su una sola riga.
- Vuoi che sul telefono il secondo oggetto stia sopra, per esempio la foto sopra il suo testo? Imposta A capo su Reverse Wrap (a capo invertito).
- Oggetti uno accanto all'altro in una Riga: togli la spunta da Larghezza piena in Ispettore > Metriche e dai a ciascuno una larghezza. Un oggetto a Larghezza piena in una Riga che va a capo occupa una riga tutta per sé.
- Oggetti in una Colonna o direttamente sulla pagina: spunta Larghezza piena, poi inserisci una Larg. max così non si allargano troppo su uno schermo grande. Il mio sito web si vede bene sul computer, ma sul telefono è tagliato o disordinato ne parla più a fondo.
- Lascia l'Altezza su Auto (Impostazioni widget > Dimensionamento), così il Contenitore può crescere quando i contenuti si impilano.
Posizionare con precisione un oggetto: trascinamento libero e fissaggio
In EverWeb 4.5 e versioni successive puoi posizionare un oggetto ovunque in una pagina Responsive, direttamente sulla pagina o dentro un Contenitore:
- Seleziona l'oggetto e vai su Ispettore > Metriche.
- Spunta Consenti il trascinamento libero e trascina l'oggetto dove vuoi.
- Fai clic su Pin Settings (impostazioni di fissaggio) e scegli dove fissarlo, per esempio in alto e a destra. Spunta Constrain to edge (vincola al bordo) per tenerlo proprio su quel bordo.
Un oggetto posizionato liberamente non spinge in basso nient'altro. Usalo per pochi oggetti, non per un'intera pagina: se ogni oggetto è posizionato liberamente, sul telefono non si impila niente. Per rimettere un oggetto nel flusso, togli la spunta da Consenti il trascinamento libero. Per trascinare un oggetto fuori da un Contenitore a flusso libero, tieni premuto Command (Mac) o Alt (Windows) mentre trascini.
Perché non usare le Righe responsive?
Le Righe responsive (Responsive Rows) sono la versione precedente dei Contenitori, e non le consigliamo più per le nuove pagine. Quelle che hai già continueranno a funzionare.
| Contenitore | Riga responsive | |
|---|---|---|
| Layout | Riga, Colonna o Flusso libero | Solo Riga |
| Larghezza | Larghezza piena o una larghezza impostata | Solo larghezza piena |
| Dentro altri Contenitori | Sì | No |
| Trascinamento libero e fissaggio all'interno | Sì | No, la casella è disattivata (in grigio) |
Per sostituirne una, aggiungi una Riga contenitore accanto, trascinaci gli oggetti, poi elimina la Riga responsive vuota. Eliminandola elimini anche tutto ciò che c'è ancora dentro, quindi verifica prima che sia vuota, e usa Modifica > Annulla se serve.
In quale Contenitore si trova questo oggetto?
Fai clic con il tasto destro sull'oggetto e scegli Incorpora in. L'elenco mostra il Contenitore in cui si trova e ti permette di spostarlo in un altro. Dai un nome ai tuoi Contenitori in Impostazioni widget, per esempio "Intestazione" o "Servizi", così l'elenco è più chiaro. Per selezionare oggetti nascosti o sovrapposti, vedi Perché questo oggetto non va dove lo trascino?.
Verificare che funzioni
Restringi la finestra di EverWeb trascinandone il bordo e guarda la pagina riorganizzarsi. Poi fai clic su Anteprima, scegli Preview QR Code (codice QR di anteprima) e scansionalo con il telefono. Niente deve scorrere di lato o stare sopra qualcos'altro. Se succede, vedi Il mio sito web si vede bene sul computer, ma sul telefono è tagliato o disordinato.
Hai poco tempo? Possiamo ricostruire noi il tuo sito web come sito responsive. Chiedi al supporto un preventivo senza impegno.
Articoli correlati
- Il mio sito web non si vede bene sul telefono: come funziona la versione mobile in EverWeb
- Il mio sito web si vede bene sul computer, ma sul telefono è tagliato o disordinato
- Perché questo oggetto non va dove lo trascino?
- Metti la stessa intestazione, lo stesso menu e lo stesso piè di pagina su ogni pagina con una pagina Mastro