Cosa sono gli elementi?

Utilizzando elementi e preimpostazioni, Local Site ti consente di creare bellissimi siti web in modo rapido e semplice, senza la necessità di codice aggiuntivo. Gli elementi forniscono singoli oggetti con cui è possibile creare siti web, come icone, dispositivi di scorrimento o simili. Le preimpostazioni combinano elementi e li estendono con opzioni di progettazione aggiuntive. In questo articolo spiegheremo come vengono utilizzati gli elementi.

Conoscenza di base

Gli elementi sono “l’unità più piccola” nell’editor del sito web. Sono come elementi costitutivi e vengono utilizzati per fornire funzioni di base come testi, titoli, pulsanti, ecc. Ti consigliamo di cercare prima un preset poiché sono sezioni di sito web predefinite costituite da diversi elementi con opzioni di stile predefinite. Ti mostreremo come lavorare con i preset nel nostro articolo di aiuto sui preset.

Per modificare un elemento, fare doppio clic su di esso con il tasto sinistro del mouse o premere Invio se è già selezionato. Puoi usare i tasti freccia per saltare tra gli elementi.

Quando fai doppio clic su un elemento, non solo puoi modificare il contenuto dell’elemento ma puoi anche regolare le impostazioni che si apriranno nel pannello sul lato sinistro del CMS. Ogni elemento ha la propria scheda – indicata dal suo nome, nel nostro esempio è “Titolo” – in cui puoi apportare modifiche specifiche all’elemento. Tutti gli elementi hanno anche una scheda “Stile” in cui troverai le impostazioni universali per tutti gli elementi.

Aggiungi elementi

Per aggiungere un elemento, è sufficiente fare clic sulla categoria “Elementi” nella barra laterale dei contenuti a sinistra:

Accanto alla barra laterale dei contenuti, verrà visualizzato il pannello “Aggiungi contenuto”. Qui puoi selezionare l’elemento desiderato e posizionarlo dove preferisci nel sito web, utilizzando il trascinamento della selezione. Una linea verde indicherà dove verrà aggiunto l’elemento.

Se hai già selezionato un elemento nel sito web puoi anche aggiungere un elemento dal pannello con un semplice clic sinistro del mouse. Se vuoi aggiungere più elementi contemporaneamente, premi il tasto Ctrl mentre selezioni tutti gli elementi. Se li trascini nel sito web, verranno aggiunti nello stesso ordine in cui fai clic su di essi. Puoi anche aggiungere elementi utilizzando le nostre scorciatoie integrate. Ad esempio con Ctrl + 2 (o Cmd + 2) puoi aggiungere un elemento di testo. Per una panoramica di tutte le scorciatoie premi Ctrl + K (o Cmd + K).

Sposta elementi

Hai diverse opzioni per spostare gli elementi sul sito web. È possibile utilizzare scorciatoie o avvalersi della gestione della gerarchia. Ad esempio, se usi la combinazione di tasti Ctrl + freccia su, puoi spostare l’elemento verso l’alto. Con Ctrl + freccia giù è possibile spostare l’elemento verso il basso di conseguenza.

Utilizzando la gestione della gerarchia, è possibile spostare gli elementi facendo clic sull’etichetta con il pulsante sinistro del mouse, tenendolo premuto e quindi trascinando l’elemento nella posizione desiderata spostando il mouse. Ancora una volta, dovrai prestare attenzione alla linea verde come indicatore di dove si posizionerà l’elemento quando verrà lasciato cadere. Se vuoi posizionare un elemento tra due contenitori premi Ctrl.

Scheda Stile

Nella scheda Stile puoi impostare le preferenze di progettazione di base. Queste impostazioni sono le stesse per tutti gli elementi. Inoltre, la scheda Stile consente di passare alle impostazioni preimpostate se l’elemento si trova in un contenitore preimpostato.

Layout (Articolo Flexbox)

L’editor del sito web organizza gli elementi secondo il principio “Flexbox” . Il contenitore principale viene definito l’asse principale (“uno accanto all’altro” o “uno sotto l’altro”) e vengono definite ulteriori specifiche di disposizione. Questo stabilisce sempre come devono essere disposti gli elementi e non ci sono “brutte sorprese” che potrebbero verificarsi quando “si sposta a mano”: il design è sempre prevedibile e fisso su tutti i dispositivi, su tutte le risoluzioni del display e in tutte le circostanze.

A questo scopo, le impostazioni “Flexbox-Item” specificano come dovrebbe comportarsi l’elemento all’interno del contenitore principale:

