Vai al contenuto principale
Tutte le collezioniEditor di designVersione mobile
Impostazioni di progettazione della versione mobile
Impostazioni di progettazione della versione mobile

Personalizzare lo stile visivo della versione mobile nell'editor di design

Aggiornato questa settimana

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.

Mobile version settings in the design editor — Cartum

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.

Mobile version visual style — Cartum

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.

Mobile version header — Cartum

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.

Mobile version menu — Cartum

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.

Mobile version footer — Cartum

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à.

Mobile version homepage — Cartum

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:

  1. Fare clic sul pulsante + Aggiungi banner .

  2. Selezionate l'opzione Visualizza banner sulla versione del sito web - esclusivamente nella versione mobile o in entrambe le versioni desktop e mobile.

  3. 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.

  4. Scegliere un modello di banner dall'elenco a discesa. Un elenco completo dei modelli disponibili si trova nell'articolo Banner in versione mobile.

  5. Impostare le dimensioni, i margini e il raggio degli angoli per i banner di questa riga.

  6. Salvare le modifiche.

Mobile version banners settings — Cartum

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

Mobile version category page — Cartum

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.

Mobile version product card — Cartum

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à.

Mobile version product page — Cartum
Hai ricevuto la risposta alla tua domanda?