Creazione di siti web (CMS)

In questo articolo presenteremo il layout del Website Builder (CMS) e forniremo dettagli su molti dei menu e delle funzionalità principali, inclusi collegamenti a ulteriori informazioni.

Sommario

• Navigazione in alto
• Menu hamburger
• Barra laterale dei contenuti
• Altro menu
• Piè di pagina con breadcrumb, timer ed editor
• Editor WYSIWYG

Navigazione in alto

Iniziamo dal lato sinistro della navigazione in alto. Ecco il menu hamburger di cui parleremo nel dettaglio nella prossima sezione. Passiamo all’icona della freccia sinistra, che ti consente di annullare (Ctrl + Z) le modifiche, e all’icona della freccia destra, che ti consente di ripetere (Ctrl + Y) le modifiche.

Quando fai clic sull’icona a forma di occhio (o usi Ctrl + P) puoi visualizzare l’anteprima del tuo sito web nell’editor del sito web: ecco perché la chiamiamo icona di anteprima. Questa funzionalità di anteprima ti consente di verificare e testare le modifiche che non sono ancora state salvate, infatti se passi il mouse sopra l’icona vedrai un menu a tendina con ulteriori opzioni di anteprima:

• Anteprima: la modalità di anteprima all’interno dell’editor del sito web; non è necessario alcun salvataggio. 
• Apri sito web di anteprima: questo aprirà il tuo sito web in una nuova scheda. Se desideri controllare e testare le modifiche, dovresti premere Salva (o utilizzare Ctrl + S) prima di aprire il sito web di anteprima poiché mostra solo l’ultima versione salvata del sito web. 
• Modalità di presentazione: qui vedrai il tuo sito web su desktop, tablet e dispositivi mobili contemporaneamente per ottenere una rapida panoramica di come appare e si comporta il tuo sito web su diverse finestre.
• Condividi collegamento presentazione: questo è il collegamento alla modalità di presentazione.
• Collegamento allo strumento di feedback: qui troverai il collegamento allo strumento di feedback che i tuoi clienti possono utilizzare per aggiungere commenti sulla pagina, direttamente a specifici elementi del sito web. Questo è un vero punto di svolta che migliorerà il processo di feedback con i tuoi clienti. 

Successivamente abbiamo l’opzione di ricarica che ricaricherà il tuo sito web. Assicurati di salvare eventuali modifiche se desideri mantenerle poiché la ricarica ripristinerà il tuo sito web all’ultima versione salvata.

Accanto a ricaricare troverai l’icona di salvataggio (Ctrl + S). Questa icona diventa arancione se sono state apportate modifiche al sito web. Se il tuo sito web è già pubblicato, tutte le modifiche salvate verranno inviate direttamente al sito live.

Al centro della navigazione in alto, puoi scegliere tra la visualizzazione desktop, tablet e mobile per controllare il tuo sito web su tutti i dispositivi e regolare le impostazioni reattive se necessario.

Se passi il mouse su una finestra troverai diversi dispositivi predefiniti per controllare il tuo sito web con diverse risoluzioni. Utilizzando il menu a tendina della percentuale puoi anche determinare quale percentuale di zoom deve essere utilizzato, se desideri correggere il fattore di zoom puoi farlo facendo clic sul lucchetto, altrimenti lo zoom verrà regolato in base al dispositivo scelto.

Sotto Design, troverai tutte le impostazioni globali del sito web come la combinazione di colori, i caratteri e il design dei pulsanti che influenzeranno l’intero sito web. In questo modo puoi assicurarti di avere uno stile e un design coerenti in tutto il tuo sito web, che però puoi cambiare anche in seguito. Puoi sovrascrivere queste impostazioni di progettazione nei pannelli delle impostazioni dei singoli elementi e preimpostazioni.

Alla voce Pagine troverai tutte le sottopagine di un sito web. Puoi aggiungere nuove sottopagine, modificare URL e nomi di pagine, aggiungere metainformazioni specifiche del sito, proteggere una sottopagina con una password e determinare se una sottopagina deve essere elencata dai motori di ricerca. Ogni sottopagina verrà aperta come una scheda sopra la navigazione in alto.

