Nascondere elementi nella visualizzazione mobile in Squarespace 7.1

ARGOMENTI PRINCIPALI

1. INSTALLA IL PLUGIN GRATUITO DI CHROME

2. AGGIUNGI IL CODICE CSS

Avere un sito web ottimizzato per i dispositivi mobili è diventato essenziale nel panorama digitale odierno. Offre un'esperienza utente eccellente, lasciando un'ottima prima impressione del tuo marchio e portando a un aumento delle vendite. Inoltre, l'ottimizzazione per i dispositivi mobili ha un impatto positivo sulla SEO e sul posizionamento su Google, rendendola un aspetto cruciale della strategia del tuo sito web.

Sebbene Squarespace offra una piattaforma flessibile per una facile personalizzazione, c'è una sfida: il layout che appare perfetto sul desktop potrebbe non adattarsi bene ai dispositivi mobili. Fortunatamente, incorporando del semplice CSS nel tuo sito web Squarespace 7.1, puoi ottimizzare la visualizzazione da mobile e nascondere elementi specifici secondo necessità. In questo tutorial, ti guideremo attraverso questo processo.

1. Installa il plugin di Chrome "Squarespace Collection/Block Identifier"

Per iniziare questo tutorial, dobbiamo capire il concetto di "codici blocco".

I codici blocco fungono da identificatori per elementi specifici del tuo sito web. Svolgono un ruolo cruciale nel nostro processo di nascondere elementi nella visualizzazione da mobile.

L'idea di lavorare con i codici blocco potrebbe intimidirti un po', ma non preoccuparti. Esiste un'estensione di Google Chrome fantastica che semplifica questa attività. Si chiama "Squarespace Collection/Block Identifier". La cosa migliore è che è completamente gratuita!

Per iniziare, aggiungi semplicemente il plugin di Chrome alla barra degli strumenti del tuo browser. Una volta installato, apri il tuo sito web e fai clic sull'icona "B" situata nell'angolo in alto a destra del tuo browser per attivare l'estensione. Voilà! Con un semplice clic, l'estensione visualizzerà magicamente i codici blocco per tutte le sezioni del tuo sito web, rendendo il processo molto più gestibile.

2. Aggiungi il codice CSS

Ora che hai l'estensione Chrome Squarespace Collection/Block Identifier installata e pronta all'uso, procediamo a nascondere gli elementi nella visualizzazione da mobile. Ecco come puoi farlo:

1. Vai al tuo sito web Squarespace e vai alla sezione "Design".

2. Cerca l'opzione per aggiungere CSS personalizzato. È qui che inseriremo il codice per nascondere gli elementi sui dispositivi mobili.

3. Aggiungi il seguente frammento di codice CSS:

// HIDE ELEMENT ON MOBILE //

@media only screen and (max-width: 768px)

{#block-***********  {display: none;}}

4. Ora sostituisci #block-*********** con il codice blocco dell'elemento che desideri nascondere.

Ecco fatto, molto semplice!