21 novembre 2016

Layout a strisce orizzontali con WebSite X5 13: tips & tricks

Creare un sito con un layout a strisce orizzontali, con la possibilità di aggiungere anche un effetto parallasse alle immagini di sfondo full width: queste sono due delle novità presenti nell'ultima release del software di casa Incomedia, WebSite X5 13.
Oggi ci siamo divertiti ad esplorare le potenzialità di queste nuove funzioni mettendoci, come sempre, lo zampino smile

La struttura della pagina della versione 13 è diversa rispetto a quella della versione 12, quindi, per ottenere, ad esempio, la mappa di Google a tutto schermo, esempio fatto per la 12 in questo post,  non è più necessario intervenire con codice JavaScript spostando gli elementi al di fuori del div con id imPage, ma basta un semplice CSS che imposta al 100% la larghezza dei div contenuti nella riga.
In questa DEMO (risoluzione desktop 960px) abbiamo inserito a tutto schermo, oltre alla mappa di Google, anche un link impostato su un'immagine con effetto parallasse.


Oggetto Google Maps Full Width


Inseriamo l'Oggetto Google Maps in Creazione della Pagina.


In Proprietà Pagina Esperto Prima della chiusura del tag HEAD incolliamo questo CSS, sostituendo al numero 3, il numero della riga in cui abbiamo inserito l'Oggetto Google Maps:
<style>
#imPageRow_3 div, #imPageRow_3 iframe {
    padding: 0;
    width: 100% !important;
}
/* spazio laterale sotto i 480px */
@media (max-width: 480px){
    #imPageRow_3 {
        width: 92% !important;
    }
}
</style>

Nella nostra demo abbiamo inserito un oggetto per ogni riga ma se abbiamo unito, per esempio, più righe per impostare lo stesso stile grafico, il numero da personalizzare si dovrà calcolare dalla finestra "Stile delle Righe". Nella situazione seguente, il numero della riga dell'Oggetto Google Maps sarà il 2:

Un calcolo analogo va fatto anche se inseriamo un oggetto che si estende in verticale su più righe.
Per layout più articolati, consigliamo l'uso degli "strumenti per sviluppatori" presenti ormai in ogni browser, per individuare con facilità il numero della riga da personalizzare.

Nel codice è presente anche una media query che lascia uno spazio a destra della mappa per facilitare lo scorrimento della pagina a risoluzioni uguali o inferiori a 480px.

Link immagine con effetto parallasse


Associare un link ad un'immagine utilizzata come sfondo in Stile delle righe, impostata a tutto schermo, è relativamente semplice: basta inserire in Creazione Pagina un Oggetto Immagine contenente un'immagine trasparente ed associare ad essa un collegamento. Ma in questo modo il link non sarà attivo per tutta la larghezza della finestra del browser, ma solo nella parte che corrisponde alla larghezza del contenuto della pagina. Per estendere il link a tutto schermo possiamo quindi usare un CSS analogo a quello visto prima, da inserire sempre in Proprietà Pagina Esperto Prima della chiusura del tag HEAD, sostituendo al numero 1, il numero della riga in cui abbiamo inserito l'Oggetto Immagine:

<style>
#imPageRow_1 div {
    padding: 0;
    width: 100% !important;
}
#imPageRow_1 img {
    max-width:none;
    height:300px;/* altezza dell'immagine trasparente */
}
</style>

E' importante personalizzare il valore di height che deve corrispondere all'altezza dell'immagine trasparente inserita nell'Oggetto Immagine.

Le possibilità non finiscono qui: nell'ultima riga della nostra demo abbiamo allargato a tutto schermo un Oggetto Codice HTML... e qui il limite è solo la fantasia.



18 commenti:

  1. Salve, ho implementato la vostra soluzione ma volevo dirvi che la numerazione delle righe non è quella presente in Creazione pagina, ma quella presente in Stile righe, contanto perciò il numero di stili presenti (se abbiamo 3 righe che hanno lo stesso stile riga, è la riga 1 per tutti i contenuti presenti nelle 3 righe).
    Nel vostro esempio infatti tutte le righe hanno uno stile riga proprio quindi la numerazione su Creazione pagina e Stile righe corrisponde.
    ps. la numerazione comunque è possibile visualizzarla anche esaminando il codice html della pagina
    Spero di esservi stato d'aiuto

    RispondiElimina
    Risposte
    1. Ciao Enrico,
      grazie per la precisazione.
      Abbiamo aggiunto all'articolo due righe e un'immagine per layout differenti da quello usato nella nostra demo.

      Elimina
  2. Come sempre molto interessante! Complimenti. Vado ad "esplorare" i possibili utilizzi dell'oggetto codice HTML allargato a tutto schermo. Mi vengono in mente tante cose carine! Grazie come sempre!

    RispondiElimina
    Risposte
    1. Ciao Giuseppe,
      grazie a te per tutti i tuoi commenti.

      Elimina
  3. Ciao!
    E' possibile lasciare lo spazio laterale sotto i 480px sia a dx che a sx?
    Grazie mille!

    RispondiElimina
    Risposte
    1. Ciao Vincenzo,
      certo che sì.
      Puoi sostituire la regola presente nella media query con questa:

      #imPageRow_3 iframe {
      width: 86% !important;
      }


      Ovviamente puoi personalizzare il valore in %

      Elimina
  4. Ho fatto delle prove con l'oggetto codice HTML allargato a tutto schermo con il vostro codice: il risultato è questa slide full width realizzata con la versione Free di Wowslider ed inserita in Website X5 Pro 13 in meno di 1 minuto di orologio!
    http://www.bozzasito14.altervista.org/slidefullwidth/
    Ciao!

    RispondiElimina
    Risposte
    1. Ciao Giuseppe,
      grazie per la condivisione.

      Solo una cosa: nell'Oggetto Codice HTML hai inserito tag head e body che vanno eliminati e il richiamo al file CSS che va in head.

      Elimina
  5. scusate ma il codice vale solo per la mappa oppure per qualsiasi oggetto tipo social?

    RispondiElimina
    Risposte
    1. Ciao,
      no, non vale solo per la mappa, però in alcuni tipi di oggetti potrebbe essere necessario aggiungere altre regole CSS.

      Elimina
  6. Mi sembra che con gli ultimi aggiornamenti di WSX5 la funzionalità mappa full size sia scomparsa

    RispondiElimina
    Risposte
    1. Ciao,
      se ti stai riferendo al CSS presente in questo articolo, funziona anche con l'ultima versione (13.1.2.10)... abbiamo appena provato.

      Elimina



    2. ANIELLO ANTONIO Tuccillo03 maggio, 2017

      effettivamente anche io credo la stessa cosa di Enrico
      non riesco più

      Elimina
    3. Ciao, abbiamo trovato la causa: nell'ultimo aggiornamento dell'Oggetto Google Maps è stata rimossa la larghezza 100% dell'iframe.
      Abbiamo aggiornato il selettore del CSS presente nell'articolo.
      Grazie per la segnalazione.

      Elimina
  7. effettivamente anche io credo la stessa cosa di Enrico
    non riesco più

    RispondiElimina
  8. Infatti se dai un'occhiata al codice che riguarda "rowobject.." delle versioni iniziali di WSX5 13 è diverso da quello delle ultime. Qualcosa è cambiato

    RispondiElimina