Scarica il nostro workbook gratuito per progettare il tuo sito in tutta sicurezza.
L'indirizzo e-mail inserito non è valido.
Grazie per l'iscrizione.
Indicando la tua e-mail, confermi di aver letto e compreso la nostra Informativa sulla privacy e acconsenti a ricevere materiale di marketing da parte di Squarespace.
La codifica può intimidire con i suoi concetti e le sue regole astratte. Il processo di creazione di siti web da zero con tanto di debug degli errori lungo il percorso spaventa molti imprenditori: e forse è il motivo per cui hai creato il tuo sito su Squarespace. Tuttavia, esistono dei modi più semplici per aggiungere un po' di codice e portare il proprio sito web al livello successivo.
Mi chiamo Rache e e sono un membro di Circle, il programma partner di Squarespace per i web designer professionisti. Ho iniziato a progettare siti web motivata dalla voglia di spingermi oltre i limiti nei progetti dei miei clienti. Quando mi sono resa conto che potevo usare il codice per raggiungere questo obiettivo, ho fondato Squarestylist, una libreria di risorse creative che aiuta le persone a combinare design e codice in siti web per ispirare stupore e meraviglia in un mare di uniformità.Voglio presentarti alcuni suggerimenti e modi per rendere il tuo sito più unico con il codice personalizzato.
Perché aggiungere del codice personalizzato al proprio sito web?
Le ricerche mostrano che la prima impressione di un visitatore di un sito web è correlata al suo design nel 94% dei casi, quindi vale la pena impegnarsi per definire l'aspetto e l'atmosfera del proprio spazio digitale.
Non fraintendermi: il codice personalizzato non è un requisito su Squarespace. È possibile ottenere ottime funzionalità pronte all'uso. Detto questo, può essere interessante usare la codifica come strumento per aggiungere al sito funzionalità o eventuali requisiti che non sono già integrati.
Procedure consigliate per aggiungere codice personalizzato
Come web designer e sviluppatrice autodidatta, ho imparato a codificare un frammento alla volta, risolvendo ogni problema o caso d'uso man mano che si verifica. Ogni volta che mi trovo di fronte a un problema tecnico sconosciuto, mi metto a spulciare forum e gruppi online e poi implemento subito le mie nuove conoscenze.
Ripetere questo processo mi ha permesso di consolidare alcune buone abitudini che hanno fatto la differenza nello sviluppo delle mie competenze.
1. Massimizzare le funzionalità integrate
Esplora l'editor Squarespace e non esitare a provare ogni singola funzione che trovi. Il builder è più capace di quanto si possa pensare. La metà delle volte si tratta solo di sapere dove cercare ciò di cui si ha bisogno nelle impostazioni predefinite. L'altra metà è familiarizzare con le sue parti per sapere cosa digitare nella barra di ricerca.
2. Comprendere cosa si intende aggiungere
Una volta trovato un frammento di codice che possa servirti per il tuo sito web, non limitarti a copiarlo e incollarlo nel pannello CSS personalizzato o Iniezione di codice. Esaminalo una riga alla volta per capire come influisce sul tuo sito. Prendi nota delle parole chiave e dei modelli: che cosa pensi che significhino?
È in questo modo che ho acquisito familiarità con il linguaggio dei browser anche senza un'istruzione formale: imparandolo come fa un bambino. Coltiva la tua curiosità e nutri la tua esperienza con la gioia piuttosto che con il terrore. Ti sorprenderai di quanto puoi assorbire.
Se desideri provare un approccio più guidato all'apprendimento del codice, puoi accedere al mio corso gratuito sulle nozioni di base dei CSS come punto di partenza.
3. Fare attenzione alla qualità
Naturalmente, la progettazione di siti web non si limita alle questioni di gusto estetico. Devi porti domande importanti su tutta la linea se stai intraprendendo la strada del fai-da-te:
Il tuo codice influisce involontariamente su altri elementi del sito web?
In che modo il tuo sito risponde ai cambiamenti nelle dimensioni e nell'orientamento dello schermo ?
Come viene visualizzato nei diversi browser?
La funzione aggiuntiva rallenterà il sito?
In che modo la personalizzazione influisce sull'accessibilità?
Tenendo a mente queste considerazioni, si presterà attenzione all'impatto del codice andando oltre l'anteprima predefinita del sito web. Dobbiamo soprattutto assicurarci di offrire un'esperienza utente coinvolgente a tutti i livelli.
Frammenti di codice da provare
Il tuo primo approccio concreto ai CSS non deve essere all'insegna della complessità. Ricordo di aver iniziato aggiungendo piccoli dettagli qua e là, costruendo gradualmente il mio repository di codice man mano che andavo avanti.
Accedi al pannello CSS in cui puoi aggiungere codice personalizzato nel tuo account Squarespace facendo clic su Sito web, Strumenti sito web nella parte inferiore della barra laterale, quindi su CSS personalizzato. Puoi iniziare a modificare il tuo sito con alcuni di questi frammenti.
1. Impostare un carattere caratterizzante
Non devi affidarti al solito corsivo per enfatizzare determinate parole o frasi nel tuo sito web. Questa funzione ti consente di designare un carattere tipografico come carattere principale, che puoi utilizzare con parsimonia per attirare l'attenzione delle persone.
Assegna lo stile del tuo tipo di carattere Vari, che fungerà da carattere caratterizzante. A tale scopo, vai in Stili sito > Tipi di carattere > Vai. Scegli la famiglia di caratteri che preferisci e modifica le proprietà dei caratteri.
Aggiungi la tua riga di codice andando su Sito web > Strumenti del sito web > CSS personalizzati. Copia e incolla il codice qui sotto. Se è già presente del codice, fai attenzione a non eliminarlo. Basta incollare il codice aggiuntivo nella successiva riga disponibile.
Aggiungi un blocco di testo a una sezione del tuo sito web con gli elementi Intestazione 1, Intestazione 2 o Intestazione 3 . Seleziona una parola o un gruppo di parole e assegna il formato corsivo premendo il pulsante I nel pop-up del pannello di testo. Lo stile del carattere principale verrà applicato alle parole in corsivo.
Codice CSS
Aggiungi a Sito web > Strumenti del sito web > CSS personalizzati
h1 em, h2 em, h3 em {
font-family:var( --meta-font-font-family);}
Guarda la presentazione del codice personalizzato di Rache allo Squarespace Circle Day
2. Aggiungere linee decorative
Le linee sottili come motivo visivo possono conferire ai siti minimalisti un tocco di finezza. Puoi già utilizzare il blocco linea orizzontale integrato nell'editor Squarespace. Per aggiungere linee verticali, è sufficiente inserire alcune righe di codice nel pannello CSS.
Aggiungi una Sezione vuota. Per semplificare il posizionamento degli elementi, rendi visibile la griglia dell'Editor fluido premendo G sulla tastiera.
Fai clic sul pulsante Aggiungi blocco in alto a sinistra della sezione e scegli Blocco forma.
Apri le impostazioni del blocco forma facendo doppio clic sul blocco.
Apri il menu a discesa delle forme e scegli l'ultima opzione (Trapezio).
Vai a Sito web > Strumenti del sito web > CSS personalizzati. Copia e incolla il codice sottostante nell'ultima riga vuota del pannello.
Dopo aver incollato il CSS, il blocco della forma trapezoidale si trasforma in una linea verticale. Puoi cambiarne il colore attivando o disattivando l'opzione Tratto nelle impostazioni del blocco forma e scegliendo un colore dal selettore colore.
Sui dispositivi mobili, la linea verticale si trasforma in una linea orizzontale. Regola di conseguenza il posizionamento del blocco. Ciò non influirà sulla visualizzazione desktop.
Codice CSS
.website-component-block .sqs-shape-block-container[data-shape-name="keystone"] {
&::before {
width: 1px;
content: ''; height: 100%; background-color: var(--shape-block-stroke-color); position: absolute;} svg {display: none !important;}.sqs-shape > * {stroke-width: 0 !important;}
}
@media screen and (max-width: 767px) {
.website-component-block .sqs-shape-block-container[data-shape-name="keystone"]::before {
height:1px;
width: 100%;
}
}
3. Mostrare effetti dell'immagine al passaggio del mouse
Il movimento dinamico può anche aggiungere interesse visivo ai layout del tuo sito web. Ecco un esempio che ti permette di attivare effetti immagine 3D ogni volta che il cursore si posa su un'immagine selezionata. Questo è un perfetto esempio di utilizzo delle funzionalità integrate. Stai solo usando il codice per ridurre gli elementi di distrazione e aumentare l'interattività del tuo sito web.
Aggiungi un blocco immagine o scegline uno esistente.
Nelle impostazioni del blocco immagine, seleziona Effetti immagine e scegli un effetto.
Per impostazione predefinita, l'effetto immagine sarà visibile al caricamento della pagina. Per farlo apparire solo al passaggio del mouse, vai su Sito web > Strumenti del sito web > CSS personalizzati e incolla il codice qui sotto.
Codice CSS
.sqs-block-image .design-layout-fluid .fluid-image-container {img {visibility: visible !important;}}.imageEffectContainer {opacity: 0;transition:0.5s;}.sqs-block-image:hover .imageEffectContainer {opacity: 1;}
Spero che questo articolo ti incoraggi a uscire dalla tua zona di comfort e a sperimentare nella sandbox del tuo editor di codice, se non l'hai già fatto. Buona programmazione!
Sei pronto a creare e personalizzare il tuo sito web?