Crea la versione per telefono di una pagina con Layout centrato (Pagina mobile), passo per passo

Una Pagina mobile è una seconda copia stretta di una pagina, creata apposta per i telefoni. La costruisci a 480 pixel di larghezza, poi colleghi a essa la tua pagina desktop. Quando qualcuno apre la pagina desktop su un telefono, EverWeb lo porta automaticamente alla Pagina mobile. Il tuo design desktop resta esattamente com'è.

Quando ti serve

  • Una pensione ha creato il suo sito web con iWeb e ne apprezza l'aspetto. Vuole che chi visita da telefono veda i prezzi e un pulsante Prenota senza dover ingrandire.
  • Un idraulico vuole una versione per telefono della home page che stia in una sola schermata: numero di telefono, zona servita e un modulo di contatto.
  • Un coro vuole che le date dei concerti siano leggibili su un telefono, mentre le pagine desktop complete restano come sono.

Pagina mobile o Responsive?

Usa le Pagine mobile se il tuo sito web ha il Layout centrato e sei soddisfatto del suo design. Se riparti da zero o hai molte pagine, le pagine Responsive richiedono un solo design per pagina. Vedi Devo riprogettare il mio sito web EverWeb per i dispositivi mobili?

Per controllare il tipo di pagina, seleziona una pagina e vai su Ispettore > Impostazioni pagina > Layout di pagina. Dovrebbe indicare Layout centrato. Non cambiare il Layout di pagina di una pagina esistente: può riorganizzare il tuo design, e non puoi annullare l'operazione.

1. Aggiungi la Pagina mobile

  1. Fai clic su Aggiungi pagina nella barra degli strumenti.
  2. Nella finestra di scelta dei template del tema, usa il menu dei filtri per mostrare solo i template a Larghezza fissa, scegli il tuo tema e seleziona il suo stile di pagina Mobile. Fai clic su Seleziona.
  3. Rinominala in modo da distinguerla, ad esempio Home Mobile.

Il tuo tema non ha uno stile Mobile? Aggiungi una qualsiasi pagina con Layout centrato e imposta Larghezza del contenuto: su 480 in Ispettore > Impostazioni pagina > Layout di pagina.

Se le tue pagine usano un Template Mastro, dai alle tue Pagine mobile un Template Mastro dedicato, largo 480 pixel. Una pagina prende la larghezza dal suo Template Mastro. Vedi Metti la stessa intestazione, lo stesso menu e lo stesso piè di pagina su ogni pagina con una pagina Mastro.

2. Impostala come pagina per telefono

Con la Pagina mobile selezionata, vai su Ispettore > Impostazioni pagina:

  1. In Impostazioni mobile, lascia Pagina mobile su Nessuna e spunta Questa pagina è per dispositivi mobili. Così i motori di ricerca sanno che è la versione per telefono della tua pagina desktop, non un duplicato.
  2. Togli la spunta da Includi pagina nel menu di navigazione, così la Pagina mobile non compare nel tuo menu desktop.

3. Aggiungi i contenuti

Copia dalla pagina desktop ciò che serve a chi visita da telefono (Modifica > Copia, poi Modifica > Incolla sulla Pagina mobile) e disponilo in un'unica colonna.

  • Tieni: il logo, il numero di telefono, l'indirizzo, gli orari di apertura, la foto principale e i pulsanti per cui le persone vengono sul sito.
  • Semplifica: colonne affiancate, tabelle larghe, testi lunghi e immagini decorative.
  • Metti ogni paragrafo nella sua Casella di Testo. Un'unica grande Casella di Testo fa sì che il testo si comprima o si sovrapponga su un telefono.
  • Rendi i pulsanti abbastanza grandi da toccarli e il testo più grande che nella pagina desktop.