In Cose da fare puoi aggiungere cose da fare globali, promemoria oppure puoi aggiungere cose da fare sulla pagina che possono essere collegate a elementi specifici del sito web. Ciò semplifica la gestione del processo di feedback con i tuoi clienti – che hanno una versione simile della funzione chiamata strumento di feedback – ma semplifica anche il processo di audit e feedback con il tuo team, ad esempio se controllate a vicenda siti web.

Se il tuo sito web non è ancora stato pubblicato, vedrai anche il pulsante Pubblica nella barra di navigazione in alto. Questo ti reindirizzerà al gestore dominio di un sito web dove potrai aggiungere e gestire i domini del tuo sito web per pubblicare il sito web.

Ultimo ma non meno importante, abbiamo il menu Altro che esamineremo più nel dettaglio in seguito.

Menu hamburger

Nel menu hamburger troverai le seguenti funzionalità importanti: 

• Reindirizzamenti: qui puoi aggiungere tre diversi tipi di reindirizzamenti: 301, 302 e 410.
• Backup: qui troverai tutti i backup che il sistema salva automaticamente ogni 5-10 minuti durante una sessione attiva nell’editor del sito web. Puoi anche creare i tuoi backup manuali.
• Esportazione del sito web: qui puoi esportare il tuo sito web come file ZIP.
• Preferenze: qui puoi impostare le tue preferenze quando utilizzi l’editor del sito web. Puoi ad esempio cambiare la lingua dell’editor, puoi decidere se i pannelli devono chiudersi quando salvi il sito web o se devono essere create solo la pagina iniziale o tutte le sottopagine quando aggiungi una nuova lingua.
• Aiuto: qui hai accesso diretto a tutte le nostre risorse di aiuto.
• Scorciatoie: utilizza le scorciatoie implementate per essere più efficiente durante la creazione del tuo sito web. Puoi utilizzare scorciatoie comuni come Ctrl + C e Ctrl + V per copiare e incollare elementi, ma abbiamo anche scorciatoie per aggiungere facilmente nuovi elementi, ad esempio quando usi Ctrl + 2 aggiungerai un nuovo elemento di testo. Per aprire la panoramica delle scorciatoie puoi anche utilizzare un’altra scorciatoia: Ctrl + K. Per gli utenti Mac queste scorciatoie possono essere utilizzate con i tasti equivalenti.

Barra laterale dei contenuti

La barra laterale dei contenuti a sinistra è segmentata in diverse categorie che semplificano l’aggiunta di nuovi contenuti al tuo sito web. Nella barra laterale dei contenuti distinguiamo tra elementi che sono componenti individuali come titoli, testi o immagini e preimpostazioni che sono sezioni predefinite del sito web costituite da diversi elementi. Esempi di preimpostazioni sono fisarmoniche, gallerie di immagini o tabelle dei prezzi. Gli elementi vengono visualizzati con icone (gli esempi sono nel riquadro rosso) e i predefiniti (riquadro arancione) vengono visualizzati con miniature che forniscono un’anteprima della sezione del sito web:

In alcune categorie come “Moduli”, troverai preimpostazioni ed elementi del modulo. Qui puoi anche sfruttare la distinzione sopra menzionata: gli elementi del modulo vengono visualizzati con icone, le preimpostazioni vengono visualizzate con miniature. Quando lavori con i moduli ti consigliamo vivamente di iniziare con un modulo predefinito che puoi adattare alle tue esigenze aggiungendo o eliminando elementi del modulo. Maggiori informazioni sui moduli possono essere trovate qui.

Per aggiungere preimpostazioni ed elementi al tuo sito web puoi semplicemente trascinarli e rilasciarli nella posizione preferita.

Altro menu

