31 gennaio 2016

Layout a strisce orizzontali per WebSite X5 12

Esistono diversi metodi per creare delle strisce orizzontali a tutto schermo nel layout di un sito fatto con WebSite X5 12, ma tutti richiedono l'inserimento di codice personalizzato.

Nei template Timeline e Composite, per la versione 11, e nel template November, per la versione 12,  abbiamo rielaborato uno script - jq_strip.js - che avevamo presentato e illustrato in questo topic nel forum Unofficial dedicato a WebSite X5.

Inserire ad esempio una mappa di Google o una slide (tipo FlexSlider) a tutto schermo sotto l'intestazione o prima del pié di pagina è semplice con WebSite X5: basta inserire il relativo codice Dopo l'apertura del tag BODY e/o Prima della chiusura del tag BODY. Il problema si pone se dobbiamo inserire un oggetto a tutto schermo in mezzo agli altri oggetti della pagina: potremmo per esempio utilizzare un div in position absolute regolandone la posizione verticale con il relativo valore di top. Questo metodo però è poco pratico poiché dovremmo regolare in continuazione la coordinata verticale in funzione dell'altezza dei contenuti inseriti e controllarla alle varie risoluzioni.
Ecco perché abbiamo pensato di rimettere mano allo script jq_strip.js in modo da semplificare questa operazione.
Qui la nostra demo (versione 12.0.4.21) con una mappa di Google a tutto schermo, ottenuta inserendo il codice iframe fornito da Google, a cui abbiamo modificato il valore di width impostandolo a 100%:

demo layout strisce website x5
DEMO

Questi i passi da seguire per utilizzare lo script in un progetto creato con WebSite X5 12:

1. Inseriamo un Oggetto Codice HTML in Creazione della Pagina prendendo nota del numero della riga e scriviamo in esso il codice HTML che vogliamo visualizzare a schermo intero.

creazione della pagina website x5

2. Circondiamo tutto il codice HTML appena inserito con un div a cui deve essere assegnato questo id rowObject_n dove n è il numero della riga in cui è stato inserito l'oggetto. Esempio:
<div id="rowObject_3">

<!-- codice HTML -->

</div>

3. Scarichiamo il file jq_strip12.js ed alleghiamolo al progetto con gli strumenti forniti dal programma. Il file va richiamato in head di tutte le pagine interessate.

Lo script può essere utilizzato anche per inserire, attraverso i CSS, uno sfondo a tutta pagina alle righe che contengono gli oggetti di WebSite X5, come spiegato nel post dell'Unofficial. Ad esempio nella nostra demo abbiamo inserito un colore di sfondo alla riga 2 utilizzando il selettore .row2:
.row2{
    background-color:#FA9E25;
}
Invece nella riga 5 è stata inserita un'immagine di sfondo:
.row5{
    background:url('img/bg-2.jpg') no-repeat center center;
    background-size:cover;
}

Aggiungiamo inoltre che nella demo è stata inserita una media query per lasciare uno spazio a destra della mappa per facilitare lo scorrimento della pagina a partire dalla risoluzione di 480px.


