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 |
Le risorse utilizzate nel template sono:
- Google Font "Open Sans"
- Google Font "Oswald"
- CSS3 Preloader
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
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.
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.
RispondiEliminaCiao Francesco,
Eliminacerto è 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.
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.
EliminaGrazie
Ciao Igor,
Eliminanoi 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).
Salve, si se mi mandate la vostra email provvederò a linkarvi la prova online.
EliminaCiao, trovi la nostra mail in alto a destra.
EliminaPerfetto , Ho inviato l'email. Attendo vostre notizie.
EliminaSalve, come sarebbe possibile e dove sostituire la funzione h2 "november" quindi logo in alto a sinistra, con un img? grazie...
RispondiEliminaCiao Vox,
Eliminase 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.
È possibile inserire sulle varie pagine uno sfondo personalizzato solo per le pagine del sito mobile?
RispondiEliminaCiao Carlo,
Eliminase 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.
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!
EliminaCiao Carlo,
Eliminase 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.
Salve aggiungendo una pagina oltre alla home, si nota che i font cambiano, come risolvere o impostare correttamente una nuova pagina?
RispondiEliminagrazie.
Ciao Vox,
Eliminaa 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.
sarebbe possibile estrapolare solamente la funzione dei banner di sfondo dei vari row? potreste indicare dettagliatamente cosa è necessario ? grazie...
RispondiEliminaCiao Vox,
Eliminase 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.
Un grazie è poco, un bravi limitativo...se penso che queste cose dovrebbe darle incomedia e invece quelli davvero capaci stanno qui, sul cucuzzolo ;)
RispondiEliminaGrazie
Ciao Lidia,
Eliminagrazie davvero per questa "pacca sulla spalla" che ci fa proprio piacere :)
sal,ve come è possibile sostituire il colore giallo della barra menu sia mobile che desktop? in quale file si interviene? grazie mille
RispondiEliminaCiao Vox,
Eliminapuoi 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.
Salve,
RispondiEliminaVorrei 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-
Ciao e grazie del commento.
EliminaCi 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.
Salve, creando una nuova pagina, i font non vengono mantenuti, sia per il menu che per i contenuti, perchè? grazie...
RispondiEliminaCiao Vox,
Eliminariguardo a questo, ti abbiamo già risposto nei commenti di questo articolo l'11 dicembre scorso.
MAeSI, come faccio a cambiare il logo "Novembre" in alto, in alto a sinistra? Voglio mettere un logo in formato PNG
RispondiEliminaCiao Tatiane,
Eliminase rileggi i commenti qui sopra troverai la stessa tua domanda e la relativa risposta (commento del 02 dicembre di Vox Studio).
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
RispondiEliminagrazie ancora
Ciao Emanuele,
Eliminagrazie per il tuo commento.
Sì, è possibile inserire uno slider anche in questo template, seguendo, per esempio, la stessa modalità utilizzata nel template Composite.
dopo una giornata di smadonnamenti vari ci sono riuscito!!! grazieeeeeeeeeeeeeeeeeeeeee
Eliminaecco il risultato: http://www.sitimiei.altervista.org/sl4
Bene Emanuele, siamo contenti che ci sei riuscito.
EliminaSperiamo che l'intensità degli "smadonnamenti" sia stata proporzionale alla soddisfazione provata :)
direi proprio di si! una felicità unica! sentivo il bisogno di dirlo a tutti! grazie ancora!
EliminaCiao Emanuele, ho visto il progetto modificato su altervista, potresti aiutarmi dicendomi come hai fatto ad inserire lo slide delle foto nella prima sezione. Grazie
Eliminaciao 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ù!
EliminaSalve, 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...
RispondiEliminaCiao,
Eliminasenza 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.
Non ho pubblicato niente, volevo solo utilizzare il template così come è sostituendo "november" con un file immagine, mantenendo l'animazione allo scroll della pagina.
RispondiEliminaUn altro problema è che non sò come o dove modificare i file css.
Ciao,
Eliminaah, 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.
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
RispondiEliminaHo risolto grazie, avevo decentrato l'oggetto html in piè di pagina .
EliminaGrazie Luigi per il commento.
EliminaSiamo contenti che tu abbia risolto.
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
RispondiEliminaCiao Luigi,
Eliminail 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.
Buongiorno MAeSI,
Eliminagrazie, ora provo un pò a smanettare, vediamo cosa succede.
Buonagiornata
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.
RispondiEliminaCiao,
Eliminagrazie per il commento.
Semplice è relativo comunque puoi iniziare a leggere questo post da dove proviene parte del codice utilizzato nel template.
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.
EliminaCiao,
Eliminai 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.
ciao,
RispondiEliminacome 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...
Ciao Filippo,
Eliminaquel 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.
ancora una piccolissima domanda.
Eliminail 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.
Il file si trova nella cartella css del tuo progetto, esempio: Documenti\Incomedia\WebSite X5 v12 - Evolution\november\Preview\css
EliminaCopialo 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.
Buongiorno MAeSI, vorrei sapere come fare a disattivare il preloader senza eliminarlo.
RispondiEliminaGrazie
Ciao Alessandro,
Eliminase vuoi temporaneamente "disattivarlo" puoi cambiare il codice presente il Proprietà Pagina - Esperto - Proprietà del tag BODY da così:
class="noLoaded"
... a così:
class="loaded"
salve, e complimenti per i templates. E' possibile creare una guida su come impostare l'effetto PARALLAX su wsx512-pro? Grazie.
RispondiEliminaCiao Daniele,
Eliminagrazie per il commento.
Al momento abbiamo altro in cantiere :)
Ciao MAeSI,
RispondiEliminacommenti 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.
Ciao Eros,
Eliminagrazie 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.
Tutto a posto,
RispondiEliminasiete 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.
Grazie a te Eros, il tuo commento ci fa proprio piacere :)
EliminaCiao MAeSI,
RispondiEliminasto 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.
ps. vi posto un link con l'immagine di anteprima:
Eliminala 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
Ciao Eros,
Eliminati 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.
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).
EliminaPer 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.
Ciao, per quanto riguarda la procedura per modificare i file collegati al progetto, ti abbiamo già risposto il 28/07:
Elimina"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."
E' vero scusate ma pensavo riguardasse solo quel file e quello specifico problema.
EliminaSempre 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.
Caro Eros, è una cosa semplice che può fare chiunque abbia un minimo di infarinatura sui linguaggi web di base.
EliminaCome abbiamo già scritto, non devi modificare solo i CSS ma cambiare anche il codice HTML.
Ciao, ho provato ma non riesco.
EliminaSe 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
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
RispondiEliminaCiao Enrico, prego.
EliminaNel 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() {
Perfetto come sempre, funziona grazie.
EliminaPrima 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à?
RispondiEliminagrazie mille in anticipo e ancora grazie di tutto.
Ciao Riccardo, grazie a te per il tuo commento.
EliminaPer 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.