Configurazione del design del Sito istantaneo (legacy)

Per iniziare a vendere online in poco tempo, gli utenti hanno a disposizione un modello di sito istantaneo responsive. Il sito avrà un aspetto professionale su tutti i dispositivi: desktop, tablet e mobile. È possibile cambiare facilmente l'aspetto del Sito istantaneo a proprio piacimento. Le persone inesperte in campo tecnologico hanno la possibilità di scegliere tra le opzioni di aspetto preimpostate disponibili nella sezione → Sito web del pannello di controllo del negozio. Gli utenti esperti di codice possono applicare modifiche al codice CSS e rendere unico l'aspetto del proprio negozio.

Ordine delle sezioni

Il Sito istantaneo è composto delle seguenti sezioni:

  • Copertina (il primo blocco)
  • Negozio
  • Missione aziendale (Perché scegliere noi)
  • Chi siamo
  • Testimonianze clienti
  • Posizione
  • Contatti 

È possibile nascondere qualsiasi sezione e riordinare le sezioni a piacere. Per farlo, accedere al pannello di controllo del negozio → Sito web, fare clic su Modifica e quindi su Organizza sezioni:

Screen_Capture_on_2019-10-11_at_21-51-23.gif

Ad esempio, nella fase iniziale della creazione del negozio, è possibile nascondere la sezione dedicata alle testimonianze dei clienti fino a quando inizieranno ad arrivare le recensioni dei clienti. Nel caso di attività stagionale, è possibile nascondere qualsiasi parte del proprio negozio e renderla nuovamente disponibile quando si riprende l'attività. Se si desidera visualizzare l'immagine di copertina più in basso, è possibile posizionarla dopo qualsiasi altra sezione del proprio Sito istantaneo, e così via.

Se non si ha bisogno della copertina, può essere trasformata in un piccolo menu in alto alla pagina.

Temi di copertina

La sezione Copertina consente di presentare il negozio ai potenziali clienti. È possibile scegliere tra 79 temi disponibili per la copertina del negozio. Per farlo, nel pannello di controllo del negozio andare a Sito web → Aspetto del sito → fare clic su Modifica → Temi. Scegliere il tema che più si addice alla propria attività:

Choose_a_design_theme_for_instant_site.png

I temi sono modificabili: è possibile personalizzare l'immagine di copertina, cambiare la tipografia, e così via. Le modifiche si possono apportare nelle rispettive sezioni dell'Editor del Sito istantaneo. 

Sfondo della copertina

Nel menu Opzioni per lo sfondo sono disponibili opzioni come Colore, Gradiente, Immagine o Video per personalizzare lo sfondo del primo blocco del proprio Sito istantaneo:

image7.png

L'opzione Colore è utile se si desidera avere un aspetto minimalista oppure per abbinare il colore dello sfondo a quello dell'immagine di copertina (vedi informazioni sul layout della copertina). È possibile impostare qualsiasi colore come colore di sfondo:

image22.png

Per un aspetto più fantasioso è possibile applicare un Gradiente allo sfondo della copertina. L'utente può scegliere il gradiente desiderato dalla galleria oppure crearne uno nuovo mescolando due colori a scelta e specificando l'angolo di visualizzazione:

image17.png

Come Immagine di copertina è possibile usare una propria foto o una foto del proprio team, dei prodotti venduti o qualsiasi altra immagine che possa attirare i potenziali clienti e creare un'immagine positiva dell'azienda. Le dimensioni consigliate sono di 1400 x 1050 pixel o superiori, formato JPG, PNG o GIF:

image7.png

Se non si hanno a disposizione foto adatte per la copertina, è possibile trovare bellissime foto sui siti di foto stock, come Shutterstock, Depositphotos, Pixabay e altri.

Per rendere i testi più facili da leggere (così come per creare la giusta atmosfera) è possibile applicare un effetto di sovrapposizione all'immagine di sfondo. Può essere un colore o un gradiente con un angolo personalizzato:

image21.png

È possibile aggiungere facilmente un video Youtube/Vimeo come sfondo per dimostrare i migliori prodotti oppure per animare il sito in occasione di qualche evento. Per farlo, è sufficiente inserire il link del video nel campo di testo e salvare le modifiche, dopodiché il video sarà riprodotto in modalità silenziosa come sfondo della copertina:

image3.gif

È possible applicare un effetto di sovrapposizione al video di sfondo per rendere i testi più leggibili. Sono disponibili alcune varianti tra cui scegliere, in alternativa è possibile scegliere il colore o il gradiente desiderato.

