4 esempi di codice personalizzato popolari per Squarespace

Squarespace è una piattaforma potente con opzioni di personalizzazione che rispondono a diverse esigenze di stile e professionali. Le sue funzioni all'avanguardia si adattano a un'ampia gamma di casi d'uso, rendendola una scelta obbligata per molti imprenditori e creativi come te. Ma quando ti trovi di fronte a casi limite che non possono essere risolti da queste funzioni integrate, è allora che l'aggiunta di un po' di codice magico diventa utile.

Sono Rache e ho fondato Squarestylist, una libreria di risorse creative che ti consente di intrecciare design e codice in siti web che ispirano stupore e meraviglia. Qui di seguito ti spiego come realizzare quattro delle personalizzazioni più richieste per un sito web con un po' di codice. 

Prima di addentrarci, è meglio fare riferimento al nostro precedente post del blog su come aggiungere codice personalizzato al tuo sito Squarespace. Ti aiuterà a tenere a mente le procedure ottimali mentre aggiungi il codice, uno snippet alla volta. 

Nota: questo contenuto è stato creato da un membro di Squarespace Circle e non costituisce una raccomandazione ufficiale di Squarespace. Poiché il prodotto Squarespace è in continua evoluzione, il relativo codice è soggetto a modifiche in qualsiasi momento e non è possibile garantire che gli esempi di codice riportati di seguito funzionino a tempo indeterminato. I team di assistenza clienti non sono in grado di risolvere i problemi relativi al codice personalizzato aggiunto ai siti web Squarespace. Alcuni dei codici riportati di seguito sono stati aggiunti tramite l'iniezione di codice, disponibile solo su alcuni piani di Squarespace.

1. Aggiungere un pulsante "Scorri verso l'alto"

La funzione di scorrimento verso l'alto è una comoda aggiunta al tuo sito Squarespace, soprattutto per le pagine più lunghe. Offre agli utenti un modo semplice per tornare all'inizio della pagina per raggiungere il menu o le voci di navigazione. 

Ecco i passaggi per aggiungere un pulsante di scorrimento verso l'alto accessibile e personalizzato. 

1. Scorri fino alla fine della pagina e modifica il piè di pagina del sito.

2. Aggiungi un'immagine in qualsiasi parte del piè di pagina. Fungerà da pulsante di scorrimento verso l'alto; scegli o crea qualsiasi immagine o grafica che corrisponda al tuo branding. Prendi in considerazione l'aggiunta di una freccia o il testo "Scorri verso l'alto" per chiarezza.

3. Imposta il testo alt su "Scorri verso l'alto" per una maggiore accessibilità.

4. Imposta il collegamento su "#top" e assicurati che l'opzione "Apri collegamento in una nuova scheda" sia disattivata.

5. Per aggiungere la funzionalità in cui il pulsante viene visualizzato solo quando si scorre la pagina, aggiungi il primo frammento di codice qui sotto in Pagine > Strumenti per siti web > Iniezione di codice > Piè di pagina.

6. Per definire lo stile del pulsante di scorrimento verso l'alto, puoi aggiungere del codice CSS in Pagina > Strumenti per siti web > CSS personalizzato.

Codice: passaggio 5

<script>

document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});

</script>

Codice: passaggio 6

html.fe-block.scroll-to-top a@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-topbody.is-scrolled .fe-block.scroll-to-top abody:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-topbody:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections
.fe-block.scroll-to-top {
right:2vw;
bottom:2vw;
width:100px;
height:100px;
}

2. Modificare il colore di navigazione dell'intestazione in una sola pagina

La personalizzazione del colore della navigazione dell'intestazione per una pagina specifica è una richiesta frequente, spesso necessaria quando una pagina ha uno sfondo o una combinazione di colori specifici. Prima di applicare un codice personalizzato, esaminiamo le funzioni integrate di Squarespace che sono state progettate per soddisfare questa esigenza.

1. Clicca su Modifica intestazione sito e vai alla scheda Design .

2. In Colori sono disponibili le opzioni di stile, tra cui Adattivo.

3. L'opzione Adattiva fa sì che l'intestazione si adatti al tema cromatico della prima sezione, garantendo un buon contrasto.

Puoi anche provare le opzioni Opaco o Gradiente per un'intestazione coerente su tutte le pagine.

Se queste opzioni native non soddisfano le tue esigenze, puoi ricorrere al codice personalizzato per avere un maggiore controllo sui colori dell'intestazione e dei suoi elementi:

1. Vai alla pagina specifica in cui desideri modificare il colore dell'intestazione.

2. Clicca sull'icona Impostazioni accanto al nome della pagina.

