Con l'editor di progettazione, è possibile impostare parametri separati per la versione mobile del sito web, che differiranno dalla versione desktop. In particolare, è possibile modificare l'ordine di visualizzazione dei blocchi nella pagina principale, impostare banner diversi per i dispositivi mobili, spostare elementi nella pagina dei prodotti, ecc.
È possibile personalizzare il design per la versione mobile in Sito web → Design → Editor design → Versione mobile.
Qui è possibile personalizzare quasi tutte le stesse parti della versione mobile e di quella desktop:
Stile visivo
Intestazione
Menu
Piè di pagina
Pagina iniziale
Pagina di categoria
Scheda prodotto
Pagina del prodotto
Attenzione: non apportate modifiche globali alla versione mobile a meno che non sia davvero necessario, perché le classifiche dei motori di ricerca tengono conto anche del fattore di coincidenza delle informazioni tra la versione desktop e quella mobile. Tutti i siti di Cartum sono creati tenendo conto dei più recenti requisiti per le pagine web mobile-friendly.
Stile visivo
In questa scheda è possibile impostare i propri font e sfondi di pagina per la versione mobile, nonché aggiungere accenti di colore al menu di azione a discesa, modificare i colori dei badge quantità nel filtro o nella sezione recensioni della pagina del prodotto.
Intestazione
L'intestazione è un blocco superiore che viene visualizzato su tutte le pagine del sito. L'intestazione per la versione mobile ha una struttura speciale adattata alle esigenze di un visitatore su un dispositivo mobile.
È possibile impostare il colore di sfondo, il colore degli elementi e una delle tre opzioni per la larghezza dell'intestazione in pixel.
L'intestazione mobile ha tre sezioni di uguale larghezza. In questa scheda delle impostazioni, è possibile disattivare alcuni elementi dell'intestazione, oltre a disporli tra le sezioni (colonne) dell'intestazione.
L'intestazione della versione mobile può contenere gli elementi funzionali più importanti presenti nella versione desktop, vale a dire
Pulsante del menu
Logotipo
Icona di ricerca
Informazioni di contatto
Icona di confronto
Icona dei preferiti
Carrello della spesa
Menu
In questa scheda è possibile personalizzare la visualizzazione del menu e il livello di visualizzazione delle categorie annidate nel menu del catalogo nel pannello funzionale a comparsa.
Piè di pagina
Nella versione mobile del sito, il piè di pagina ha un aspetto semplificato. Per il piè di pagina è possibile impostare il colore dello sfondo, il colore degli elementi che lo compongono e il colore dei link, ad esempio il link alla versione completa del sito.
Homepage
Blocchi della homepage
Nel blocco Homepage dell'editor di design è possibile vedere l'ordine dei blocchi e dei banner nella homepage della versione mobile del sito. Mostra anche quali blocchi sono abilitati.
È possibile modificare l'ordine dei blocchi e dei banner sulla home page trascinando i blocchi in nuove posizioni.
È possibile vedere le impostazioni di stile disponibili per il blocco facendo clic sulla barra del blocco stesso: il pannello con le impostazioni del blocco si espanderà.
Per saperne di più su tutti i possibili blocchi della homepage, consultare l'articolo separato.
Impostazione delle righe dei banner
È possibile aggiungere alla homepage un numero qualsiasi di spazi per l'inserimento di banner - linee di banner -.
Per aggiungere una nuova riga di banner:
Fare clic sul pulsante + Aggiungi banner .
Selezionate l'opzione Visualizza banner sulla versione del sito web - esclusivamente nella versione mobile o in entrambe le versioni desktop e mobile.
Impostate il nome del banner: cercate di dargli un nome chiaro, perché con questo nome potrete identificare la linea desiderata quando lavorerete con i banner in futuro.
Scegliere un modello di banner dall'elenco a discesa. Un elenco completo dei modelli disponibili si trova nell'articolo Banner in versione mobile.
Impostare le dimensioni, i margini e il raggio degli angoli per i banner di questa riga.
Salvare le modifiche.
Nota bene: i banner separati per la versione desktop possono essere impostati in Sito web → Design → Editor design → Homepage.
La riga del banner non verrà visualizzata sul sito web finché non si aggiungeranno le immagini appropriate in Sito web → Banner.
Pagina di categoria
Per la pagina del catalogo nella versione mobile, è possibile impostare i parametri per la visualizzazione dei seguenti elementi:
Pannello di ordinamento e visualizzazione
Filtri
Menu delle sottocategorie
Scheda prodotto
Sui dispositivi mobili, la mini-scheda non cambia quando ci si passa sopra il mouse, quindi abbiamo aggiunto delle opzioni che consentono di modificare le informazioni della scheda in modo specifico per i dispositivi mobili.
Pagina del prodotto
Il layout della pagina del prodotto nella versione mobile è composto da quattro sezioni, che si possono vedere in questa scheda delle impostazioni. Sui telefoni cellulari, le sezioni sono posizionate in sequenza una dopo l'altra: in alto, a sinistra, a destra e infine in basso. Sui tablet, le sezioni sinistra e destra saranno affiancate.
Per la versione mobile del sito, è possibile modificare la posizione di gruppi di elementi e di singoli elementi nel layout della pagina, spostando i pannelli degli elementi tra le sezioni e cambiandone l'ordine, e attivare/disattivare singoli elementi secondo le necessità.