25 novembre 2015

Template November per WebSite X5 Evolution e Professional 12

Il sito templatemo.com è sempre fonte di ispirazione. Il template che abbiamo scelto questa volta è November ma, a differenza degli altri adattamenti, ci siamo concentrati sugli elementi di base del layout tralasciando volutamente i contenuti.

Per l'occasione abbiamo rielaborato lo script creato per il template Composite per visualizzare fasce di sfondo orizzontali a tutta pagina e abbiamo ripreso il plugin Single Page Nav, che abbiamo modificato per WebSite X5, per gestire la navigazione monopagina.
Un altro po' di codice è servito per modificare il menu mobile del programma.

Il template originale è rilasciato sotto licenza Creative Commons 4.0. Per quanto riguarda il nostro adattamento leggi i termini di utilizzo.
Si prega di non rimuovere i crediti presenti all'interno del codice, grazie.

Qui la demo (versione 12.0.3.19):

demo november
DEMO

Le risorse utilizzate nel template sono:

Per integrare i Google Fonts, prima di importare il progetto, occorre inserire i relativi files .ttf nella sezione "Preferenze" del programma. Oltre che da Google Font, è possibile scaricare i files da QUI.

Questo il codice @import da noi utilizzato:

Open Sans
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300,800);

Oswald
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);


Nella pagina download è presente il file .iwzip da scaricare valido sia per la Evolution che per la Professional:



Tutti i blocchi di codice personalizzato, inseriti nelle sezioni previste dal programma e nei files custom.css e custom.js sono commentati per permettere una facile lettura ed eventuale modifica.
Se hai la necessità di inserire nel menu un link ad una pagina diversa dalla home puoi seguire le indicazioni del punto 1 di questo articolo: quellidelcucuzzolo.blogspot.it/2015/03/template-tamarillo-menu-link-esterno.html

Per problemi di visualizzazione o difficoltà incontrate nelle personalizzazioni, potete contattarci a questo indirizzo quellidelcucuzzolo@altervista.org oppure attraverso i commenti di questo post.



Aggiornamento del 08/06/2016:
  • in seguito al rilascio della versione 12.0.8.28 è stato necessario modificare il valore del parametro offset (riga 20) della funzione singlePageNav nel file custom.js
Potete scaricare il file custom.js aggiornato da QUI.
Dopo aver scaricato e decompresso il file, al Passo 4, rimuovete il vecchio file custom.js ed allegate il nuovo file impostando come Percorso relativo sul Server la cartella js e spuntando la casella Collega il file...
Si fa presente che il file .iwzip è stato aggiornato con la nuova modifica.







