Compatibilità:

WebSite X5 Evo e Pro

In WebSite X5 hai a disposizione più di 100 template predefiniti tra cui puoi scegliere quello da utilizzare per il tuo progetto. A questi si aggiungono, poi, tutti quelli che vengono di volta in volta aggiunti su Marketplace.


Tutti i template sono stati studiati in ogni dettaglio e tendenzialmente possono essere impiegati così come sono. Detto questo, potresti comunque avere l'esigenza di personalizzarli, magari di cambiare alcune immagini perché il layout si adatti meglio all'argomento che tratti, al settore a cui appartiene l'attività che vuoi presentare o alla tipologia di prodotti che vuoi vendere.


La bella notizia è che puoi personalizzare ogni elemento di un template, incluse le immagini utilizzate. 


La procedura che devi seguire per farlo cambia a seconda del punto in cui le immagini sono inserite. I casi principali sono i seguenti:


Prima di procedere, abbiamo 2 consigli:

  1. Aiutati con l'anteprima - Ricorda che in qualsiasi momento puoi cliccare sul pulsante Anteprima e visualizzare un'anteprima nel browser in locale del template: questo ti aiuterà a capire com'è organizzato e quali sono le parti che devi personalizzare. 
  2. Gestisci correttamente i file - Se clicchi con il tasto destro del mouse in un campo che permette l'importazione di un file, apri un menu contestuale che ti consente di rimuovere un file già importato, di aprirlo all'interno della cartella in cui è archiviato o di salvarne una copia. In questo modo puoi, per esempio, individuare i file originali e, nel caso, crearne una copia prima di sostituirli.  

Sostituire un'immagine inserita come sfondo di una pagina del sito

Lo sfondo della pagina è l'area esterna alla pagina vera e proprio, ovvero quella che viene visualizzata quando la finestra del Browser viene aperta con dimensioni superiori rispetto alla risoluzione del sito.


In questa immagine di esempio, lo sfondo della pagina è l’area colorata di blu.


Se nel template che hai scelto c'è un'immagine impostata come sfondo della pagina e la vuoi modificare devi fare così:

  • Accedi al Passo 2 - Impostazioni del Modello > Struttura del Modello e verifica che come Sezione della Pagina sia impostato Sfondo della Pagina. 
  • Clicca sull'icona dell'opzione File Immagine per importare l'immagine che desideri utilizzare al posto di quella originariamente presente.


#tip - Vuoi agire sull'immagine di sfondo di una singola pagina senza modificare il template? Vedi, Come si imposta per una pagina uno sfondo diverso da quello previsto dal template?


Sostituire un'immagine inserita come sfondo del contenuto di una pagina

Lo sfondo del contenuto della pagina, ovvero l'area destinata ad ospitare il contenuto vero e proprio delle pagine, è un altro elemento definito dal template che sei libero di personalizzare.


In questa immagine di esempio, lo sfondo del contenuto della pagina è l’area colorata di blu.


In questo caso, la procedura è simile a quella vista nel paragrafo precedente:

  • Accedi al Passo 2 - Impostazioni del Modello > Struttura del Modello e, questa volta, verifica che come Sezione della Pagina sia impostato Contenuto della Pagina. 
  • Clicca sull'icona dell'opzione File Immagine per importare l'immagine che vuoi usare.


#tip - Se vuoi modificare l'immagine di sfondo del contenuto di una singola pagina senza modificare l'intero template, vedi Come si imposta per il contenuto di una pagina uno sfondo diverso da quello previsto dal template?


Header e Footer sono sezioni che non mancano praticamente mai in un template dal momento che contengono elementi essenziali come il logo o il menu di navigazione principale.


È probabile che l'immagine o il colore utilizzato come sfondo dell'Header/Footer sia stato definito come parte del template. In questo caso, per modificarlo devi procedere così: 

  • Accedi al Passo 2 - Impostazioni del Modello > Struttura del Modello e verifica che come Sezione della Pagina sia impostato Header ( o Footer). 
  • Clicca sull'icona dell'opzione File Immagine per importare l'immagine che vuoi usare o sfrutta l'opzione Colore per impostare la tinta che preferisci.
  • Ricorda che puoi fare in modo che l'Header (o il Footer) sia largo non quanto la pagina ma quanto la finestra del Browser attivando l'opzione Estendi alla larghezza della finestra del Browser. 


