Blog - giancarloweb.it

Vai ai contenuti

Come personalizzare un mio Template con le tue immagini

giancarloweb.it
Pubblicato da in Tutorial · 17 Aprile 2019
Tags: tutorialtemplate
setup Come personalizzare un mio Template con le tue immagini
 
Vediamo come personalizzare i miei template in base alle proprie esigenze. Probabilmente la modifica principale consiste nel sostituire le immagini sui vari blocchi Header, Body e Footer, cerchiamo quindi di capire dove sono e come arrivarci.
 
Prendiamo come esempio il template MyCompany (valido anche per tutti gli altri modelli): vediamo come sostituire il logo della testata (Header).

Apriamo il nostro template ed andiamo al passo 2 Modello, quindi selezioniamo la terza icona “Contenuto del modello”.

impostazione modello

Bene, ora ci troviamo nella schermata che vedete nella figura sotto, cioè nel “Contenuto del Modello”; in questa sezione possiamo sostituire il logo con uno desiderato e ci basterà cliccare sull’immagine myCompany del logo per inserirne una nostra opportunamente ridimensionata.
 
Fatto questo, ci dobbiamo assolutamente ricordare di controllare anche la situazione sui vari breakpoint (frecce blu): cliccando al centro dei vari breakpoint, se troviamo l’immagine non posizionata correttamente, ci basterà trascinarla nella giusta posizione.

contenuto modello

In questa sezione possiamo anche modificare il tipo di Font, la dimensione del carattere, il colore e molto altro del menù, ma anche del menù di livello e dell’hamburger menù.

Per fare questo, cliccate due volte sull'oggetto menù, si aprirà una nuova schermata con tutte le opzioni per personalizzare quanto indicato sopra. Cliccando sulle varie sezioni cerchiate in rosso, potrete intervenire sulle altre tipologie di menù.

Oggetto menù

Sempre da “Contenuto del Modello” possiamo accedere al Footer (il piè di pagina) e cioè la parte bassa del nostro template.
 
nota #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.

contenuto header

Come possiamo vedere nell’immagine sottostante, siamo all'interno dell’editor del Footer (piè di pagina) del nostro template MyCompany con tutti i vari oggetti.
 
Cliccando sopra ad ogni oggetto possiamo personalizzare i contenuti di ognuno di essi e anche in questa sezione, come sull’Header (testata), dobbiamo verificare la giusta disposizione dei vari oggetti, per eventualmente intervenire sulle risoluzioni inferiori per rendere non visibile (pulsante Mostra/nascondi) qualche oggetto che non riesce più ad entrare negli spazi ristretti di Tablet e Smartphone.

contenuto footer



sostituire SOSTITUIRE LE IMMAGINI SULLE PAGINE
Ora passiamo alle immagini contenute sul corpo o body della pagina del nostro template MyCompany.

Per modificare la pagine dovete andare allo step 3 in MAPPA: sulla destra vediamo le varie pagine che compongono il template. Per modificare la HOME (freccia blu), ad esempio, clicchiamo 2 volte sulla scritta HOME.

creazione mappa

nota #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 che scorrono nello slider della Home del template MyCompany sono nel primo oggetto che vedete sull’editor della pagina. Per sostituire le immagini vi basterà cliccare sull'oggetto stesso e poi procedere alla sostituzione, inserendo le vostre rispettando, naturalmente, le opportune dimensioni in larghezza di 1920px.

creazione pagina

Avrete senz'altro notato che  l’oggetto è più largo degli altri. A partire dalla versione V17 di Website è stata finalmente introdotta la possibilità di estendere gli oggetti per tutta la larghezza del browser; per attivare questa funzione basta selezionare l’oggetto e cliccare sull’iconcina indicata dalla freccia blu.


immagine Immagine sulle ROW (Righe)
Altre immagini che possiamo sostituire, senza grosse difficoltà, sono quelle presenti sulle ROW (righe) della nostra pagina. Prendiamo, come esempio, quello della ragazza bionda presente sulla home del template myCompany e vediamo come possiamo inserirne una nostra.

immagine mycompany

Prima di tutto dobbiamo individuare sulla pagina home la riga o le righe su cui intervenire.

editor di pagina

Per potere intervenire sulle proprietà dello “Stile Righe”, quando entriamo sulla pagina in cui troviamo tutti gli oggetti (vedi figura sopra), ci basterà cliccare sull’iconcina in alto Stile Righe per entrare nella sezione dedicata.
 
Una volta entrati nello stile righe dobbiamo cliccare sulla riga da modificare: sulla destra si attiveranno una serie di opzioni utili per sostituire l’immagine, modificare l’effetto parallasse, attivare l’opzione colore, ecc. , come visibile nella figura sotto.

stile righe



immagine ALTRE IMMAGINI IN PROPRIETA' DI PAGINA
Ci 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à.

mappa sito

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.

proprietà di pagina

Spero vi sia utile per modificare uno dei miei template, e probabilmente non solo.




4 commenti
Antonio Aldorasi
2019-04-22 08:38:44
ciao buongiorno
vorrei fare un ecommerce cazuto con website, quanto mi chiedi per un template ad hoc ? non so nulla di grafica etc...
Giancarlo
2019-04-22 10:57:49
Buongiorno Antonio, grazie per il tuo commento.
Sulla pagina Template puoi trovare alcuni modelli di e-commerce che puoi facilmente adattare seguendo le istruzioni di questo tutorial. Se invece hai bisogno di qualcosa di particolare, puoi contattarmi tramite email, specificando esattamente quali sono le tue esigenze.
Grazie saluti Giancarlo.
Alexander
2019-10-14 18:26:15
Ciao Giancarlo. Grazie per l'interessante lavoro.
Ho acquistato WebSite X5 Evo 17. Desidero ricevere il tuo consiglio, ma non posso né aggiungere né eliminare foto.
Nella tua illustrazione nella versione PRO puoi vedere l'inserto Swiper Animated Slider.
Riesco a vedere Inserisci immagine (non Slider) https://yadi.sk/i/ZgrVVAzBRKVBPg
Posso inserire o eliminare foto nella versione EVO?
In caso contrario, come fare diversamente?
Grazie in anticipo, Alexander
Giancarlo
2019-10-14 18:55:11
Ciao, non ci sono limitazioni per inserire immagini sulla EVO rispetto alla PRO.
Non so se ho capito bene, tu vuoi inserire un'immagine e NON una slides, per fare questo puoi utilizzare lo stile righe oppure l'immagine di sfondo in proprietà di pagina.
Però ripeto NON so se ho capito il tuo problema, fammi sapere.
Ciao Giancarlo.

-------------------------

Hi, there are no limitations to insert images on the EVO compared to the PRO.
I don't know if I understand correctly, you want to insert an image and NOT a slides, to do this you can use the rows style or the background image in page properties.
But I repeat I do NOT know if I understand your problem, let me know.
Hi Giancarlo.
© 2019 giancarloweb.it by Bartolini Giancarlo | P.IVA 02540520398
Torna ai contenuti