73 commenti:

  1. Molto bello questo template, sopratutto il caricamento della pagina...di grande effetto. Mi domando se è possibile adattare questo sistema di caricamento ad un qulasiasi altro progetto di website x5.

    RispondiElimina
    Risposte
    1. Ciao Francesco,

      certo è possibile.
      Puoi estrapolare il codice necessario, preceduto dal commento "CSS3 Preloader", dalle varie sezioni presenti nella scheda Esperto in Proprietà Pagina. Anche il codice che trovi in Proprietà del tag BODY fa parte del "pacchetto".
      Dovrai anche allegare al progetto il file preloader.css nella cartella css.

      Elimina
    2. Salve ho provato a fare come avete consigliato, ma non riesco a far spuntare l'effetto prima del caricamento del sito. Se non è un problema potreste spiegarmi punto per punto, molto probabilemnte dimentico o salto qualche punto.
      Grazie

      Elimina
    3. Ciao Igor,
      noi ti aiutiamo volentieri ma dovremmo vedere a che punto sei arrivato per capire cosa stai sbagliando. Posta, se vuoi, un link alla tua prova online (anche via mail).

      Elimina
    4. Salve, si se mi mandate la vostra email provvederò a linkarvi la prova online.

      Elimina
    5. Ciao, trovi la nostra mail in alto a destra.

      Elimina
    6. Perfetto , Ho inviato l'email. Attendo vostre notizie.

      Elimina
  2. Salve, come sarebbe possibile e dove sostituire la funzione h2 "november" quindi logo in alto a sinistra, con un img? grazie...

    RispondiElimina
    Risposte
    1. Ciao Vox,

      se vuoi sostituire l'elemento H2 con un'immagine, oltre che modificare il tag in Personalizzazione del Modello - Intestazione - Codice HTML, dovrai modificare tutte le regole CSS relative al tag H2 che trovi nel file custom.css, adattandole al nuovo markup.

      Elimina
  3. È possibile inserire sulle varie pagine uno sfondo personalizzato solo per le pagine del sito mobile?

    RispondiElimina
    Risposte
    1. Ciao Carlo,

      se ti riferisci agli sfondi delle fasce orizzontali dell'unica pagina del template, dovrai scrivere in una media query le regole per cambiare gli sfondi alla risoluzione desiderata.

      Elimina
    2. Grazie per la risposta... ho provato ad inserire delle media query per impostare i vari sfondi delle varie pagine e sullanteprima sembra funzionare anche riducendo la dimensione della pagina... nel momento che pubblico il sito però mi rimane impostato sempre lo sfondo delle pagine desktop! È come se gli sfondi impostati tramite media query rimanessero dietro quelli impostati per il desktop...come se si sovrapponessero!

      Elimina
    3. Ciao Carlo,
      se funziona in anteprima deve funzionare anche online. Sarà banale come risposta, ma prova a forzare il caricamento della pagina con Ctrl F5. Se ancora non funziona, se vuoi, posta il link qui o via mail.

      Elimina
  4. Salve aggiungendo una pagina oltre alla home, si nota che i font cambiano, come risolvere o impostare correttamente una nuova pagina?

    grazie.

    RispondiElimina
    Risposte
    1. Ciao Vox,
      a quali font ti stai riferendo?
      In ogni caso, aggiungendo una nuova pagina, non c'è nulla di particolare da fare.
      Il font Open Sans è stato impostato nel progetto come predefinito per i contenuti della pagina e, inserendo ad esempio un ogggetto testo in una nuova pagina, il font viene correttamente impostato e visualizzato.

      Elimina
  5. sarebbe possibile estrapolare solamente la funzione dei banner di sfondo dei vari row? potreste indicare dettagliatamente cosa è necessario ? grazie...

    RispondiElimina
    Risposte
    1. Ciao Vox,

      se non riesci ad estrapolarla dal codice JavaScript, puoi riprovare a seguire le indicazioni di questo topic.

      Il codice è lo stesso con piccole variazioni nei nomi e nella numerazione delle fasce.

      Elimina
  6. Un grazie è poco, un bravi limitativo...se penso che queste cose dovrebbe darle incomedia e invece quelli davvero capaci stanno qui, sul cucuzzolo ;)
    Grazie

    RispondiElimina
    Risposte
    1. Ciao Lidia,
      grazie davvero per questa "pacca sulla spalla" che ci fa proprio piacere :)

      Elimina
  7. sal,ve come è possibile sostituire il colore giallo della barra menu sia mobile che desktop? in quale file si interviene? grazie mille

    RispondiElimina
    Risposte
    1. Ciao Vox,
      puoi personalizzare i colori nel file custom.css sostituendo i codici esadecimali con quelli che desideri. Li trovi sotto i commenti "menu" e "menu mobile".

      Ti consigliamo l'uso di strumenti tipo Firebug per analizzare con facilità il codice sorgente.

      Elimina
  8. Salve,
    Vorrei sapere se c'è un modo per aprire il vostro progetto, con una versione precedente alla 12.0.3.19. Purtroppo sono all'estero e sto usando solo i dati mobili.
    Intanto vi faccio i complimenti e vi ringrazio in anticipo-

    RispondiElimina
    Risposte
    1. Ciao e grazie del commento.
      Ci dispiace ma abbiamo iniziato a costruire questo template proprio con la versione 12.0.3.19 e, ovviamente, non abbiamo iwzip di precedenti versioni.

      Potresti tentare di smanettare il file project.iwprj cambiando i valori di BuildVersion MinorVersion e MiddleVersion
      Il successo della manovra non è garantito.

      Elimina
  9. Salve, creando una nuova pagina, i font non vengono mantenuti, sia per il menu che per i contenuti, perchè? grazie...

    RispondiElimina
    Risposte
    1. Ciao Vox,

      riguardo a questo, ti abbiamo già risposto nei commenti di questo articolo l'11 dicembre scorso.

      Elimina
  10. MAeSI, come faccio a cambiare il logo "Novembre" in alto, in alto a sinistra? Voglio mettere un logo in formato PNG

    RispondiElimina
    Risposte
    1. Ciao Tatiane,

      se rileggi i commenti qui sopra troverai la stessa tua domanda e la relativa risposta (commento del 02 dicembre di Vox Studio).

      Elimina
  11. Ciao! davvero complimenti un risultato eccezionale! Vi ringrazio moltissimo, volevo chiedervi se è possibile inserire uno slide a tutta pagina nella "sezione home", invece che un'immagine di sfondo fissa, come il template composite per capirci

    grazie ancora

    RispondiElimina
    Risposte
    1. Ciao Emanuele,
      grazie per il tuo commento.
      Sì, è possibile inserire uno slider anche in questo template, seguendo, per esempio, la stessa modalità utilizzata nel template Composite.

      Elimina
    2. dopo una giornata di smadonnamenti vari ci sono riuscito!!! grazieeeeeeeeeeeeeeeeeeeeee
      ecco il risultato: http://www.sitimiei.altervista.org/sl4

      Elimina
    3. Bene Emanuele, siamo contenti che ci sei riuscito.

      Speriamo che l'intensità degli "smadonnamenti" sia stata proporzionale alla soddisfazione provata :)

      Elimina
    4. direi proprio di si! una felicità unica! sentivo il bisogno di dirlo a tutti! grazie ancora!

      Elimina
    5. Ciao Emanuele, ho visto il progetto modificato su altervista, potresti aiutarmi dicendomi come hai fatto ad inserire lo slide delle foto nella prima sezione. Grazie

      Elimina
    6. ciao Salvatore, scusa se ti rispondo solo ora ma non avevo visto il tuo commento, comunque è una procedura troppo lunga e complessa da poter spiegare qui, dovrei anche andare a rivedere le modifiche che ho fatto perchè sinceramente ora proprio non me le ricordo più!

      Elimina
  12. Salve, sarei interessato alla domanda di Vox Studio02 dicembre, 2015, come sarebbe possibile e dove sostituire la funzione h2 "november" quindi logo in alto a sinistra, con un img?, ma servirebbe una descrizione più dettegliata di come modificare il file css, non sono molto esperto di codici grazie...

    RispondiElimina
    Risposte
    1. Ciao,
      senza vedere come hai inserito il tag img e senza sapere se vuoi mantenere l'animazione allo scroll della pagina, è un po' complicato scrivere dettagliatamente in un commento tutte le possibili alternative.
      Se vuoi, puoi comunicarci il link alla tua prova online qui o per e-mail.

      Elimina
  13. Non ho pubblicato niente, volevo solo utilizzare il template così come è sostituendo "november" con un file immagine, mantenendo l'animazione allo scroll della pagina.
    Un altro problema è che non sò come o dove modificare i file css.

    RispondiElimina
    Risposte
    1. Ciao,
      ah, allora non hai ancora provato a fare niente.
      Proviamo a procedere per gradi. In Personalizzazione del modello, Intestazione, Codice HTML sostituisci il tag h2 con il tag img, lasciando inalterato il resto del codice; ovviamente dovrai personalizzare percorso, nome e estensione:
      <img src="nomecartella/nomeimmagine.ext" alt="" / >
      Allega l'immagine al progetto con gli strumenti del programma, esporta la tua prova online (per esempio su Altervista) e comunicaci il link.

      Elimina
  14. Salve mi chiamo Luigi, complimenti vi ho scoperto da poco è siete fantastici, mi stavo cimentando con il template november, ma premesso che non sono un esperto, ho un problema che non riesco a risolvere pur avendo abilitato il sito in responsitive non si adatta ! ho la versione 12 prof ho fatto qualche modifica ma senza mai toccare il codice, potete aiutarmi a capire dove sbaglio, grazie , link http://mibu.it/index.html#home

    RispondiElimina
    Risposte
    1. Ho risolto grazie, avevo decentrato l'oggetto html in piè di pagina .

      Elimina
    2. Grazie Luigi per il commento.
      Siamo contenti che tu abbia risolto.

      Elimina
  15. Buongiorno ho un altro problema che non riesco a risolvere, sto aggiungendo un e-commerce quando vado ad inserire il prodotto nel carrello i pulsanti a fondo pagina non si vedono, o sono nascosti dal piè di pagina, in oltre anche l'immagine in alto a sinistra non si visualizza! Come posso risolvere grazie, link http://mibu.it/cart/index.html#step1

    RispondiElimina
    Risposte
    1. Ciao Luigi,
      il template è monopagina, quindi se aggiungi altre pagine/funzioni bisogna rivedere i codici inseriti.

      Per la visualizzazione parziale dei bottoni del carrello togli position: absolute; a #imFooter nel file custom.css riga 105.

      Per l'immagine, invece, poiché la pagina del carrello si trova in un'altra cartella, devi modificare il suo percorso, quello che hai inserito in intestazione, utilizzando il percorso relativo:
      src="../files/LOGOLOGO3.png"
      oppure il percorso assoluto.

      Elimina
    2. Buongiorno MAeSI,
      grazie, ora provo un pò a smanettare, vediamo cosa succede.
      Buonagiornata

      Elimina
  16. Buonasera premetto che non sono tanto ferrato in materia ma vi faccio i complimenti per il lavoro che svolgete. Ero intenzionato ad utilizzare il vostro stile del menù ovvero (sempre in primo piano con logo e ridimensionato durante lo scroll della pagina). Ho scaricato il progetto ma ovviamente comprende tutto il resto, volevo chiedervi se integrare solo il menù è una cosa semplice e se si come fare.

    RispondiElimina
    Risposte
    1. Ciao,
      grazie per il commento.

      Semplice è relativo comunque puoi iniziare a leggere questo post da dove proviene parte del codice utilizzato nel template.

      Elimina
    2. Grazie, ho visto le due sezioni di codice ma non so' dove incollarli o meglio in quale sezione andrebbero messi. Uso wsx5 v.12 prof. ho provato anche a vedere il codice sorgente di Lemonsong ma non so' cosa estrapolare e dove metterlo.

      Elimina
    3. Ciao,
      i due codici vanno inseriti in HEAD della pagina quindi, in WebSite X5, "Passo 4 - Statistiche, SEO e Codice - Esperto - Prima della chiusura del tag HEAD".
      Dovrai anche "bloccare" intestazione, sfondo intestazione e menu con position:fixed

      Se avrai ancora difficoltà ti consigliamo di postare sul forum unofficial perché darti indicazioni più dettagliate in un commento è complicato.

      Elimina
  17. ciao,
    come faccio a modificare il colore della linea arancione nel menù del template november?
    ho provato a cambiare tutte le impostazioni, ma non trovo proprio quella giusta...

    RispondiElimina
    Risposte
    1. Ciao Filippo,
      quel colore è definito nel file custom.css, riga 44:

      border-bottom: 5px solid #ff9000;

      Cambia il codice esadecimale con quello del colore da te scelto, salva il file custom.css e riallegalo al progetto.

      Elimina
    2. ancora una piccolissima domanda.
      il sito ancora non l'ho pubblicato, ci sto lavorando in locale.
      dove lo posso trovare il file custom.css? se vado in "statistiche,seo e codice", "esperto", trovo la voce "custom.css" ma non riesco a modificarlo.

      Elimina
    3. Il file si trova nella cartella css del tuo progetto, esempio: Documenti\Incomedia\WebSite X5 v12 - Evolution\november\Preview\css

      Copialo in un'altra cartella, esegui la modifica e una volta salvato, dovrai rimuovere quello già allegato al Passo 4 - Statistiche, SEO etc..., cliccare su Anteprima ed allegare quello modificato.

      Elimina
  18. Buongiorno MAeSI, vorrei sapere come fare a disattivare il preloader senza eliminarlo.

    Grazie

    RispondiElimina
    Risposte
    1. Ciao Alessandro,
      se vuoi temporaneamente "disattivarlo" puoi cambiare il codice presente il Proprietà Pagina - Esperto - Proprietà del tag BODY da così:

      class="noLoaded"

      ... a così:

      class="loaded"

      Elimina
  19. salve, e complimenti per i templates. E' possibile creare una guida su come impostare l'effetto PARALLAX su wsx512-pro? Grazie.

    RispondiElimina
    Risposte
    1. Ciao Daniele,
      grazie per il commento.
      Al momento abbiamo altro in cantiere :)

      Elimina
  20. Ciao MAeSI,
    commenti e complimenti a gogo........
    Vorrei sapere come trasformare il template da monopagina a più pagine.
    Ho provato a fare delle modifiche (ho eliminato un file js presente al passo 4 che si chamava tipo monopagina) e funziona, solo che la grafica è cambiata notevolmente.
    Mi potete spiegare come fare?

    Grazie.

    RispondiElimina
    Risposte
    1. Ciao Eros,
      grazie per il commento.
      Hai fatto bene a rimuovere il file. In aggiunta devi anche cancellare, nel file custom.js, le righe di codice relative alla gestione del menu monopagina che trovi a partire dalla riga 17:

      //singlePagNav
      $('#imMnMn li').removeClass('imMnMnCurrent');
      $("#imMnMn").singlePageNav({
      offset: $('#imMnMn').outerHeight(),
      filter: ':not(.external)',
      threshold: 70
      });

      Per la procedura da seguire per modificare il file custom.js, puoi leggere QUI
      Ricordati di spuntare la casella "Collega il file" quando riallegherai al progetto il file modificato.

      Elimina
  21. Tutto a posto,

    siete fortissimi ma oltre a questo siete super gentilissimi e disponibilissimi e non lo fate con fini di lucro cosa molto rara da trovare di questi tempi.

    Da oggi sarete per sempre a tempo indeterminato nella mia agenda web del cuore.

    Grazie.

    RispondiElimina
    Risposte
    1. Grazie a te Eros, il tuo commento ci fa proprio piacere :)

      Elimina
  22. Ciao MAeSI,

    sto utilizzando il vostro bel template per un sito ancora in produzione.

    Vorrei cortesemente chiedervi ancora alcuni preziosi suggerimenti:

    1) Le voci del sottomenu risultano invisibili o quasi in quanto lo sfondo è trasparente (sia nella versione normale che in quella resonsive) vorrei quindi sapere se è possibile scurire un pò lo sfondo e come.

    2) Il logo testuale nella versione responsive risulta un pò troppo grande (il mio è formato da 9 caratteri) vorrei quindi sapere se si può ridurre un pò e come (tipo quello che si vede quando si scorre la pagina nella versione normale e il menu si riduce)

    3) seguendo le vostre indicazioni ho trasformato il template in multipagina e tutto va bene.
    L'unica cosa che vorrei segnalare (anche se trascurabile) è che su alcune pagine ho tolto il preloader e nella prima riga in alto ho lasciato la stessa immagine di sfondo presente anche nella vostra demo, però nelle seconde righe (alle quali ho ridotto i margini sup. e inf.) si vede sulla destra una colonna larga un pixel lunga quanto l'immagine di sfondo che vorrei eliminare.
    Forse sarebbe meglio farvi vedere un esempio ma se mai lo farò quando il sito sarà online.

    Grazie ancora.

    RispondiElimina
    Risposte
    1. ps. vi posto un link con l'immagine di anteprima:

      la colonna larga un pixel si trova destra segnalata dalla freccia rossa ed è lunga come l'immagine di sfondo infatti scorrendo la pagina del sito ad un certo punto scompare

      questo è il link:

      http://www.vacanzecroaziaonline.com/colonna-dx.jpg

      Elimina
    2. Ciao Eros,
      ti rispondiamo per punti:

      1) se l'impostazione dello stile del menu a comparsa, settabile da programma, non ti soddisfa, puoi scaricarti QUESTO adattamento del template Tamarillo per vedere come abbiamo fatto.

      2) il font-size del logo (30/36px) è definito 3 volte nel file custom.css, puoi cambiarlo da lì. Per modificarlo solo nella visualizzazione responsive dovrai cambiare solo il valore con la keyword !important

      3) per il pixel leggi QUESTA risposta data a Vincenzo.

      Elimina
    3. Grazie ancora, effettivamente la 1°domanda era troppo banale (non ho pensato di modificare le impostazioni del menu direttamente da website, ancora devo prenderci confidenza).

      Per quanto riguarda la 2° vorrei capire una cosa: interventi del genere ai css o altri file si possono fare solo una volta esportati i file? E quindi se riapro il progetto originario devo nuovamente modificare il file? Oppure posso intervenire a priori in modo che il progetto abbia di base quel file modificato e adatto alle mie esigenze?

      Grazie.

      Elimina
    4. Ciao, per quanto riguarda la procedura per modificare i file collegati al progetto, ti abbiamo già risposto il 28/07:

      "Per la procedura da seguire per modificare il file custom.js, puoi leggere QUI
      Ricordati di spuntare la casella "Collega il file" quando riallegherai al progetto il file modificato.
      "

      Elimina
    5. E' vero scusate ma pensavo riguardasse solo quel file e quello specifico problema.

      Sempre sopra ho letto che è possibile sostituire il logo testuale con un'immagine modificando le regole dell'h2 nel css.

      Io purtroppo nei css riesco a modificare solo i colori...

      Se magari trovate un pò di tempo e non chiedo troppo potreste postare un css già modificato ?(basterebbe con un'immagine di dimensioni standard che possa essere adattato da chiunque)

      Ma non siete obbligati!!!

      Grazie ancora.

      Elimina
    6. Caro Eros, è una cosa semplice che può fare chiunque abbia un minimo di infarinatura sui linguaggi web di base.
      Come abbiamo già scritto, non devi modificare solo i CSS ma cambiare anche il codice HTML.

      Elimina
    7. Ciao, ho provato ma non riesco.

      Se qualcuno mi da qualche indicazione sarà molto apprezzata.

      Grazie ancora.


      p.s. ho trovato su un sito che vende template per website x5, uno molto simile al vostro onetel

      Elimina
  23. Vi volevo avvisare che purtroppo con la v.13 di wsx5 il loader di caricamento di questo progetto crea dei problemi di visualizzazione (schermo bianco). Saluti, e grazie per quello che fate

    RispondiElimina
    Risposte
    1. Ciao Enrico, prego.
      Nel codice è presente il metodo .load, metodo che è stato deprecato nella versione della libreria jQuery utilizzata da WebSite X5 13.

      Devi sostituire questa riga di codice:
      $(window).load(function() {

      ... con questa:
      $(window).on('load', function() {

      Elimina
    2. Perfetto come sempre, funziona grazie.

      Elimina
  24. Prima di tutto ringrazio per il prezioso lavoro che fate, è bellissimo pensare che persone cosi brave come voi, si mettono a disposizione per offrire contenuti innovativi a tutti noi....grandissimi!! Vi chiedo una cosa che sicuramente sarà banale ma io sono proprio inesperto... per modificare il colore della parola NOVEMBER (quella che compare in alto all'apertura del sito) che adesso è bianca e arancione, come si fà?
    grazie mille in anticipo e ancora grazie di tutto.

    RispondiElimina
    Risposte
    1. Ciao Riccardo, grazie a te per il tuo commento.
      Per cambiare i colori della scritta "NOVEMBER" devi modificare i valori relativi nel file custom.css
      Nel file, cerca il commento /* logo */ e troverai le due regole CSS interessate.

      Elimina