3. Nella scheda Avanzate, troverai l'area di iniezione del codice specifica della pagina.

4. Incolla il codice fornito di seguito, assicurandoti di includere i tag di stile di apertura e chiusura.

Codice

<style>
:root {
--headerbg: #F4BAB5;
--headerText:#12294C;
}
/
*Change Header Background Color */
@media (min-width: 800px) and (hover: hover), (min-width: 1025px) {
.header-border {
    background: var(--headerbg);
}
}
/*Change Color  Header Nav Links on Desktop */
.header-display-desktop nav.header-nav-list a {
    color: var(--headerText) !important;
}
/*Change Color Header Nav Elements on desktop */
.header-display-desktop a.user-accounts-text-link.header-nav-item {
color: var(--headerText) !important;
}
 .header-display-desktop .header-title-text a {
color: var(--headerText) !important;
}
 .header-display-desktop .header-actions-action.header-actions-action--social svg {
fill: var(--headerText) !important;
}
 .header-display-desktop .Cart-inner path {
fill: var(--headerText) !important;
stroke: var(--headerText) !important;
}
 .header-display-desktop span.sqs-cart-quantity {
color: var(--headerText) !important;
}
</style>

Questo codice utilizza le variabili CSS per una facile personalizzazione dei colori. Puoi cambiare i codici dei colori sia per lo sfondo che per il testo. 

Quando assegni questi colori, tieni sempre conto dell'accessibilità assicurando un contrasto sufficiente tra il colore degli elementi dell'intestazione e il colore dello sfondo dell'intestazione. Il codice sopra riportato è stato scritto appositamente per influenzare solo la visualizzazione desktop, che probabilmente è l'obiettivo prefissato.

3. Nascondere il titolo del sito nella homepage

A volte, potresti voler nascondere il titolo dell'intestazione o il logo su una pagina specifica, in genere la homepage. È utile quando hai un logo importante nella prima sezione e vuoi evitare che si ripeta.

Ecco come nascondere il titolo del sito in una pagina specifica:

1. Seleziona la pagina in cui desideri nascondere il titolo.

2. Clicca sull'icona Impostazioni accanto al nome della pagina.

3. Vai alla scheda Avanzate.

4. Aggiungi il codice seguente all'area Iniezione di codice intestazione di pagina.

Codice

<style>
.header-display-desktop .header-title
{     display: none; }

</style>

4. Applicare un'immagine del cursore personalizzata

L'aggiunta di un cursore personalizzato può rendere il tuo sito davvero unico, ma è importante implementarlo con attenzione per mantenere una buona esperienza utente. Ecco come aggiungere un cursore personalizzato al tuo sito Squarespace.

1. Prepara l'immagine del cursore.

• Fai in modo che non superi i 128 pixel in larghezza o in altezza (da 30 a 50 pixel sono in genere sufficienti).

• Se possibile, usa un file SVG per evitare la pixelizzazione. Anche un piccolo PNG va bene.

2. Carica l'immagine del cursore.

• Crea una pagina temporanea nella sezione Non collegata del tuo sito.

• Aggiungi un blocco di testo e inserisci l'immagine del cursore come file collegato.

• Salva e fai clic sul link per ottenere il percorso del file.

3. Aggiungi il CSS personalizzato.

• Vai al pannello CSS personalizzato.

• Incolla il codice fornito di seguito e inserisci il percorso del file tra virgolette.

Codice

body:not(.sqs-edit-mode-active) {
  cursor:url(" "), auto;
}

Per impostazione predefinita, questo codice modificherà solo il cursore predefinito, ripristinando il cursore standard per i link e i pulsanti. Se vuoi un cursore personalizzato anche per gli stati hover (al passaggio del mouse), usa il codice qui sotto e carica un'immagine separata.

Codice

body:not(.sqs-edit-mode-active) {
  a:hover, button:hover {
    cursor:url(""), pointer; 
  }
}

I cursori personalizzati possono aggiungere un tocco unico al tuo sito web. Tuttavia, usali con cautela per evitare di interrompere l'esperienza di navigazione degli utenti.

Oltre il copia e incolla

Anche se è comodo copiare e incollare questi frammenti di codice, ti invito sempre a capire come funzionano. Questa conoscenza è fondamentale per risolvere i problemi e apportare modifiche personalizzate al tuo sito Squarespace.

Se desideri approfondire, dai un'occhiata al mio corso gratuito CSS di base per gli utenti di Squarespace. Riguarda i fondamenti dei CSS, i casi di utilizzo più comuni del codice per Squarespace e dove trovare aiuto. 

Spero che questa risorsa ti abbia invogliato a personalizzare il tuo sito in maniera autonoma. Buona scrittura!