Layout della copertina

Nella sezione Layout della copertina è possibile impostare quale parte del primo blocco deve essere occupata dalla copertina. Sono disponibili sei opzioni tra cui scegliere:

image4.png

Se si sceglie un layout a metà schermo oppure con barra laterale e con immagine di sfondo, le dimensioni consigliate dell'immagine di copertina sono di 1800 х 700 px o 1200 х 1200 px rispettivamente.

Se non si ha bisogno della copertina, selezionare l'opzione Menu principale per trasformarla in una piccola intestazione.

Inoltre, è possibile posizionare e allineare l'intestazione e la descrizione, in modo da rendere più armonioso l'aspetto della copertina.

Pulsante di azione

Il Pulsante di azione porta i visitatori direttamente al catalogo dei prodotti. Per impostazione predefinita, il pulsante è abilitato e il testo del pulsante è "Acquista subito":

image2.png

È possibile cambiarne il testo a proprio piacimento con l'aiuto del campo Testo pulsante. Ad esempio, se si vendono biglietti online, il testo del pulsante potrebbe essere "Prenota subito". Per i prodotti digitali, come e-book, immagini e qualsiasi altro materiale scaricabile, il testo del pulsante potrebbe essere "Scarica adesso".

Tipografia degli elementi della copertina

Se si desidera cambiare il colore e le dimensioni del pulsante di azione e il tipo di carattere del suo testo, tali modifiche possono essere apportate avvalendosi delle opzioni disponibili nel menu Tipografia. Il colore del testo di adatta automaticamente a quello del pulsante, in modo da renderlo più leggibile.

Oltre a queste opzioni, nella sezione Tipografia è possibile configurare l'aspetto dell'intestazione e della descrizione del Sito istantaneo: si può scegliere tra oltre 60 tipi di carattere, nonché ingrandire o rimpiccolire i caratteri e cambiarne il colore.

image10.gif

Per scegliere i colori che si abbinano bene, è possibile usare siti come Canva e Color Hunt per trarre ispirazione e trovare la palette perfetta, oppure utilizzare un servizio come Image Color Picker per scoprire il codice colore della propria immagine di copertina.

Logo del negozio

È possibile caricare un logo che sarà visualizzato nelle pagine del negozio. Il logo sarà inoltre utilizzato per impostazione predefinita nelle notifiche e-mail, nelle fatture e come favicon.

Se successivamente il logo del negozio sarà cambiato, sarà necessario caricare manualmente il nuovo logo per le notifiche e-mail e le fatture nelle rispettive impostazioni. 

Le dimensioni del logo devono essere di almeno 140 x 140 px (almeno 280 x 280 px per una buona resa sui display Retina). Può essere caricata un'immagine più grande. In tal caso, lo ridimensioneremo automaticamente per adattarla al blocco del logo di 480 x 140 px.

I formati immagine supportati sono JPEG, PNG, GIF.

Per aggiungere un logo al proprio negozio: 

  1. Nel pannello di controllo del negozio, andare a Sito web e premere Modifica.
  2. Nella pagina che si aprirà, cliccare su Titolo & Immagine copertina.
  3. Fare clic su Logo del negozio
  4. Premere Carica logo.
  5. Selezionare la posizione desiderata dal menu a discesa Posizione del logo. Vi è anche l'opzione per nascondere il logo e usarlo solo come favicon.
  6. Se si desidera ritagliare il logo a forma di cerchio, abilitare l'opzione Logo rotondo.

    Upload_store_logo.png

Se si desidera usare la favicon e nascondere il logo, ciò piò essere fatto tramite codice CSS:

  1. Dal pannello di controllo del negozio, accedere alla sezione Aspetto.
  2. Fare clic su Modifica tema se si ha un tema CSS personalizzato attivo o scorrere in basso e fare clic su Crea temaAggiungi nuovo tema CSS.
  3. Incollare il seguente codice nel proprio tema CSS:
    div.cover__logo { display: none;}
  4. Salvare le modifiche.

Aggiornare la vetrina del negozio per vedere le modifiche.

Freccia di scorrimento

Il menu Freccia di scorrimento permette di nascondere la freccia che indirizza i visitatori al negozio o aggiungere un testo per invitarli a visitarlo:

image13.png

Menu principale 

Nella sezione Menu principale è possibile personalizzare l'aspetto della barra superiore del proprio Sito istantaneo e scegliere gli elementi da visualizzare: numero telefonico, orari di apertura, posizione geografica, link agli account social e così via.