• Impostazioni del sito web: qui puoi modificare il logo a livello globale per il sito web e aggiungere una favicon e un’immagine di anteprima del sito web. 
• Dati: gestisci i dati di contatto e dei clienti per questo sito web in un unico posto e utilizza le associazioni di dati in modo che le modifiche vengano gestite da un unico luogo, ma influiscano sull’intero sito web.
• SEO: aggiungi meta informazioni per il sito web o snippet di codice da inserire in <head>.
• Lingue : attiva lingue diverse per visualizzare un sito web multilingue.
• Gestione raccolte: crea e gestisci contenuti dinamici come i blog.
• File: utilizza il file manager per caricare e gestire immagini, file e altri contenuti necessari per il sito web.
• Importazione di contenuti: se desideri utilizzare file, immagini e contenuti di un vecchio sito web, puoi semplicemente utilizzare questa funzione per importare i contenuti direttamente sul tuo attuale sito web.
• Caratteri: gestisci i caratteri che devono essere caricati per questo sito web. Puoi selezionare tra i caratteri disponibili o caricare caratteri personalizzati.
• Desideri: qui vedrai tutte le informazioni e i requisiti che i tuoi clienti hanno caricato sotto Desideri nel loro portale clienti. 

Piè di pagina con breadcrumb, timer ed editor di codice

Nel piè di pagina troverai il breadcrumb che mostra la gerarchia di contenitori ed elementi in modo da avere una panoramica di come sono nidificati i diversi contenitori, preimpostazioni ed elementi. In altre parole: all’interno del breadcrumb, ogni elemento e i suoi contenitori principali sono elencati insieme a tutte le classi CSS utilizzate. I contenitori preimpostati mostrano l’icona della tavolozza dei colori, i contenitori con uno sfondo mostrano un’icona immagine, le animazioni sono indicate da un’icona a forma di stella, gli elementi collegati hanno un’icona di collegamento e gli elementi che fanno parte di una raccolta mostrano un’icona di database. Basta fare doppio clic su questi simboli o sul nome del contenitore e si apriranno le impostazioni corrispondenti. 

Come puoi vedere in questa immagine, abbiamo fatto clic su un elemento in un contenitore che fa parte delle 3 colonne preimpostate, ecc.:

Puoi anche usare i tasti freccia per saltare da un elemento al successivo e passare così anche attraverso le diverse gerarchie. Ciò è particolarmente utile se hai molti elementi nidificati difficili da raggiungere. 

Sul lato destro del footer puoi vedere un timer che mostra per quanto tempo sei stato nel CMS durante questa sessione. Con la gestione dello stato e il monitoraggio del tempo hai sempre una panoramica del tempo già impiegato a lavorare su un progetto. Accanto al timer troverai il pulsante del codice che ti consente di accedere al codice del sito web, inclusi CSS, JavaScript e HTML. Qui puoi visualizzare o modificare il codice del progetto, incluso il codice per le preimpostazioni o scrivere il tuo codice.

WYSIWYG Editor

La sezione centrale è l’editor WYSIWYG. WYSIWYG sta per “ciò che vedi è ciò che ottieni”. Fai doppio clic su qualsiasi elemento nell’editor e le sue impostazioni verranno visualizzate in un pannello sul lato sinistro dello schermo. È possibile accedere alle preferenze tramite l’icona di un pezzo di puzzle che appare a sinistra di un elemento quando ci si passa sopra. Cliccandoci sopra si aprirà la finestra con le impostazioni predefinite.

Fare clic con il tasto destro su un elemento per aprire il menu contestuale. Sono disponibili opzioni per modificare l’elemento, ritagliare, copiare, incollare, aggiungere ed eliminare elementi e altro. Il menu contestuale fornisce collegamenti per la modifica e l’opzione per renderlo “Modificabile per i clienti”. Con questa funzione, puoi fare in modo che alcune parti della pagina possano essere modificate dai tuoi clienti dal loro portale clienti. Qui hai la possibilità di condividere solo questo elemento, tutti gli elementi di questo tipo o tutti gli elementi sulla pagina.