22 agosto 2016

Effetto Vertical Sliding con gli oggetti di WebSite X5 12

Quando abbiamo adattato per WebSite X5 il template Rectangle ci siamo imbattuti in un bell'effetto vertical sliding di apertura delle varie sezioni della pagina, effetto che abbiamo riscritto a modo nostro anche per il nostro attuale sito su Altervista.

In questo articolo cercheremo di spiegare come ottenere lo stesso risultato di questa nostra DEMO.

Partiamo esaminando la struttura della pagina che prevede delle sezioni visibili all'apertura (nell'immagine sottostante circondate da un bordo rosso), altre nascoste (circondate da un bordo blu) che si visualizzano solo se richiamate al click, nascondendo a loro volta le sezioni in rosso con l'effetto vertical sliding, ed eventuali elementi sempre visibili (circondati da un bordo verde):

  • Sezioni visibili all'apertura della pagina (in rosso)
    Ogni sezione è costituita, nel nostro esempio, da un Oggetto Testo e contiene un link che apre la relativa sezione nascosta. Nell'Oggetto Testo corrispondente alla prima sezione abilitare il codice HTML ed inserire questo codice:
    <a class="MS_ButtonLink" href="#sezione1">APRI</a>
    
    Nell'Oggetto Testo corrispondente alla seconda sezione il codice varierà in questo modo:
    <a class="MS_ButtonLink" href="#sezione2">APRI</a>
    
    E così via per le altre due sezioni.
  • Sezioni nascoste (in blu)
    Inserire negli Oggetti Testo che verranno visualizzati solo al click, il codice per il pulsante di chiusura, sempre abilitando il codice HTML:
    <span class="MS_Close">CHIUDI</span>

Al posto degli Oggetti Testo si possono utilizzare anche altri tipi di oggetti: in questo caso il codice per i pulsanti può essere inserito nel Titolo o nella Descrizione della Cella.

Ora ci spostiamo in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD ed inseriamo questo semplice CSS, completamente personalizzabile, per la formattazione dei pulsanti di apertura e di chiusura:
<style>
.MS_ButtonLink, .MS_Close {
 background-color: #ff6600;
 color: #fff;
 text-decoration: none;
 padding: 4px 8px;
 cursor: pointer;
}
</style>
Sempre nella stessa sezione, a seguire, inseriamo questo script che permette di gestire la visibilità e l'animazione degli oggetti:
<script>
/* =========================================================================================
   Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
   ========================================================================================= */
$(document).ready(function() {
  //classi ai div
  $("#imGroup_1 > div").each(function(index) {
    if ($(this).hasClass("imHGroup") || $(this).hasClass("imEGroup")) $(this).addClass("row" + (index + 1));
    else {
      $(this).wrap("<div class='row" + (index + 1) + "' style='width: 100%;'></div>");
    }
  })

  //PARTE DA PERSONALIZZARE
  //sezioni visibili all'apertura della pagina
  $(".row1, .row2").wrapAll("<div class='MScontent'></div>");
  //sezioni nascoste
  $(".row3").addClass("sezione1");
  $(".row4").addClass("sezione2");
  $(".row5").addClass("sezione3");
  $(".row6").addClass("sezione4");

  $(".MScontent > div").css("float", "left");
  $("div[class*='sezione']").hide();

  //animazione
  $(".MS_ButtonLink").click(function() {
    var id = $(this).attr("href").slice(1);
    $("html, body").animate({
      scrollTop: 100
    }, 500);
    $("div.MScontent").slideUp("slow");
    $("." + id).slideDown("slow");
    return false;
  });
  $(".MS_Close").click(function() {
    $("div[class*='sezione']").slideUp("slow");
    $("div.MScontent").slideDown("slow");
  });
});
</script>

A questo punto abbiamo riprodotto fedelmente la nostra demo. Per poter capire il funzionamento e fare eventuali modifiche, entriamo nel merito del codice JavaScript utilizzato.
La prima parte dello script, con commento //classi ai div si occupa di assegnare, ai div che il programma genera per circondare gli oggetti che inseriamo sulle righe nella griglia della pagina, una classe row con un numero crescente come suffisso, numero che corrisponde ai numeri delle righe presenti in Creazione della Pagina.


