23 marzo 2015

Template Tamarillo
Come inserire nel menu un link ad un'altra pagina o sito esterno

Il template Tamarillo per WebSite X5, illustrato in questo post, è un template monopagina: tutte le voci del menu rimandano a sezioni presenti nella pagina stessa. E' possibile però inserire nel menu anche link ad un'altra pagina del sito e/o a un sito esterno.
Il plugin Single Page Nav utilizzato, prevede infatti la possibilità di identificare i link che non appartengono alla pagina, assegnando loro una classe (esempio: external).

Queste sono le modifiche da fare al progetto che avete scaricato:
  1. Menu generato dal programma
    • Per creare una voce del menu che rimanda ad una pagina interna del sito, dobbiamo creare una pagina e renderla nascosta; inseriamo quindi un nuovo livello in Creazione della Mappa e, in Proprietà Livello, assegniamo come Collegamento su click sulla voce di Livello, File o URL, File su Internet (esempio: link a Pagina 1):
      pagina-1.html" class="external

      wsx5 - link livello
    • Per creare una voce del menu che rimanda ad un altro sito, inseriamo un nuovo livello in Creazione della Mappa e, in Proprietà Livello, assegniamo come Collegamento su click sulla voce di Livello, File o URL, File su Internet (esempio: link a Google);
      http://www.google.it" class="external

      wsx5 - link livello

    NOTA: il codice è volutamente errato perché i doppi apici mancanti vengono inseriti dal programma.

  2. Menu mobile
    Occorre inserire la nuova voce del menu anche nel menu mobile. In Modifica del Modello, Intestazione, facciamo click sull'oggetto Codice HTML che contiene il codice del menu mobile e aggiungiamo il codice della nuova voce del menu:
    <li><a class="external" href="pagina-1.html">Pagina 1</a></li>
    

    wsx5 - codice HTML

  3. File Allegati al Codice
    Infine dobbiamo sostituire un file JavaScript.
    Nella Home Page apriamo l'oggetto HTML e Widgets che contiene i file allegati al progetto (scheda Esperto) e rimuoviamo il file customHome.js.
    Scarichiamo il file customHome.zip modificato e, dopo averlo decompresso, alleghiamo al progetto, sempre tramite lo stesso oggetto HTML, il nuovo file customHome.js, impostando come Percorso relativo sul Server la cartella js

4 commenti:

  1. Ciao Ragazzi. Ho sostituito le foto e la descrizione, ma non riesco a sostituire i bottoni in basso a destra. In pratica vorrei sostituire invece che "details" con "continua a leggere" e collegare la dicitura con una pagina interna del sito. Come devo fare? Grazie per l'aiuto

    RispondiElimina
  2. sono riuscito a sostituire anche la dicitura nei bottoni, ho l'unica difficoltà a collegare la dicitura con una pagina del sito. Come fare?
    grazie 1000 per la cortese risposta

    RispondiElimina
    Risposte
    1. Ciao Francesco,
      hai commentato nell'articolo sbagliato, qui si parla di come inserire un link nel menu ad un'altra pagina.
      Se ti stai riferendo ai pulsanti della flexslider del template Tamarillo, devi semplicemente sostituire il carattere cancelletto (#) che trovi nell'attributo href del codice con il nome della pagina, esempio:
      href="pagina-1.html"

      Elimina
    2. Riuscito. Grazie 1000 e perdonatemi tutti ancora se involontariamente mi sono "introdotto" commentando in un altro articolo.

      Elimina