Il menu: aggiungi una Barra di navigazione, vai su Ispettore > Impostazioni widget e spunta Barra di navigazione reattiva sotto Opzioni responsive. Su una pagina di 480 pixel appare come un pulsante del menu (tre linee). Elenca le tue pagine desktop: quando chi visita da telefono ne tocca una, quella pagina lo porta alla sua Pagina mobile, se ne ha una.

4. Collega la pagina desktop alla Pagina mobile

  1. Seleziona la pagina desktop.
  2. Vai su Ispettore > Impostazioni pagina > Impostazioni mobile.
  3. Imposta Pagina mobile su Una delle mie pagine, poi scegli la Pagina mobile in Pagina.

Ripeti i passaggi da 1 a 4 per ogni pagina che vuoi sui telefoni. Le pagine senza una Pagina mobile si aprono comunque su un telefono alla larghezza desktop.

5. Provala, poi pubblica

  1. Fai clic su Anteprima nella barra degli strumenti, scegli Preview QR Code (codice QR di anteprima) e inquadra il codice con la fotocamera del telefono. Telefono e computer devono essere sulla stessa rete Wi-Fi. Apri la pagina desktop: dovrebbe passare alla Pagina mobile.
  2. Vai su File > Pubblica l'intero sito.
  3. Controllala sul telefono in una finestra privata.

Solo gli schermi più stretti di 700 pixel, cioè i telefoni, vanno alla Pagina mobile. Tablet e computer vedono la pagina desktop.

Pagine protette da password

Simple Password protegge le directory. Tieni ogni pagina e la sua Pagina mobile dalla stessa parte: le Pagine mobile delle pagine pubbliche fuori dalla directory protetta, e le Pagine mobile delle pagine protette al suo interno. Altrimenti a chi visita da telefono verrà chiesta una password su una pagina pubblica. Vedi Posso proteggere il mio sito web con una password? Simple Password e Membership Sites

Due pagine da tenere aggiornate

Ogni modifica a una pagina desktop, come nuovi prezzi o nuove date, va fatta anche sulla sua Pagina mobile. Se diventa troppo impegnativo, valuta le pagine Responsive.

Problemi comuni

Cosa vedi Cosa fare
Un telefono mostra ancora la pagina desktop Controlla che le Impostazioni mobile di quella pagina puntino alla Pagina mobile giusta, pubblica e controlla in una finestra privata
Un telefono chiede una password La Pagina mobile si trova in una directory protetta. Spostala fuori, oppure fai puntare la pagina desktop a un'altra pagina
Un iPad mostra la pagina desktop Funziona così: solo i telefoni vanno alla Pagina mobile
Qualcosa compare su ogni Pagina mobile Si trova sul Template Mastro per mobile. Modificalo o eliminalo lì
Il testo si sovrappone o si comprime Metti ogni paragrafo nella sua Casella di Testo. Dimensione Minima del Carattere è per le pagine Responsive, quindi qui lasciala a 0

Articoli correlati

  • 0 Utenti hanno trovato utile questa risposta
Hai trovato utile questa risposta?

Articoli Correlati

Il mio sito web non si vede bene sul telefono: come funziona la versione mobile in EverWeb

Come risolvere dipende dal tipo di pagina che hai creato. EverWeb ne ha due. Pagina...

Devo riprogettare il mio sito web EverWeb per i dispositivi mobili?

No. Il tuo sito web EverWeb funziona già su telefoni e tablet così com'è. Quanto bene si adatta a...

Il mio sito web si vede bene sul computer, ma sul telefono è tagliato o disordinato

Nella maggior parte dei casi, uno o più oggetti della pagina sono più larghi dello schermo di un...

Crea una pagina responsive con i Contenitori, in modo che sul telefono si impili in modo ordinato

Una pagina Responsive è un'unica pagina che si riorganizza per adattarsi a ogni schermo. La...

Nascondi o mostra oggetti su telefoni, tablet o computer (Show on Device)

Puoi mostrare un oggetto su alcune dimensioni dello schermo e nasconderlo su altre. Selezionalo,...