Se però nella griglia fossero presenti oggetti che occupano più di una riga, la numerazione delle classi row cambierebbe in questo modo:


Questa parte del codice è utilizzata anche nello script per ottenere le strisce orizzontali descritto in questo articolo quindi, chi ne facesse già uso, deve ometterla.

La parte centrale del codice, con commento  //PARTE DA PERSONALIZZARE deve essere modificata in funzione del numero e della posizione degli oggetti a cui applicare l'effetto.
Nella parte di codice che riguarda le sezioni che devono risultare visibili all'apertura della pagina, indicare le classi row in cui sono collocate:
  $(".row1, .row2").wrapAll("<div class='MScontent'></div>");

Identifichiamo quindi le classi row in cui sono collocati gli oggetti nascosti ed associamoli alla corrispondente sezione visibile indicando il valore dell'attributo href (privo del cancelletto) che abbiamo precedentemente scritto nel relativo pulsante APRI: 
  $(".row3").addClass("sezione1");
  $(".row4").addClass("sezione2");
  $(".row5").addClass("sezione3");
  $(".row6").addClass("sezione4");

L'ultima parte del codice si occupa dell'animazione: il valore scrollTop:100 indica la posizione della barra di scroll al termine dell'animazione e deve essere adeguato all'altezza dell'header o comunque regolato a piacere.


Nota: il valore dell'attributo href del pulsante APRI deve essere costituito dal prefisso obbligatorio "#sezione" seguito da numeri o lettere o parole che identificano in modo univoco la sezione.


24 luglio 2016

Template Tamarillo per WebSite X5 Evolution e Professional 12

Era da molto tempo che non adattavamo un template per WebSite X5, un po' per la sottile amarezza che deriva dal ritrovare i nostri adattamenti in vendita in altri luoghi, un po' perché, diciamolo francamente, è un lavoro molto lungo.
Tamarillo è il primo template che abbiamo proposto su questo blog: lo abbiamo riadattato ex novo  per la versione 12 (Evolution e Professional) liberamente rivisto e corretto a nostro gusto.

Il template originale è rilasciato sotto licenza Creative Commons 4.0. Per quanto riguarda il nostro adattamento leggi i termini di utilizzo.

template tamarillo per website x5 12
DEMO

Rispetto all'originale abbiamo previsto alcuni elementi a schermo intero: la slider iniziale e la fascia di sfondo della sezione Contact, ottenuta utilizzando lo script descritto in questo articolo.

Come nell'adattamento per la versione 10, la sezione Blog della Home Page visualizza gli ultimi articoli inseriti nel blog del programma: a partire dallo script illustrato in questo topic sull'Unofficial  abbiamo modificato i codici JavaScript e CSS, integrando le media queries per la visualizzazione responsive. Si precisa che questa funzionalità è fruibile solo online.

Anche in questo adattamento abbiamo integrato la stessa gallery del template originale con un oggetto HTML, apportando alcune modifiche per la visualizzazione in modalità responsive.

Nel progetto è stato utilizzato il Google Font "Open Sans". Per integrare il Google Font, prima di importare il progetto, occorre inserire il relativo file .ttf nella sezione "Preferenze" del programma. Oltre che da Google Font, è possibile scaricare il file da QUI.

Questo il codice @import da noi utilizzato:

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

Nella pagina download sono presenti i file .iwzip da scaricare 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, custom.js, customHome.css e customHome.js sono commentati per permettere una facile lettura ed eventuale modifica.

Visto che abbiamo ricevuto molte richieste di delucidazioni su come procedere per modificare questi file, approfittiamo di questo articolo per spiegare la semplice procedura: premesso che questi file si trovano nelle cartelle css e js del progetto (esempio: Documenti\Incomedia\WebSite X5 v12 - Evolution\tamarillo_evo12\Preview\css) per prima cosa dobbiamo copiare in un'altra cartella il file da modificare, eseguire le modifiche e salvare il file. Al Passo 4 - Statistiche, SEO e Codice - Esperto - File allegati al codice, rimuoviamo il vecchio file ed alleghiamo quello modificato.

Se si vuole inserire nel menu un link ad una pagina diversa dalla home, seguire le indicazioni del punto 1 di questo articolo: quellidelcucuzzolo.blogspot.it/2015/03/template-tamarillo-menu-link-esterno.html