Come personalizzare un mio Template con le tue immagini 2
Come personalizzare un mio Template con le tue immagini Iniziamo insieme un percorso guidato, passo dopo passo, per personalizzare i template in modo preciso e coerente con la tua identità visiva.
La prima e più frequente attività di personalizzazione riguarda la sostituzione delle immagini predefinite presenti nei blocchi principali del modello: Header (testata), Body (corpo) e Footer (piè di pagina). È fondamentale sapere dove sono collocate e come aggiornarle correttamente per ottenere un risultato professionale e uniforme.
Come esempio, utilizzeremo il template Repair Company — le stesse istruzioni si applicano anche a tutti gli altri modelli disponibili. In particolare, ti mostrerò come sostituire il logo nella sezione Header.
🔧 Procedura di personalizzazione del logo
- Apri il template che desideri modificare.
- Vai al “Passo 2 – Modello”.
- Seleziona l’icona “Contenuto del modello” (la terza), per accedere alla sezione dedicata alla gestione delle immagini e degli elementi grafici.
Da qui potrai aggiornare facilmente il logo e ogni altro elemento visivo, adattandolo all’identità del tuo brand.
Ci troviamo ora nella schermata denominata “Contenuto del Modello”. In questa sezione è possibile personalizzare l’aspetto grafico del template sostituendo il logo predefinito con uno proprio. Per procedere, è sufficiente cliccare sull’immagine del logo “REPAIRCOMPANY” e caricare il file desiderato, avendo cura che sia dimensionato in modo appropriato per garantire una resa ottimale.
Dopo aver inserito il nuovo logo, è importante verificarne la visualizzazione nei vari breakpoint (evidenziati dalle frecce rosse), che corrispondono alle diverse risoluzioni dei dispositivi. Cliccando su ciascun breakpoint, è possibile controllare l’allineamento dell’immagine: se il logo non appare correttamente posizionato, è sufficiente trascinarlo manualmente fino al punto desiderato per assicurare un corretto adattamento grafico su tutti i formati.
In questa sezione è possibile configurare in modo avanzato l’aspetto grafico del menù, intervenendo su elementi quali font, dimensione del testo, colori e ulteriori parametri di stile. Le medesime opzioni di personalizzazione sono disponibili anche per il menù di secondo livello e per il menù hamburger, garantendo coerenza visiva sull’intera navigazione del sito.
Per iniziare la modifica, fate doppio clic sull’elemento del menù (come illustrato nell’immagine precedente, indicato dalla freccia blu sulla barra del menù nell’Header). Verrà visualizzata un’interfaccia dedicata in cui sono presenti tutte le opzioni di personalizzazione. Selezionando le sezioni evidenziate in rosso, potrete accedere alle impostazioni specifiche per ciascuna tipologia di menù e applicare le modifiche desiderate in modo mirato.
Sempre dal pannello “Contenuto del Modello” è possibile accedere alla sezione Footer (piè di pagina), ovvero l’area inferiore del nostro template, dedicata agli elementi conclusivi o ricorrenti dell’impaginato.
#NOTA: Header e Footer sono sezioni che si ripetono su tutte le nostre pagine, a differenza del Corpo o body della nostra pagina, dove troviamo invece i contenuti veri e propri che naturalmente variano da pagina a pagina.
Come illustrato nell’immagine precedente, ci troviamo nell’editor del Footer (piè di pagina) del template Repair Company, all’interno del quale sono raccolti tutti gli elementi che compongono questa sezione.
Cliccando su ciascun elemento è possibile accedere alle relative opzioni di personalizzazione del contenuto. Analogamente a quanto avviene per l’Header (testata), è fondamentale verificare la corretta disposizione degli elementi nel layout e, se necessario, effettuare ottimizzazioni per i dispositivi con risoluzioni inferiori, come tablet e smartphone. In tali circostanze, è possibile utilizzare la funzione Mostra/Nascondi per occultare gli elementi che non si adattano correttamente agli spazi ridotti, garantendo così una visualizzazione ordinata e coerente su tutti i dispositivi.
SOSTITUIRE LE IMMAGINI SULLE PAGINEOra passiamo alle immagini presenti nel corpo (body) della pagina del template “Repair Company”.
Per modificare una pagina del template, accedere allo Step 3 – MAPPA. Nella sezione destra dell’interfaccia viene visualizzato l’elenco completo delle pagine che compongono il modello.
Per intervenire su una pagina specifica, come ad esempio la HOME (evidenziata nell’interfaccia con una freccia blu), è sufficiente effettuare un doppio clic sul nome della pagina desiderata.
#NOTA: visto che siamo sulla sezione mappa ne approfitto per informarvi che solo su questo step (3) possiamo rinominare le pagine, ma anche aggiungerne di nuove o eliminarne. Ogni modifica che effettuerete in questa sezione varierà automaticamente anche il menù principale, quello sull’Header (testata).Le immagini visualizzate nello slider della Home page sono contenute nel primo elemento della struttura, denominato Content Slider, accessibile tramite l’editor. Per aggiornarle, è sufficiente selezionare l’elemento e caricare le nuove immagini, assicurandosi che rispettino la larghezza consigliata di 1920 px per garantire una corretta visualizzazione e ottimizzazione del layout.
È possibile osservare che l’elemento selezionato presenta una larghezza superiore rispetto agli altri oggetti presenti nella pagina.
A partire dalla versione V17 di Website, è stata introdotta la funzionalità che consente di estendere gli oggetti a tutta la larghezza della finestra del browser. Per abilitare questa opzione, è sufficiente selezionare l’oggetto e fare clic sull’icona dedicata, evidenziata dalla freccia blu.
Nelle versioni più recenti, inoltre, gli oggetti di tipo immagine visualizzano un’anteprima del contenuto direttamente all’interno dell’editor di pagina, facilitando in modo significativo l’individuazione e la gestione delle immagini.
Immagine sulle ROW (Righe) Anche le immagini inserite all’interno delle righe (ROW) della pagina possono essere facilmente sostituite. Ad esempio, prendiamo in considerazione l’immagine evidenziata in rosso nella homepage del template Repair Company e analizziamo il procedimento per sostituirla con una nostra immagine personalizzata.
Prima di tutto dobbiamo individuare sulla pagina home la riga o le righe su cui intervenire.
Per modificare le proprietà dello Stile Righe, accedendo alla pagina con l’elenco di tutti gli oggetti (vedi figura sopra), è sufficiente cliccare sull’icona Stile Righe in alto per entrare nella sezione dedicata.
All’interno dello stile righe, selezioniamo la riga che desideriamo modificare (rettangolo rosso). Sul lato destro appariranno diverse opzioni (freccia rossa) che consentono di:
- sostituire l’immagine,
- attivare l’opzione colore,
- impostare l’allineamento,
- e altre funzioni sperimentabili a seconda delle esigenze.
Successivamente, è possibile regolare l’effetto parallasse, l’overlay e l’estensione della riga (rettangoli rossi in alto), come mostrato nella figura sottostante.
L’anteprima dell’immagine corrente è indicata dalla freccia blu.
L’anteprima dell’immagine corrente è indicata dalla freccia blu.
ALTRE IMMAGINI IN PROPRIETA' DI PAGINACi sono alcuni template, come ad esempio Ristò, che hanno l’immagine principale nella proprietà della pagina in sezione grafica. Vediamo come arrivarci.
Anche in questo caso dobbiamo andare allo step 3 MAPPA, selezionare la Home e cliccare sull’iconcina sopra Proprietà.
Ora andiamo nella sezione Grafica: come potete vedere nella figura sotto, si attivano una serie di opzioni per personalizzare graficamente lo sfondo delle pagine. In questo caso sul template Risto ho inserito un’immagine da 1920px di larghezza che ho reso fissa; nel campo File Immagine potrete inserirne una vostra per personalizzare la Home.
Spero vi sia utile per modificare uno dei miei template, e probabilmente non solo.
0
recensioni