46 commenti:

  1. Scusate, ma non capisco cosa si intende per
    . Circondiamo tutto il codice HTML appena inserito con un div a cui deve essere assegnato questo id rowObject_n

    RispondiElimina
    Risposte
    1. Ciao Edo,
      al punto 2 c'è un esempio del codice da inserire. Oppure puoi visualizzare il sorgente della demo.
      Se ancora non riesci puoi comunicarci il link della tua prova via mail e spiegarci cosa vuoi ottenere.

      Elimina
  2. Perchè non mette online il file iwzip, come è stato fatto per la tabella catalogo prodotti?
    Grazie

    RispondiElimina
    Risposte
    1. Ciao Salvatore,
      per questo tipo di implementazioni inserire un file di progetto .iwzip ci sembra esagerato.
      Di fatto non aggiungerebbe niente a quanto scritto in questo articolo e nel topic del forum Unofficial.
      Se incontri difficoltà puoi comunicarci il link della tua prova via mail e spiegarci cosa vuoi ottenere.

      Elimina
  3. Scusate se rompo, ma io volevo applicare la vostra soluzione ma non sono riuscito. Il link del mio progetto provvisorio è:
    http://www.provaedo123.altervista.org/index.html
    Io vorrei avere un sito con fasce orizzontali a pieno schermo e anche responsive, di cui la prima come slider. Mi potete aiutare per favore? Grazie per l'eventuale disponibilità.
    edo

    RispondiElimina
    Risposte
    1. Ciao Edo,
      ma non hai inserito ancora niente!
      Incomincia ad eseguire almeno quanto scritto al punto 3 dell'articolo.
      Segui la guida:
      http://help.websitex5.com/it/v12/pro/imp_seo.htm -> I comandi della Sezione Esperto -> File allegati al codice

      Elimina
  4. Scusa, adesso ho inserito il file

    RispondiElimina
    Risposte
    1. Ok, ora puoi provare a mettere i colori di sfondo che vuoi alle varie righe. Per esempio prova ad inserire questo CSS insieme agli altri che hai già in head, così vedi come funziona:
      .row1{
      background-color:#FA9E25;
      }
      Poi, per la slider, nell'oggetto HTML che hai inserito alla riga 2, dentro il div con id rowObject_2, dove ora hai il commento "<! -- codice HTML -- >" devi inserire il codice di una slide responsive a tua scelta (esempio flexslider), integrando anche i file ad essa correlati.

      Elimina
  5. Scusa, ma il CSS in che pagina lo devo inserire? e in Head prima dell'apertura, o dopo la chiusura?
    Grazie

    RispondiElimina
    Risposte
    1. Beh, visto che hai un sito monopagina c'è solo una pagina in cui inserirlo :)
      Meglio inserirlo "Prima della chiusura del tag HEAD" racchiuso tra i tag <style> </style>

      Elimina
  6. Sono una frana! Non capisco un tubo e ti sto rubando del tempo.
    Adesso ho inserito il codice dello Slider, ma non succede nulla. Ma le immagini le devo salvare e mettere in Images e chiamarle slide1.jpg ecc. o cosa
    Grazie mille

    RispondiElimina
    Risposte
    1. Ciao Edo,
      il codice della flexslider lo devi inserire al posto del commento, come abbiamo più volte scritto.
      La flexslider finché non la integrerai in modo corretto non ti funzionerà.
      Ti consigliamo di scaricare il template Composite per vedere/capire come è stata integrata in un progetto di WebSite X5.

      Elimina
  7. Scusate se rompo ancora, ma siccome sono un testardo e mi piace apprendere, volevo capire come fare a inserire un immagine a tutta larghezza. Io ho inserito questo codice ma non funziona:
    .row1{
    background-img:SplitShire-295.jpg;
    }

    .row3{
    background-color:#FF0000;
    }

    Dove sbaglio?
    Grazie per l'aiuto
    edo

    RispondiElimina
    Risposte
    1. Ciao Edo,
      più che apprendere ti piace inventare... la prima regola non esiste :)
      Nell'articolo c'è un esempio (in forma contratta) per assegnare un'immagine di sfondo.
      Se hai voglia di apprendere, potresti iniziare da qui:
      www.html.it
      www.mrwebmaster.it
      www.w3schools.com

      Elimina
  8. Caro Maesi
    Io non parlo molto italiano
    Prima di tutto la mia più profonda gratitudine per tutti i contributi che danno alla comunità di WebSite X5 . Io per primo ho visto molti dei vostri tutorial e ho imparato molto da voi
    questo è il mio sito web www.biomagnetismoecuador.com che è stato sviluppato seguendo i tuoi insegnamenti .
    grazie mille

    RispondiElimina
    Risposte
    1. Ciao,
      grazie a te per il commento e complimenti per il sito.

      Elimina
  9. Ciao, ti risulta che lo script crei problemi con il menu delle pagine interne, facendo spostare il contenuto della pagina sotto il menu laterale?
    Sandro

    RispondiElimina
    Risposte
    1. Ciao supertest,

      non puoi utilizzare questo script in un progetto con un menu verticale, sia esso menu principale o menu di pagina.

      Elimina
    2. ok, grazie del chiarimento. :)

      Elimina
  10. Ciao, perchè tramite il jq_strip12.js gli oggetti/immagini non si adatta perfettamente ma lascia sempre un pixel di spazio ai lati del display? Grazie!

    RispondiElimina
    Risposte
    1. Ciao Vincenzo,

      ne avevamo già parlato nel topic dell'unofficial in questo post In alcune situazioni ci potrebbe essere un pixel "ballerino", noi abbiamo preferito arrotondare per difetto ma puoi sempre provare a sostituire, nello script, il metodo Math.floor con Math.ceil

      Elimina
    2. Ciao e grazie mille!
      Si in effetti con Math.ceil mi compare la barra di scroll. :(
      Saluti.

      Elimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Ciao Alberto,
      se ci indichi la pagina esatta della tua prova, ti potremo aiutare.

      Ti facciamo notare che, attualmente, hai inserito nel footer un iframe con un errore nel tag di chiusura che ti invalida il resto del codice della pagina.

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Ciao Alberto,
      queste sono le cose da sistemare:
      1. non hai richiamato in head il file jq_strip12.js: puoi farlo fare direttamente al programma spuntando la casella "Collega file" nella finestra in cui hai allegato il file al progetto (come scritto nella guida del programma);
      2. hai inserito le regole CSS in HEAD senza racchiuderle tra i tag <style> e </style> :
      <style>
      .row5{
      background:url('img/bg-2.jpg') no-repeat center center;
      background-size:cover;
      }
      </style>
      Hai inserito anche una regola CSS nel body: spostala in head, sempre tra i tag <style>.
      3. L'immagine che hai usato per la riga 5 non è presente sul server. Devi allegarla al progetto ed inserire come cartella di destinazione la cartella img.

      Non mettere il progetto è una scelta, non una svista :)
      Ti consigliamo di leggere con attenzione anche il topic sull'Unofficial linkato all'inizio di questo articolo.

      Elimina
    4. Questo commento è stato eliminato dall'autore.

      Elimina
    5. Questo commento è stato eliminato dall'autore.

      Elimina
    6. Ciao Alberto,
      rileggi con attenzione la nostra risposta e troverai gli errori che hai commesso.

      Ti consigliamo di acquisire un po' di dimestichezza con le basi della struttura di una pagina web.
      Puoi farti una infarinatura cominciando da siti come www.html.it, www.mrwebmaster.it e www.web-link.it

      Elimina
    7. Questo commento è stato eliminato dall'autore.

      Elimina
    8. Caro Alberto,
      non capiamo perché hai cancellato tutti i tuoi commenti.
      Potevi contattarci via mail se non volevi rendere pubbliche le tue richieste.
      Cancellando i tuoi commenti hai reso completamente inutili le nostre risposte che potevano essere d'aiuto ad altri con lo stesso tuo "problema".

      Elimina
  12. Innanzitutto grazie delle vostre guide. Volevo sapere se è possibile inserire un effetto Parallax all'immagine che si mette come sfondo alla riga?
    Grazie

    RispondiElimina
    Risposte
    1. Ciao Enrico,
      tutto è possibile ma, visto l'imminente uscita della versione 13 che prevede la possibilità di inserire questo effetto, conviene aspettare.

      Elimina
  13. Eh che speravo di riuscire ad evitare l'acquisto solo per quell'effetto.

    RispondiElimina
  14. Ciao ragazzi. Complimenti per quello che fate. Ho scaricato il template tamarillo ed ho effettuato alcune modifiche. Avrei bisogno di una spiegazione. Il bottone in basso a destra del flexslider che ho modificato nella dicitura, come posso fare per collegarlo ad una pagina interna del sito?
    Grazie come sempre della Vs, infinita pazienza.
    Un cordiale saluto
    Francesco

    RispondiElimina
    Risposte
    1. Caro Francesco,
      ti abbiamo già risposto QUI

      Ti chiediamo cortesemente di porre attenzione all'articolo che commenti: anche in questo caso la tua domanda non c'entra niente con l'argomento di questo articolo.
      Se succederà di nuovo, onde evitare confusioni, saremo costretti a cancellare il commento fuori luogo, grazie.

      Elimina
    2. Vi chiedo scusa, non avendo visto risposta ho pensato che forse dovevo postare lì il commento. Ho bisogno di consigli e suggerimenti, pertanto non accadrà più. Grazie e buon lavoro a tutti

      Elimina
  15. Salve, volevo sapere se potevate pubblicare una soluzione per mantenere la mappa fullsize (come su questo articolo) anche con la versione 13 di WSX5 v.13. Grazie mille per il vostro impegno

    RispondiElimina
    Risposte
    1. Ciao Enrico,
      appena possibile scriveremo qualcosa.

      Elimina
    2. Ciao Enrico,
      abbiamo appena pubblicato questo articolo dove troverai quello che cerchi.

      Elimina
  16. Fantastico, proprio quello che cercavo. Grazie mille

    RispondiElimina
  17. Hello. Seems to be great but ... the Google translate do not always work fine. Can we have this great tutorial in english please? mariustipa@gmail.com Thank you!

    RispondiElimina
    Risposte
    1. Hi, we write in italian language only.
      We're sorry.

      Elimina