#tip - Oltre allo sfondo, puoi definire anche i contenuti dell'Header e del Footer. Vedi, Come si modifica la composizione di Header e Footer?


Sostituire un'immagine inserita come stile delle Righe

I template di WebSite X5 sono dei veri e propri mini-siti per cui, oltre alla immagini presenti nel template, molto probabilmente vorrai sostituire alcune immagini inserite all'interno delle pagine.


Per esempio, potresti voler cambiare l'immagine usata come sfondo in una banda orizzontale all'interno di una pagina. Nella maggior parte dei casi, per creare queste fasce sfruttiamo la possibilità di agire sullo stile delle righe che ci consente anche di gestire un bellissimo effetto parallasse. In casi come questo, devi procedere così:

  • Apri al Passo 4 - Creazione della Pagina la pagina su cui intendi lavorare.
  • Seleziona sulla griglia di impaginazione la riga (o il gruppo di righe) corrispondenti alla fascia che vuoi personalizzare e clicca sul pulsante Stile Righe.
  • Se era presente un'immagine di sfondo, nella sezione Sfondo trovi selezionata l'opzione Immagine.
  • Per sostituire l'immagine clicca sull'icona dell'opzione File Immagine e importa l'immagine che vuoi utilizzare in sostituzione di quella originale.
  • Puoi usare le opzioni disponibili per regolare posizione e opacità.
  • Puoi anche decidere di selezionare un contenuto diverso come Sfondo e sostituire l'immagine con un colore in tinta unita, una sfumatura, una galleria, un video o una cartina. 
  • Infine per qualsiasi tipo di sfondo, ad eccezione del colore in tinta unita, puoi decidere di impostare o meno l'effetto parallasse: clicca sul pulsante Parallasse e utilizza le impostazioni presenti nella finestra richiamata.


#tip - Per approfondire come la sfruttare al meglio lo stile delle righe, vedi Come si lavora sulle Righe della Griglia di impaginazione? Per maggiori informazioni sull'effetto parallasse, invece, vedi Come si imposta l’effetto parallasse?


Sostituire un'immagine inserita come stile dell'Oggetto

Oltre alle fasce orizzontale, nelle pagine di un template possono esserci dei box, magari con uno sfondo, un titolo e un contenuto. In alcuni casi l'aspetto di questi box è definito dallo stile dell'Oggetto e puoi personalizzarlo agendo in questo modo:

  • Apri al Passo 4 - Creazione della Pagina la pagina su cui intendi lavorare.
  • Seleziona sulla griglia di impaginazione la cella relativa al box che vuoi personalizzare e clicca sul pulsante Stile.
  • Se era presente un'immagine di sfondo, in Stile > Sfondo trovi selezionata l'opzione Cella con immagine di sfondo o Cella con immagine adattata.
  • Per sostituire l'immagine clicca sull'icona dell'opzione File Immagine e importa l'immagine che vuoi utilizzare in sostituzione di quella originale.
  • Oltre all'immagine puoi modificare tutti gli altri elementi, giocando con colori, allineamenti, margini e testi.
  • Puoi salvare lo stile definito così  da poterlo applicare velocemente ad altri oggetti: non devi fare che andare nella sezione Libreria e cliccare sul pulsante Aggiungi.


#tip - Per maggiori informazioni sullo stile degli Oggetti, vedi Come si crea un box di sfondo per un Oggetto? 


Sostituire un'immagine inserita come Oggetto Immagine, Oggetto Galleria o similari

Infine, in un template ci sono una serie di immagini inserite come contenuto delle pagine: sono quelle che dovrai sostituire con altre specifiche per ciò che proponi.


A seconda dei casi queste immagini possono essere state inserite come Oggetto Immagine, Oggetto Galleria, Oggetto Pulsante, ecc. A prescindere dall'Oggetto specifico di volta in volta utilizzato, la procedura che dovrai seguire per personalizzarlo non cambia:

  • Apri al Passo 4 - Creazione della Pagina la pagina su cui intendi lavorare.
  • Seleziona sulla griglia di impaginazione l'Oggetto su cui vuoi lavorare e clicca sul pulsante Contenuto, o fai doppio click sull'Oggetto stesso.
  • Nella finestra di impostazioni a cui accedi trovi tutte le opzioni necessarie per sostituire le immagini e per gestire tutte le proprietà relative.