Con i modelli e le preimpostazioni di Local Site, puoi affrontare la maggior parte delle sfide di progettazione senza alcuna conoscenza di programmazione o progettazione. È possibile inserire anche un codice personalizzato. In questo articolo ti spieghiamo quali tipologie di codice puoi inserire e come farlo.
Sommario
- Conoscenza di base
- Editore di codice
- Configurazione di base
- Boilerplate (sola lettura)
- (S)CSS
- HTML
- JavaScript
- Pixel, codici di tracciamento, ecc.
- Mantieni il codice pulito
Conoscenza di base
Local Site ti consente non solo di scrivere e utilizzare il tuo codice, ma anche di integrare strumenti di terze parti con l’aiuto di frammenti di codice in HTML, CSS e/o Javascript. Tieni presente che alcuni strumenti potrebbero non funzionare o non essere visualizzati correttamente se utilizzi la barra di consenso dei cookie preimpostata. Per motivi di sicurezza la Piattaforma blocca determinati script per rispettare i requisiti legali. Possono verificarsi problemi con la visualizzazione e la funzionalità di alcuni strumenti, ad esempio, quando uno script viene caricato da fonti esterne e vi si accede da un secondo script, se il provider non garantisce che il secondo script acceda solo al primo script, dopo il caricamento di questo lo strumento non funzionerà come desiderato.
Editore di codice
Il codice CSS, JavaScript e HTML può essere modificato dall’editor del codice. Questo può essere raggiunto facendo clic su “<> Codice” nell’angolo in basso a destra del Website Builder (CMS). Puoi anche aprire l’editor del codice con la combinazione di tasti [Ctrl] + [Alt] + [C].
Da qui si accede anche alle altre schede “CSS”, “JavaScript”, “HTML”, “Config” e “Boilerplate”.
Configurazione di base
“Config” è una scheda nell’editor del codice. Qui puoi configurare il tuo sito web definendo variabili per colori, dimensioni dei caratteri, caratteristiche ecc. Tutti i preset utilizzati sul tuo sito web sono forniti come cosiddetti “mixin”. Il Website Builder (CMS) inserisce automaticamente questi mixin nella scheda “Config”. Ciò ti consente di regolare le proprietà CSS di conseguenza una volta inserita la prima preimpostazione. Tieni presente che l’eliminazione di una preimpostazione in Website Builder (CMS) non rimuove automaticamente il codice CSS o JavaScript incorporato.
Suggerimento: se non hai familiarità con i CSS, non preoccuparti! Quasi tutti i valori contenuti nei CSS possono essere regolati tramite il tema e le impostazioni predefinite. Per questo hai 3 opzioni:
- Impostazioni predefinite: si raggiungono cliccando sull’icona del puzzle sull’elemento oppure facendo clic con il tasto destro del mouse sull’elemento e quindi facendo clic su “Impostazioni predefinite”
- Tramite la voce di menu “Design” del Website Builder (CMS)
- Premendo la combinazione di tasti [CTRL] + [ALT] + [Y]
Boilerplate (sola lettura)
Tutto il codice standard viene memorizzato in un “boilerplate”, che viene automaticamente integrato nel sito web e può essere utilizzato anche altrove. Ti piacerebbe vedere cosa c’è sotto il cofano del tuo sito web? Allora il “Boilerplate” è il posto giusto. Puoi anche visualizzare il codice nell’editor del codice nella scheda “Boilerplate”. Qui puoi vedere tutte le variabili preimpostate, sia i valori predefiniti di determinati elementi sia alcune proprietà ed effetti di progettazione. Puoi anche utilizzare queste variabili per il tuo progetto con altri elementi per creare un design il più uniforme, professionale e di facile manutenzione possibile.
(S)CSS
Sitejet Website Builder (CMS) offre un potente editor (S)CSS che ti consente di personalizzare il tuo sito web nel modo che preferisci.
Se la scheda “CSS” non è preselezionata, ora puoi fare clic su di essa per visualizzare e modificare tutto il codice CSS.
Qui è possibile assegnare le proprietà di progettazione appropriate alle classi standard proprie e già esistenti (ad es. “.ed-button”). Per impostazione predefinita, il codice di ciascuna classe è “compresso”, cioè non visibile, per risparmiare spazio e fornire una migliore panoramica. Facendo clic sulla piccola freccia accanto al numero di riga sul lato sinistro del campo dell’editor è possibile “aprire” la classe e rendere visibili tutte le proprietà.
Qui puoi aggiungere i tuoi stili CSS, che possono poi essere applicati al sito web. Se utilizzi le preimpostazioni, verranno registrate qui e potrai aggiungere le tue sostituzioni alle rispettive sezioni. È possibile utilizzare tutte le variabili definite nelle schede “Boilerplate” o “Config”.
Il Website Builder comprende anche il tuo codice CSS. Puoi trovare le regole CSS che si applicano a un elemento sul tuo sito selezionando un elemento e premendo contemporaneamente [Ctrl] + [Alt] + [C]. Questo apre l’editor CSS ed evidenzia le linee che si applicano agli elementi selezionati.
Puoi anche utilizzare il pulsante “Ottimizza” per trovare le regole inutilizzate e ripulire il codice.
Puoi anche utilizzare file CSS/JS dal file manager tramite “Incolla file”.
Cliccando su “Selettore colore” puoi selezionare il colore desiderato tramite la finestra di selezione colore del tuo sistema. Ciò semplifica la ricerca dei valori corretti per il colore desiderato o, ad esempio, sui sistemi Mac e Linux la scelta di un colore in qualsiasi punto dello schermo.
Utilizzo di ID e classi
All’interno di Sitejet, gli elementi possono essere affrontati in vari modi.
Ogni elemento in Sitejet ha il proprio ID univoco. L’ID è sempre nel formato #ed-xxxxxx. Puoi trovarlo nelle proprietà dell’elemento, a cui è possibile accedere tramite i seguenti metodi:
- Fare clic sull’elemento, quindi fare doppio clic sul breadcrumb nella parte inferiore dello schermo
- Fare doppio clic sull’elemento
- Selezionare l’elemento e premere [INVIO]
Nelle proprietà dell’elemento sul lato sinistro dello schermo, l’ID viene visualizzato nella scheda “Opzioni” nella sezione “ID e classe”.
Gli ID degli elementi non possono essere modificati in Sitejet. Tuttavia, puoi assegnare un ID ai sotto elementi.
Classi
Le lezioni rappresentano il modo più conveniente per personalizzare e progettare elementi. Forniscono inoltre ad altri sviluppatori e designer un modo per creare codice comprensibile o riutilizzabile in altri progetti.
Per assegnare le classi ad un elemento procedere come segue:
- Aprire le proprietà dell’elemento in uno dei modi descritti sopra.
- Nella scheda “Opzioni” sotto “ID & Classe” vengono visualizzate le singole classi assegnate a questo elemento. L’elemento preselezionato è l’elemento contenitore – qui nell’immagine un elemento. Potete però anche personalizzare gli elementi secondari di questo elemento cliccando sulla rispettiva scheda – qui ad esempio “Pulsante (a)” per personalizzare l’elemento collegamento del pulsante.
- Ad ogni elemento possono essere assegnate diverse classi per ottenere una specifica più elevata nel codice CSS. Maggiori dettagli possono essere trovati in questo articolo sulle classi CSS.
Nella sezione “Classi CSS” puoi aggiungere tutte le classi che desideri separandole con uno spazio.
Suggerimento: è possibile selezionare più elementi tenendo premuto il tasto [Maiusc] mentre si fa clic. Puoi anche utilizzare la combinazione di tasti [Ctrl] + [A] per selezionare tutti gli elementi contemporaneamente. In questo modo puoi assegnare classi specifiche a più elementi contemporaneamente.
ID
L’utilizzo degli ID per progettare elementi specifici consente di effettuare scelte di progettazione più specifiche rispetto a quelle consentite dalle classi. Le classi forniscono proprietà di progettazione per più elementi, mentre un ID si applica solo a quell’elemento specifico. Pertanto, le impostazioni predefinite speciali dell’ID sovrascrivono le impostazioni predefinite generali della classe.
Un esempio: un elemento pulsante include un elemento <div> e un elemento <a>. L'elemento <div> è l'elemento genitore perché racchiude l'elemento <a>. In questo esempio, all'elemento <div> viene assegnato l'ID #ed-1234567 e la classe predefinita .ed-button. Se ora aggiungi diverse impostazioni predefinite di progettazione per la classe .ed-button e l'ID #ed-1234567, le proprietà CSS dell'ID sovrascriveranno sempre quelle della classe.Soprattutto per le animazioni gli ID sono utili, perché le animazioni di solito si riferiscono a determinati elementi.
Gli ID vengono assegnati automaticamente a un progetto specifico. Se copi il codice CSS esistente in un altro progetto, ciò non ha alcun effetto perché gli ID utilizzati non si applicano a questo progetto. In questo caso, lavora invece con le classi.
Per copiare gli ID, fare clic con il tasto destro del mouse sull’elemento e selezionare “Copia ID elemento”. Puoi anche fare lo stesso premendo [Ctrl] + [I].
HTML
Per inserire direttamente il codice HTML, hai due opzioni:
- Utilizzare un elemento HTML
- Utilizzare l’editor
Elemento HTML
L’elemento HTML è adatto, tra l’altro, per l’integrazione di determinati moduli e strumenti di fornitori terzi. Puoi incorporarlo nella tua pagina trascinandolo e rilasciandolo come segue:
- Fai clic sulla categoria “Elementi” nella barra laterale sinistra
- Si aprirà un pannello in cui potrai selezionare “HTML” e trascinarlo nel punto in cui desideri includere ulteriori elementi HTML
HTML nell’editor
Puoi accedere all’editor del codice cliccando su:
- “<> Codice” nell’angolo in basso a destra del Website Builder (CMS)
- Quindi fare clic sulla scheda “HTML”.
Normalmente qui vedrai solo il segnaposto {{content}}, a meno che tu non abbia inserito qui un codice aggiuntivo. Tutto ciò che è memorizzato qui verrà visualizzato sul sito web. Il segnaposto {{content}} rappresenta l’intero contenuto che puoi gestire utilizzando Website Builder (CMS), ovvero tutti gli elementi che modifichi, sposti, aggiungi o rimuovi nella vista principale del Website Builder (CMS). Se necessario, puoi aggiungere il tuo HTML o estratti di terze parti attorno a questo segnaposto. Al momento non è possibile modificare l’HTML già presente sul sito per garantire che le strutture esistenti funzionino correttamente.
JavaScript
Puoi anche utilizzare l’elemento HTML per includere JavaScript nei tag.
Pixel, codici di tracciamento, ecc.
I pixel vengono utilizzati per raccogliere dati a fini pubblicitari. I pixel sono codice JavaScript e quelli più conosciuti provengono da Google e Facebook. Di norma vengono utilizzati per l’ottimizzazione dei motori di ricerca e del marketing e inseriti nell’areadel sito web.
Per inserire il codice nell’area del tuo sito web, vai su “Altro” nel menu in alto e seleziona “SEO”:
Qui puoi inserire tutte le metainformazioni rilevanti sul tuo sito web. Potrebbero essere titoli, parole chiave o una breve descrizione. Maggiori informazioni sulla SEO sono trattate nel nostro articolo SEO.
Per il codice di tracciamento da inserire nell’area del sito è possibile utilizzare il campo “Meta tag”.
Per utilizzare Google Analytics è addirittura sufficiente inserire l’ID di monitoraggio nel campo “ID di monitoraggio di Google Analytics”. Questo articolo di Google spiega come trovare il tuo.
Assicurati di prendere il TRACKING_ID (o Pixel ID per Facebook) dalla tua rispettiva dashboard e di completare la tua informativa sulla privacy di conseguenza.
Se è necessario codice aggiuntivo per altri strumenti, puoi inserirlo anche in “Meta tag”. Normalmente i tag devono essere inseriti qui, ma sono possibili anche i tag.
Mantenere il codice pulito
L’aggiunta rapida di codice nell’editor di codice a volte può creare confusione. Premi semplicemente [Ctrl] + [I] per formattare automaticamente tutto il codice nella finestra attiva. Funziona con CSS, JS e HTML. Ciò ti consente di tenere traccia delle singole aree del tuo codice, delle tue variabili e delle loro definizioni.
