WebSite X5Help Center

 
Guido G.
Guido G.
User

Modifica Template  it

Author: Guido G.
Visited 1040, Followers 1, Shared 0  

Ciao, sto facendo un sito responsive con un template già preimpostato, il mio è un sito di fotografia e se scorrete il template di websitex5 nella sezione fotografia è quello che nell'intestazione ha l'immagine di un ragazzo che ha in mano una fotocamera.

Ecco il mio problema però è che quando visualizzo quel template a dimensioni di un telefono l'intenstazione la perdo, andando a perdere parte importante del mio sito, dato che contiene le icone dei social, il nome d'arte mio e diverse altre cose che non vorrei perdere, come posso modificare la struttura dell'header responsive in modo da avere la stessa intestazione ma più piccola?

Posted on the
8 ANSWERS
Claudio D.
Claudio D.
Moderator
Best User of the month IT

In responsive per l'intestazione devi tendenzialmente usare un'immagine più piccola.

Per i link vari e le iconcine social , leggi qui , il suggerimento di Mirko con gli esempi ...:

https://helpcenter.websitex5.com/post/128798

lo risolvi con qualche codice da aggiungere...

Read more
Posted on the from Claudio D.
Giuseppe Guida
Giuseppe Guida
User

Ciao Guido, avevomlo stesso problema, ti spiego passo passo come fare......

Io qui: http://www.bozzasito003.altervista.orgho risolto con una piccola aggiunta di codice e trasformando le scritte nell'intestazione in immagini PNG. Prova a ridurre man mano la finestra del browser di navigazione e vedrai che tutti i contenuti rimangono sempre visibili adattandosi man mano (compresa la barra del campo di ricerca).

Per ottenere quello che ho fatto io, fai semplicemente così:

al "PASSO 4 / Statistiche, SEO e Codice / Esperto /Prima della chiusura del Tag Head"aggiungi questo:

<style>

@media (max-width: 990px) {

div.imTemplateContent {

display: block !important;

}

}

</style>