Screenshot_2020-10-06_at_10.11.32.png

Per dare all'intestazione un aspetto più tradizionale, abilitare l'opzione Mostra la navigazione. La navigazione include i link alle seguenti sezioni del Sito istantaneo di una pagina: Negozio, Chi siamo, Posizione, Contattaci:

image9.png

Opzioni di design preimpostate

È possibile personalizzare l'aspetto del proprio negozio in modo che rifletta al meglio lo stile aziendale. Per accedere alle impostazioni di design:

Per accedere alle opzioni relative al design del negozio, nel pannello di controllo del negozio andare a Sito webModificaNegozio.

image14.gif

Le opzioni sono le stesse disponibili nella pagina Aspetto del  pannello di controllo del negozio. Le modifiche qui apportate saranno applicate a tutte le vetrine.

I seguenti parametri sono modificabili tramite di rispettive opzioni: Dimensione delle miniature, Proporzioni dell'immagine, Allineamento del testo e Bordo della scheda prodotto.

image1.png

Le immagini di grandi dimensioni sono una buona scelta per mostrare i prodotti più in dettaglio. Le immagini di medie dimensioni sono adatte per la maggior parte dei prodotti, mentre le immagini piccole consentono di inserire più prodotti in una pagina. Le opzioni disponibili per il parametro Proporzioni dell'immagine offrono un modo flessibile per meglio ordinare immagini orizzontali, verticali e quadrate.

Prodotti e categorie

Per personalizzare l'aspetto delle pagine dove sono elencati i prodotti, espandere il menu Prodotti e categorie. Qui è possibile modificare la visibilità dei seguenti parametri: Nome prodotto, Prezzo, Codice articolo, pulsante "Acquista ora" e Immagine prodotto aggiuntiva:

image8.png

Per alleggerire la pagina, è possibile nascondere il Codice articolo e i pulsanti Acquista ora o mostrarli solo passandoci sopra il mouse.

Se nella home page del negozio sono visualizzate le schede delle categorie, è possibile configurare la Posizione del nome delle categorie.

Il blocco Navigazione permette di attivare/disattivare le opzioni Percorso di navigazione e "Ordina per":

image20.png

Infine, qui è possibile abilitare l'opzione Scurire lo sondo delle anteprime per farle risaltare sullo sfondo del negozio.

Pagina prodotto

Sotto il menu Pagina prodotto sono disponibili alcune opzioni preimpostate per personalizzare l'aspetto delle pagine con informazioni dettagliate sui prodotti. Qui è possibile configurare il Layout della pagina, il Layout della galleria di immagini e gli elementi della Barra laterale:

image6.png

Se si desidera cambiare l'ordine dei blocchi della barra laterale, è possibile semplicemente trascinarli nella posizione desiderata.

È possibile caricare foto aggiuntive per mostrare i prodotti nel miglior modo possibile. La galleria di immagini può includere foto ingrandite per mostrare i dettagli più importanti dei prodotti, foto laterali o da dietro, foto di prodotti o accessori correlati.

Altre impostazioni

Nel menu Altre impostazioni è possibile configurare la visibilità delle icone visualizzate sotto le liste dei prodotti. È possibile disabilitare il Menu a piè di pagina, il Link "Accedi" e i Breadcrumbs (Percorsi di navigazione):

image11.png

Nel complesso, le opzioni preimpostate offrono molta flessibilità per creare una pagina web originale e dall'aspetto professionale, che mostri i prodotti in modo efficace.

Se il negozio necessita di una personalizzazione più avanzata e si ha una buona conoscenza di CSS, è possibile realizzare il proprio tema CSS da zero. Se non si ha esperienza di codice, ma si desidera avere un tema CSS personalizzato, è possibile assumere professionisti per creare un design personalizzato per te su base retribuita.

Articoli correlati

Modifica dell'indirizzo web del Sito istantaneo

Questo articolo ti è stato utile?

Fantastico! Grazie per il tuo feedback!

Grazie per il tuo feedback!

Vedi tutti gli articoli
Utenti che ritengono sia utile: 0 su 2
Utilizziamo i cookie e tecnologie simili per ricordare le tue preferenze, misurare l'efficacia delle nostre campagne e analizzare i dati non personalizzati per migliorare le prestazioni del nostro sito. Scegliendo "Accetta", acconsenti all'utilizzo dei cookie.
Accetta i cookie Rifiuta