La “Base” specifica quanto grande dovrebbe essere l’elemento sull’asse principale rispetto al contenitore principale
Con “Crescita” è possibile indicare se l’elemento può anche crescere se è disponibile più spazio
“Riduci” definisce quanto l’elemento può restringersi per liberare più spazio
Se hai più elementi uno accanto all’altro e passi, ad esempio, alla visualizzazione mobile, tali elementi verranno visualizzati uno sotto l’altro. Con “Ordine” puoi decidere in quale posizione deve essere visualizzato un elemento senza modificare la struttura originale degli elementi

Visibilità

Nella sezione Visibile puoi decidere se un elemento deve essere visualizzato o meno. Puoi regolare questa impostazione in base al dispositivo selezionando desktop, tablet e dispositivo mobile nella navigazione in alto e regolando le impostazioni di conseguenza.

Inoltre, puoi ridurre l’opacità e lavorare con trasparenza. Inoltre è possibile specificare con “overflow” se il contenuto che supera i limiti dell’elemento deve essere comunque visualizzato. Le frecce accanto alle impostazioni di overflow determinano se le barre di scorrimento devono essere visualizzate in basso, a destra o automaticamente a seconda delle dimensioni della finestra.

Spaziatura

In Spaziatura è possibile definire il riempimento (ovvero la spaziatura interna) e il margine (ovvero la spaziatura esterna) di un elemento. Qui hai la possibilità di specificare i valori del lato superiore, inferiore, sinistro e destro. Oppure puoi inserire lo stesso valore per tutti i lati utilizzando il campo di input accanto all’etichetta.

Bordo

I frame offrono un modo interessante di evidenziare determinati elementi o separarli dal resto del contenuto.

In Stile è possibile specificare se la cornice deve essere una linea “continua”, “tratteggiata”, “punteggiata” o “doppia”. Inoltre, puoi impostare valori diversi della larghezza del bordo per tutti e quattro i lati dell’elemento, analogamente alla spaziatura, oppure utilizzare il campo di input accanto all’etichetta per impostare lo stesso valore per tutti. Puoi anche specificare un colore per il bordo.

Se desideri avere angoli arrotondati, inserisci i tuoi valori preferiti, per ciascun angolo o per tutti gli angoli, utilizzando il campo di input accanto all’etichetta.

Ombra

L’ombreggiatura crea un’impressione di profondità. Gli elementi possono essere “alzati” o “abbassati” per metterli maggiormente a fuoco. Puoi scegliere tra:

Predefinito
Nessuno
“Esterno” – questo è il tipico caso d’uso dell’ombreggiatura, in cui viene proiettata un’ombra attorno all’elemento sugli elementi “dietro” di esso
“Dentro” – ciò significa che gli altri elementi attorno all’elemento attualmente selezionato proiettano un’ombra sull’elemento selezionato

Dopo aver selezionato una di queste opzioni, puoi utilizzare i campi corrispondenti per regolare il colore dell’ombra, il suo orientamento, la sfocatura e la diffusione dell’ombra.

Ombra del testo

Puoi anche gestire le tue preferenze per l’ombreggiatura del testo:

Posizionamento

In Posizionamento è possibile specificare il posizionamento dell’elemento sul sito web:

Con il posizionamento “statico” l’elemento viene sempre visualizzato esattamente nel punto in cui è stato posizionato nell’editor
Gli elementi “relativi” fungono da “punti di ancoraggio” per altri elementi subordinati, che sono quindi “dentro” l’elemento relativo; questo posizionamento è importante per gli elementi contenitori; qui viene specificato anche lo “Z-Index”, che definisce la posizione sull’asse Z (dallo schermo)
Gli elementi con posizionamento “Assoluto” vengono posizionati rispetto al successivo elemento di livello superiore, che ha un posizionamento “relativo”; qui è anche possibile specificare un indice Z
Gli elementi “fissi” si riferiscono alla finestra del browser: in questo modo puoi garantire che l’elemento venga sempre visualizzato nella stessa posizione nella finestra del browser, indipendentemente dal fatto che il visitatore del sito web scorra verso l’alto o verso il basso
“Bloccato” garantisce che un elemento sia “fissato” in una posizione relativa alla parte superiore dello schermo dopo che il visitatore del sito web lo scorre oltre

Trasformare

Con Trasforma, l’aspetto dell’elemento può essere ulteriormente modificato. Sono disponibili quattro opzioni:

Con “Sposta” sposti l’elemento sul sito web senza spostare o influenzare in altro modo gli elementi rimanenti
“Scala” modifica la dimensione dell’elemento in base a un fattore percentuale
“Ruota” ruota l’elemento dell’angolo specificato
“Inclinazione” distorce l’elemento sugli assi X e Y, rendendo l’elemento stesso inclinato

ID e classe

Nella sezione “ID e classe” assegni gli ID che potrebbero essere necessari quando si lavora con link e CSS. Qui puoi anche assegnare classi a un elemento. Puoi trovare ulteriori informazioni sugli ID e sulle classi nel nostro articolo sul codice personalizzato .