Poi vai al PASSO 1 / Personalizzazione del Modello Desktop e inserisci le scritte del nome del tuo Sito/Blog in intestazione però TUTTE A SINISTRA (!!) e trasforma tali scritte in immagini PNG (utilizzando semplicemente la funzione del programma "Salva come immagine in formato PNG" che si trova in basso nella stessa Personalizzazione del Modello Desktop. Tenendo selezionata una scritta vedrai che si attiva la voce "Salva come immagine in formato PNG).

Infine vai a posizionare al PASSO 1 / Stile del modello / Struttura del Modello Principaleun'immagine che più ti piace in "Sezione della Pagina / Sfondo dell'Intestazione" e assegna allo Sfondo dell'Intestazione, alla voce "Dimensioni", un valore Altezza uguale a quella della foto che hai scelto (la Larghezza è settata in automatico da Website X5 su 1920). Io ho usato un'immagine (quella che raffigura le due mani che sorreggono la piantina con tutto lo sfondo dell'erba in B/N) con dimensioni di 1800 px di Larghezza e 500 px in Altezza.

La stessa identica cosa per l'immagine di sfondo dell'Intestazione la devi fare anche per la "Struttura del Modello Responsive" (per le scritte non devi fare più nulla! Solo per l'immagine!). Vai quindi sempre al al PASSO 1 / Stile del modello e utilizza la stessa immagine usata nel Modello Principale solo che in questo caso l'immagine non deve essere di 1800 x 500 ma più piccola, chiaramanente (io ho usato la stessa immagine del Modello Principale ma ridotta a 1500 x 420 px, valore quest'ultimo (420 px) che dovrai assegnare all'Altezza dell'Immagine in "Sezione Pagina / Sfondo dell'Intestazione" sempre nel Modello Responsive).

Fai anteprima e man mano e vedi cosa succede alle diverse visualizzazioni.

Nel successivo post ti descrivo per bene come fare per aggiungere immagini di icone social (o immagini in genere) che siano sempre visibili anche nel Responsive...

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Per visualizzare un’IMMAGINE tipo logo, gif, icona dei social o altro inserita nel modello Principale ma VISIBILE anche nel modello RESPONSIVE(a patto però che si sia già inserito il codice indicato nel post precedente al "PASSO 4 / Statistiche, SEO e Codice / Esperto /Prima della chiusura del Tag Head") bisogna procedere così:

al PASSO 1 in “Personalizzazione del Modello Desktop” inserire l’immagine/icona tramite la funzione “Inserisci Codice HTML”(simbolo del foglio giallino con i bordi arrotolati, in alto a destra). Clicca quindi sul simbolino e si aprirà la finestra per inserire il codice HTML (tale finestra alla fine della procedura farà visualizzare l’immagine/icona al posto del codice HTML, per cui va posizionata dove si desidera che appaia l’immagine/icona nell’Intestazione del sito)

il codice da inserire nella finestra è questo:

<img src="files/nomeimmagine.png">

Naturalmente a “nomeimmagine” va sostituito il nome assegnato realmente all’immagine (che nel caso del mio esempio è una PNG ma potrebbe essere una JPEG o GIF e nel caso sia una di queste, sostituire a .png la giusta estensione dell’immagine, tipo .jpeg oppure .gif)

INFINE alleghiamo fisicamente l’immagine che verrà richiamata dal codice sopra inserito. PORTARSI QUINDI IN UN QUALSIASI PUNTO DI UNA QUALSIASI PAGINA DEL SITO E INSERIRE UN “Oggetto Codice HTML” da scegliere tra gli “Oggetti Principali” della Pagina, sulla sinistra. Aprire l’ “Oggetto Codice HTML” e portarsi nel tab "Esperto - File allegati al codice - Aggiungi”, cliccare su “Aggiungi” e caricare l’immagine “nomeimmagine.png” tramite la voce “File collegato da pubblicare sul server” e dare l’OK lasciando invariate le altre voci.

Fare l’Anteprima e verificare che le immagini appaiano nell’Header del sito sia nella visualizzazione Desktop che in quella Responsive (occhio a posizionarle in maniera tale che riducendo lo schermo nel Responsive, tali immagini siano sempre visibili. E’ preferibile posizionarle al centro o, ancora meglio, a sinistra!)

Read more
Posted on the from Giuseppe Guida
Guido G.
Guido G.
User
Author
Giuseppe Guida
Ciao Guido, avevomlo stesso problema, ti spiego passo passo come fare...... Io qui: http://www.bozzasito003.altervista.orgho risolto con una piccola aggiunta di codice e trasformando le scritte nell'intestazione in immagini PNG. Prova a ridurre man mano la finestra del browser di navigazione e vedrai che tutti i contenuti rimangono sempre visibili adattandosi man mano (compresa la barra del campo di ricerca). Per ottenere quello che ho fatto io, fai semplicemente così: al "PASSO 4 / Statistiche, SEO e Codice / Esperto /Prima della chiusura del Tag Head"aggiungi questo: <style> @media (max-width: 990px) { div.imTemplateContent { display: block !important; } } </style> Poi vai al PASSO 1 / Personalizzazione del Modello Desktop e inserisci le scritte del nome del tuo Sito/Blog in intestazione però TUTTE A SINISTRA (!!) e trasforma tali scritte in immagini PNG (utilizzando semplicemente la funzione del programma "Salva come immagine in formato PNG" che si trova in basso nella stessa Personalizzazione del Modello Desktop. Tenendo selezionata una scritta vedrai che si attiva la voce "Salva come immagine in formato PNG). Infine vai a posizionare al PASSO 1 / Stile del modello / Struttura del Modello Principaleun'immagine che più ti piace in "Sezione della Pagina / Sfondo dell'Intestazione" e assegna allo Sfondo dell'Intestazione, alla voce "Dimensioni", un valore Altezza uguale a quella della foto che hai scelto (la Larghezza è settata in automatico da Website X5 su 1920). Io ho usato un'immagine (quella che raffigura le due mani che sorreggono la piantina con tutto lo sfondo dell'erba in B/N) con dimensioni di 1800 px di Larghezza e 500 px in Altezza. La stessa identica cosa per l'immagine di sfondo dell'Intestazione la devi fare anche per la "Struttura del Modello Responsive" (per le scritte non devi fare più nulla! Solo per l'immagine!). Vai quindi sempre al al PASSO 1 / Stile del modello e utilizza la stessa immagine usata nel Modello Principale solo che in questo caso l'immagine non deve essere di 1800 x 500 ma più piccola, chiaramanente (io ho usato la stessa immagine del Modello Principale ma ridotta a 1500 x 420 px, valore quest'ultimo (420 px) che dovrai assegnare all'Altezza dell'Immagine in "Sezione Pagina / Sfondo dell'Intestazione" sempre nel Modello Responsive). Fai anteprima e man mano e vedi cosa succede alle diverse visualizzazioni. Nel successivo post ti descrivo per bene come fare per aggiungere immagini di icone social (o immagini in genere) che siano sempre visibili anche nel Responsive...

Non si vede il link che hai mandato non è raggiugibile!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Read more
Posted on the from Guido G.
Guido G.
Guido G.
User
Author

Ma quando flaggo l'opzione "salva immagine come JPEG " dove la salva l'immagine perchè io non la trovo!!!!

Read more
Posted on the from Guido G.
Giuseppe Guida
Giuseppe Guida
User

Ma non salvare come JPEG!!! devi salvare invece come PNG... digita un testo e poi spunta  l'opzione "Salva come immagine in formato PNG" (vedi screenshot allegato)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

vuoi sapere subito il percorso di un'immagine inserita in intestazione? Vedi screenshot allegato.... questo però vale per le immagini, non per i testi...

Read more
Posted on the from Giuseppe Guida