Animazione

Con Local Site puoi assegnare facilmente animazioni diverse a ciascun elemento. Hai una vasta gamma di animazioni tra cui scegliere. Parliamo di più di queste animazioni e delle relative opzioni di impostazione nel nostro articolo della guida sulle animazioni .

Programma

In Pianificazione è possibile specificare una data di inizio e/o di fine per ciascun elemento, dopo la quale l’elemento dovrebbe essere visualizzato o scomparire.

Altro

Sotto “Varie” specificate il numero minimo e massimo di elementi. Questo è interessante quando lavori se consenti al tuo cliente di modificare determinate sezioni o elementi. Il numero minimo e massimo di elementi definiscono la frequenza con cui un elemento può essere duplicato o rimosso dai tuoi clienti, ad esempio, per garantire che il design sia ancora attraente.

Quando si duplica un elemento, il campo per l’elemento di origine viene automaticamente riempito con l’ID dell’elemento originale in modo da sapere da quale elemento è stato duplicato l’elemento corrente.

Impostazioni preimpostate

Come accennato in precedenza, i preset sono costituiti da diversi elementi. Quindi se clicchi su un elemento che fa parte di un preset troverai due categorie sotto “Stile”. La categoria dell’elemento e la rispettiva categoria preimpostata che ha lo stesso nome della preimpostazione. Nel nostro esempio, abbiamo utilizzato la preimpostazione Carte.

Gestione della gerarchia

La gestione della gerarchia offre funzioni aggiuntive oltre alla funzione “Sposta” sopra descritta. Ancora più importante, fornisce una panoramica intuitiva di tutti gli elementi nascosti quando si passa con il mouse su un’etichetta. Per distinguere tra preset ed elementi puoi dare un’occhiata al colore dell’etichetta e del bordo:

Arancione: preimpostato
Azzurro: elemento

Se fai clic su un elemento puoi anche controllare il breadcrumb nel piè di pagina dell’editor del sito web per un’altra rapida panoramica della gerarchia.

Ogni etichetta è composta da un’icona unica e corrispondente al rispettivo elemento, così puoi vedere a colpo d’occhio di quale elemento si tratta. L’elemento su cui è attualmente posizionato il mouse ha anche il nome dell’elemento nell’etichetta. A seconda dell’elemento, potresti anche vedere opzioni aggiuntive accanto all’etichetta:

Icona con i puntini di sospensione per aprire il menu contestuale
Duplicare
Eliminare
Andare avanti
Abbassati
Icona stella per indicare che l’elemento è animato

Impostazioni reattive

“Responsive” significa che il design si adatta al dispositivo e alla risoluzione per garantire che il sito web venga visualizzato nel miglior modo possibile. Hai diverse opzioni per utilizzare le impostazioni reattive: prima di tutto, consigliamo sempre di utilizzare le preimpostazioni il più spesso possibile poiché sono già create. In secondo luogo, puoi regolare le impostazioni su colori, altezze, larghezze, posizionamento, ecc. per la rispettiva visualizzazione su desktop, tablet e dispositivo mobile.

A tale scopo, utilizza le tre icone del dispositivo (che rappresentano le visualizzazioni desktop, tablet e smartphone) nella parte superiore del CMS per passare alla visualizzazione desiderata e modificare specificamente il valore corrispondente per quella visualizzazione.

Nell’esempio seguente, vogliamo regolare il riempimento a sinistra e a destra. Per fare ciò, bisogna procedere come segue:

Passa alla visualizzazione tablet facendo clic sull’icona del tablet nella parte superiore del CMS
Assicurati di essere nella scheda Stile in Elementi
In Spaziatura, fai clic su “Personalizzato” accanto a “Padding” e digita 3 nei campi di input destro e sinistro dopo aver selezionato rem

Ora apporta le modifiche per la visualizzazione mobile selezionando la rispettiva icona nella navigazione in alto. In questo esempio, abbiamo modificato il riempimento sinistro e destro in 1 rem.

Le modifiche si applicano sempre automaticamente a tutti i dispositivi, infatti tutte le impostazioni effettuate nella vista del desktop si applicano a tutti i tipi di dispositivi, a meno che non vengano sovrascritte. Se modifichi le impostazioni per la visualizzazione tablet, le impostazioni verranno applicate anche ai dispositivi mobili, ma non ai dispositivi desktop. Noterai che dopo aver regolato il riempimento, come nell’esempio sopra, il colore dell’etichetta delle impostazioni è cambiato da bianco a viola per tablet e giallo per cellulare, in base al colore delle icone nella navigazione in alto.

Visited 4 times, 1 visit(s) today

La tua esperienza con questo sito web è stata utile?

SiNo